Why Is CSS So Weird?

[@firstprincipleslearning]

I love this ! Explaining the principles behind browser decisions and helping us to understand the why is invaluable. When you said `CSS is designed not to loose content and not cause harm`, it explained the default behavior of overflow so well, I will never ever forget it. Teaching the why is so powerful, it just makes sense. More content like this please. Thank you !

[@lohar5055]

Designed not to harm anyone except developers. It could at least use warnings in console.

[@michaelgoddard9906]

Your explanation is superbly eloquent. The analogy to plays, script writing and stage directions is particularly insightful.

[@Maxii42]

"We loose control. And that's a feature" Fantastic explanation! Great choice of words. Thank you

[@danman6669]

*lose

[@markthomasnoonan]

This is so great. The analogy with script/stage directions makes perfect sense - directors will do what they think is best to present the work for their audience with the actors and circumstances they work with. Browsers will do their best to display the content on the device and viewport they have for the audience of that content.

[@soupwaylee]

0:56 "But CSS is for Documents" 2:42 Everything is on the Web. What Now? Is CSS also for the Modern Web? Why is CSS So... Weird? 4:57 Medium with a Mission 7:39 !Cascading Style Sheets 8:25 Designers Suggest 8:59 Meaningful Relationships 9:12 Intentionally Resilient 9:49 Intentionally Contextual 10:34 CSS is a Presentation Layer 12:36 We Script, Browsers Perform 13:17 CSS is Different by Design 13:35 "Control... is a limitation of the printed page" 14:22 The Web Adapts to Context 14:40 CSS is for Adapting

[@ReachByteBurst]

thx summary guy

[@tpe54]

I was whining about changing my site from tables to learning CSS. You made it clear why and I've stopped whining. Thanks!

[@laurentgauthier8742]

Wow.... My mind is blown away by this presentation. I just love the historical and technical overview and how it gracefully leads into understanding the foundations.... Genuinely inspiring. Thanks!

[@Yangtaonewage]

Rarely comment on youtube, but this is such an amazing intro! Thanks for taking time to explain it!

[@Gverri]

Really appreciate the time you invested into making this. Would love to see similar content on other standards of the web. Sometimes in the hurry to get something done we forget to learn about the details of what was driving the people who made the decisions.

[@ChristopherJamesCalo]

Exquisitely articulated.

[@tayyabkhalid7476]

this-video { explanation: best ever; }

[@3dfxmusic]

Miriam, this is honestly one of the best CSS videos I've seen in my life. THANK YOU.

[@jerbau]

A very well made explainer video that every front-end developer should watch. CSS has been actively evolving since it started with a number of tags you can actually memorize. With the advent of devices attached to the web it is not too difficult to see why CSS has been seen as weird or to some degree as insane. CSS is crazy beautiful and I hope it adheres to its original intent and let engineers be reminded what it is whenever they are in doubt.

[@nathanvandy4249]

This was amazing, I was looking at this from the perspective of the flexibility law. Laws are often written to be able to regulate interactions between persons, but it understands that in some cases there will be edge cases that can't be controlled through existing laws. That's where have standards and principles to compensate and provide human interactions with the necessary flexibility we need co-exist in such an unpredictable world. This makes law backward compatible. Especially in judge-made common law jursidictions. CSS also is written to be able to display information to different devices, but it understands that there will be edge cases that can't always be forseen in a device's ability to read the language. Therefore, it creates a backward compatibility by allowing client browsers to implement what it can read ignore what it can't. As explained in the video: CSS is designed not to loose content and not to cause harm. Law is/should be designed to not loose it's purpose and to not cause harm

[@edwardgyampo]

This is one of the most beautiful explanations ever!

[@fassie79]

A really good explanation, also with the theatre analogy. I never thought of it this way. It makes more sense now.

[@paulhammond8583]

Lovely video this. I thought you did a great job at explaining the "why" part of the question and by placing everything into historical context it helps to explain it in a way that makes a lot of sense.

[@songwright]

Hello, Miriam Suzanne. I am also a playwright and web developer and this is a well-thought out presentation that answers many questions I had about CSS.

[@z4ez4r]

Perfect explanation by Miriam. For me, its these little contexts tha keep me going while learning something new. Glad I watched this. 🙂

[@DeandreMurray]

Thank you for this, extremely comprehensive, "message from the sponsor" just clean information to assist those willing in the learning process. This is how the internet was indedned for public use I feel. Once again thank you!

[@nahueljo]

wow, the best explanation I've seen about what it really means to design for the Web in CSS. I'm sharing this will all my developer friends! haha

[@DanteMishima]

Brilliant explanation. No annoying facecam for important parts. I'm sold

[@ehza]

This is the video I probably have been looking for eons and eons! Thank you MDN!

[@TheNora_]

I find your explanation extremely eloquent and understandable!

[@davidpaez_co]

Amazing explanation! Thank you. It makes you understand more deeply the why. Great job Mozilla!!!

[@ScottdeJonge]

Super well articulated and interesting lesson on the behaviour and history CSS. Must watch for anyone looking to understand styling in the browser.

[@ydoomenaud]

I've been doing web dev since 1999 and this video is missing some important points and misrepresenting a few of the others. The W3C recognized early on that HTML attributes were ill-suited to manage presentation, so an external standard would be necessary. 9 separate specs were offered and the unpleasant truth is that CSS was merely the least worst of the bunch, chosen because everyone was familiar with Microsoft Word's stylesheet character/paragraph/section formatting/inheritance model so they knew it was already feasible to implement. The _real_ weirdness of CSS is that of the 3 web technologies, it's the only one developers can't extend and it came with a sizeable number of holes in what any graphic designer would expect from it. Tortured combinations of selectors were necessary to achieve some basic things like vertical centering, drop caps, side by side text columns, etc. and variables critical to theming systems were unavailable. While it's matured for these examples and others, it's still limited to what the spec allows and its strict unidirectionality hobbles design logic: for example, the very table-based formatting that CSS was intended to replace wasn't possible because table formatting cascades in both directions whereas CSS is only top-down: instead of rethinking this, every 𝚝𝚊𝚋𝚕𝚎 element was recreated as an equivalent property value for 𝚍𝚒𝚜𝚙𝚕𝚊𝚢. A few important corrections: CSS doesn't "suggest" anything; where the browser doesn't obey the selector is only where doing so contradicts a higher order rendering directive. CSS is *completely* able to "lose" content: 𝚍𝚒𝚜𝚙𝚕𝚊𝚢:𝚗𝚘𝚗𝚎; doesn't reposition or hide content, it literally removes it from the document having implications for assistive technology. And it has enough overflow/clipping/positioning properties to visually hide content.

[@peppigue]

I'm new to the game, but this fits my impression so far. Front End is vastly more complicated than it potentially could be if the standards from the start were created with the intention of facilitating presentation of a mix of multitudes of different content on a rectangular viewport, and not all this iterative patching of a text based paradigm to fit with modern needs. (Still really liked the video, though.)

[@robmelb.2667]

I'm paying thousands of my precious dollars and a substantial amount of time to those smartass tutors in my dev boot camp, yet they are only capable of using all these fancy technologies themselves rather than teaching me in the least amount of time and effort. In the meantime, SHE does it so well by explaining and presenting all those history and knowledge in such an interesting and easy-understanding way, I really wish my tuition all goes to her instead of my useless tutors.

[@fbouet]

Fantastic video and a great overview of CSS! Love it.

[@jamesgulland]

Such a great, informative video - thanks! As someone fairly new into the dev world, so crucial to understand the history and context behind these principles. Biggups

[@miamiatz]

You are blessed with the ability to explain things.

[@KristopherGates]

I've been a non-contributing web consumer for longer than I can remember, and have recently decided to revisit my fundamentals. This is such a fantastic overview and it's of a quality that it doubles as an introduction. Maybe that's graceful degradation? Absolutely top tier presentation. Thank you.

[@TomasHradckyComposer]

Words escape me currently so I'll start with my thanks. This is a beautiful work. Wonderfully eloquent. Wonderfully informative.

[@Ratchet2022]

This explanation is very profound. Thank you. Now I understand CSS on a much more intuitive level. It’s a declarative language. It’s like you tell a browser how to display something, though while there is a common W3C spec that browsers use to implement the feature specs differently so that we can trust that what style we declare in one browser other browsers will display the same way, due to the cascading algorithm from browser to developer to client, the “actors” themselves and the browser itself has the final say-so.

[@RobBrogan]

This was super interesting! Great talk. Loved the history lesson :)

[@Thytos]

"Control is a limitation of the printed page" Wow. This changed my mind. I knew that developing for the web means giving up control to a certain extent, but I never saw this as an advantage.

[@ray-j9c3p]

contextual, suggestion, universal devices, no controls, adapting. What a nice explanation!

[@brootaylor]

Gosh, how brilliantly articulated is this! Thank you Miriam.

[@jopa_ryds]

Such a great explanation, more people taking their first steps in coding should see this. Thanks!

[@slim_mike]

very nice video!, please do more videos like this one (about the history and the philosophy behind css)

[@hcx1853]

* Why is CSS so weird? - Miriam Suzanne * Device-agnostic design on the web. * Web mission statement - open standards, accessibility, internationalization. * Client controls display. * People, devices, browsers, settings, operating system, defaults. * Cascading styles

[@pointer333]

Excellent presentation! Thank you!

[@besknighter]

I used to hate CSS. I never got quite what I was going for and it always broke apart with the smallest of the resize. After watching this and actually understanding the reason behind each decision, it made so much sense that I decided to give it another go. This time, I'm going to learn it the right way and with the right mind set.

[@Ratchet2022]

Look into grid and flexbox.

[@sheriffderek]

Triumph! It's all the things - but concise - and better. Great job.

[@drivertoursexperience]

she talks in a way expressive and liked, i could hear her explain all day long

[@somepersonalconsiderations]

very clear and convincing explanation. Styling in the web is for adapting to the different needs of different audiences... is not a limit, it is a feature!

[@UteBescht]

Thank you for this insight - the idea makes some nasty moments by writing CSS more understood. So CSS is more like focusing on the big picture for me now - working it all out for all kinds of consumer devices. Sure we all know that somehow since it is a "style" language. But these words and explanations really made that clear again. And might save any angry nights the next time when you want to bite your keyboard on spotting a "CSS-bug". Somehow this was a signpost to change the road to CSS-Shangri La - thank you for this 😀

[@bmehder]

This video is going in my favorites along with Rich Harris' Rethinking Reactivity. It's a must watch in my opinion.

[@marco_ciampini]

Amazing video, so clear and well thought

[@michaelshea4834]

Sweet clarity!

[@jaynine1000]

Very eloquent and insightful. Thank you.

[@sasamilic720]

the theatre analogy is great!

[@zshanahmad2669]

i just fell in love with CSS and the whole web all over again

[@xaxaurtiz4695]

superb ! huge thanks for that explanation :)

[@silalokucyjna]

fantastic explanation! thanks a lot!

[@alebarbaja]

What a beautiful video! Its remind me why I fell for the web and the open culture there are exists in there.

[@EliasCole-n6h]

Brilliant video, thank you!

[@blahdelablah]

The main issue with CSS isn't that content cascades, the main issues are that CSS is bloated and inconsistent. I'd suggest the goal should be a small easily-understandable core language for layout and styling, with options to extend it for the edge cases. Perhaps the answer is to learn the lessons that CSS taught web designers about styling HTML and design a new language for that purpose, one that has cross browser support out of the box. It could be a language that transpiles to CSS at the start, but the goal should be simplicity and flexibility. I'd imagine CSS will eventually become too large to easily maintain, at which point this type of reboot becomes almost inevitable, though perhaps I'll be proven wrong about that.

[@PeterStJ]

Thank you for this awesome presentation, even though I already know all this, it was really nice seeing it summed up in such a brilliant way and explained on a one go. Thank you!

[@abdulkadirguven1173]

Very well explained.Thanks

[@islamsayed8]

Great explanation! Thank you!

[@dieshimitigert6758]

great explanation! thank you!

[@JIraya128]

impressed by the way you explain things, thanks so mush

[@progtom7585]

"either way we have to express our opinion on twitter" 🤣 - state of the world today, everyones a critic. A great video, thanks for explaining the origins and decisions CSS makes and the reason its designed the way it is.

[@FJ.Y]

Here from Kevin Powell's channel, he thinks you're the queen of CSS!!!

[@sofiaborovskaia3714]

After watching this video I feel like I have just read an essay or a chapter of a book, I feel... nourished.

[@WillFastie]

Very good. My only problem is that taking this argument to its logical conclusion, we're to build Web content (and the infrastructure) in such a way that it will adapt to any conceivable future device or environment. I don't see how that's possible but I do see how it raises the cost of building Web sites by, in effect, adding requirements that have nothing to do with the mission at hand, perhaps by writing CSS that is twice as complicated or dense as is actually needed to render contemporary content. We wouldn't be struggling with this if it weren't for phones and their vertical orientation, which really shook things up. I'm not suggesting that we shouldn't build stuff to render well on phones, only that we don't know what the next seismic event in presentation and/or devices will be.

[@WillFastie]

@@MozillaDeveloper I'm a fan of Layout Land and recommend it to all. Resilient CSS or multiple fallback scenarios makes my point - higher complexity and more work. Trying to convince a client to pay for such extra work is challenging. I could build one CSS framework and make all the sites I build look more or less the same, which would allow me to amortize the cost of development. Unfortunately, that's the design rut responsive sites have created.

[@MrMonishSoni]

Nice Explanation. Thank You.

[@seangrogan3622]

This is great! thought-provoking and interesting

[@germancruz2835]

Gracias por los subtítulos

[@chameleonstreet5545]

Most helpful video on technology that I have so far watched? It is likely.

[@jewellscott]

Yessss, CSS appreciation. Thank you!

[@gpnryou]

Best explanation I've seen about sth in a long time!

[@aziziyazit8423]

Love this video a lots

[@BorisSchwarz-f8d]

You are fantastic !!

[@rahelluethy]

This is fantastic - thank you so much!

[@MinisterOfKungFu]

Fantastic video!

[@katherineelizabeth2232]

Love this but I still don't understand how nobody has figured out how to localize programming languages like CSS, HTML, and others.

[@ukitirokun]

such an interesting perspective 0.o

[@RenaudDenis]

Wonderful video

[@richtourist]

That sounds lovely, but it's not true. HTML and CSS are a disaster; a nice idea when they started, but turned out to be the wrong way to go. The dev tries to accommodate the range of possible user agents and contexts, but HTML/CSS make that difficult because they are complex, overlapping and ill-defined, also the browsers add their own complexity to the mix. Devs have actually developed a CSS style sheet for turning off the CSS defaults from all browsers in an attempt to get 'back to zero' so the dev can start from some kind of sanity. That is why there are so many frameworks that try to handle it for you, but they can't wrangle the best, either. The suggestion that the user is going to apply their own CSS to get their preferred view never (5nines) happens. The example given of changing the setting on Firefox just results in a mess (on a real web site) with all sorts of selection errors causing 'rough edges'. Users are not writing or applying their own styling. If the dev doesn't handle the context or offer a 'mobile' version, then the browser can't fix the problem, even though it knows the local context, without a dev's help; it might as well be handled by the dev in the first place. If people want data for their own purposes they get it from an API not by reinterpreting the original webpage. Defaults are a curse from Satan, especially when they cascade, and they are quite capable of hiding your content in default size=0. I recently saw a cursor 'stuck' in a 'buffering' spinner because of a default cascade. It continued to blink as it rotated; hilarious but pointless. Not to mention the insane syntax and the security vulnerabilities that both HTML and CSS allow through their quirks and immense unnecessary complexity (saw a CSS keylogger vulnerability recently). HTML and CSS are not a neat separation of concerns; they both affect layout and both can hide content. It's such a mess it isn't even easy to define how they overlap. Was it the CSS or the HTML that enabled that cursor to appear in the spinner; it was probably both. and when I say CSS do I mean the page's or the browsers. It's a mess. It would be much better if the browser just told the page about its display context, and the page made all the decisions. And if you want raw data ask an API; HTML is a ridiculous mark-up. The web just didn't turn out as people thought it would. WASM offers some hope, but also new threats to security.

[@NathanPiazza]

The problem is that the designers of CSS were naive and extremely ignorant about the kinds of control users do and don't want. People actually want to consume and use things produced by designers exercising a great deal of control - WHEN that control is exercised by people with talent and judgment. Giving users too much control, or the wrong kinds of control, and designers not enough, is actually not a recipe for a better experience than print, but an experience that simply hews to the lowest common denominator. Whether that's the *worst* screen size, or the *worst* attitudes and impulses about how content and user experience should be. If it weren't for print designers pushing back on those (frankly ignorant) technicians who first built HTML and CSS, all links would still be blue and underlined, and all buttons would be grey with black monospaced text, while users would have endless ability to change font sizes and swap out images. In short, the web would look like hot garbage.

[@linkow]

best explanarion ever. thank you!

[@melonenlord2723]

How can computer make smart desicions from CSS input? Its like working up a sheme and if something is missing it says no, im doing nothing, you forgot to say width:100%, how could you forget? :D Or if you set position relativ to an element, because you want all the position data relative to the parent element it also says no, because the parent element in not set to relative or absolute. That things i find weird about CSS, you dont only define the CSS of an element in this element, you also define the child elements with it and that is totally weird and confusing.

[@TaichiOsorno]

Nice explanation, make a lot of sense!!

[@TaichiOsorno]

I struggle with css every day because of my work (full stack web developer). At first it was a mixture of awe, love, hate, etc... Now as i understand more the love is growing and my work is getting more interesting and less boring. Thanks!

[@viktarlebedz1748]

Thank you!

Beautiful 😍

[@SquaredbyX]

Remember what the thing after this was for when we move on to the thing after that. This should explain it's weirdness.

[@Retrofire-47]

saying it's a feature is very subjective imo. but great explanation

[@software_designer]

Thank You.

[@NickelCityPixels]

This was good but I was expecting some insight about a better way to conceptualize CSS development.

[@ChrisWilliamsDallas]

I love this!

[@alakhdar100]

i keep comming back over and over to this video whenever i want to embrasse how beautiful this language i hate is.

[@AbdullahAlMamun-mc4nq]

What is your name,,? This video is very informative,,and good for a front end web designer.

[@gustavoluchi]

Damn, so beautiful!

[@beardymonger]

Brava!

[@jacinyan2348]

Ok, in short, we don't have full control of what we write

[@kelongshi7551]

So great. Open Web and Open Mind.

[@yankeeslee9050]

thank you mis, with soul which you have material becomes gergous, patient for more :dd ouu i forgot css is a rock :D

[@batmansmk]

Nice video! For me it's also a strawman argument in a way that it doesn't address the core issues I'm facing daily with CSS. I think styling things can be a better experience: removing the cascading aspect to not tie DOM structure to style, not having specificity or !important, generalizing the variables to something more intuitive and scalable, having means to limit the scope of rules, removing semantics / layouts overlap (a button and a div should be the same from a CSS standpoint)...

[@guerra_dos_bichos]

(a button and a div should be the same from a CSS standpoint) , should they? I mean it would be great to be able to style everything from that clean slate, but these are essentially different thing that are used differently and should provide diferent experiences no matter if you are building something with bootstrap or seeing a page from an asus eepc in cambodia I feel a little outclassed here, but my main worry is we start to take our demands to w3c and mozilla and so on , and they start to lose sight of the huge picture they have to conform their standards to

[@MiriamCodes]

It's not necessarily an either/or proposition, and there has been a lot of movement in the w3c and browsers to improve form styling, layouts, scope, etc *within* that bigger picture. I highly recommend following those discussions, and participating in them. CSS is being actively developed along with the web - that will always be true - and it's important that we have a shared understanding of the goals/constraints as we make those improvements.