Why Is CSS So Weird?

37 thoughts on Why Is CSS So Weird?

  1. 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 !

  2. 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.

  3. 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)…

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

  5. 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.

  6. 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!

  7. 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.

  8. This video is so so great. It perfectly nails down things I've been trying to explain to designers and (non front-end) developers for more than a decade. The InDesign comparison, the print press metaphors, everything is perfect. Thank you so much Miriam and the Mozilla team for this.

  9. 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.

  10. A small comment, your example of how the old site works with modern browsers doesn't apply to what you are saying. Actually a better example would be to open a modern site in a very old browser, they you will see the ignore 'feature' working.

  11. 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.

  12. QuedΓ© pendiente de lo que decΓ­a durante los 15 minutos, eso es raro. Pulgar para arriba Morzilla Dev, buen contenido.

  13. 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.

  14. 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.

  15. 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

  16. 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.

  17. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *