6 ms·

The CSS Cascade (2020)

79 points by IA21 5y ago

captainmuon 5y ago
Huh, I always thought the cascade referred to the fact that certain properties apply to child elements (like font size) and others don't (like borders). There are cascading and non-cascading properties. What is described here I would call the specifity (which is actually only one part of it). The funny thing is that I even implemented a CSS parser and evaluator without knowing the official terms.
- seumars 5y ago
  I had the same thought. Property inheritance could be a more specific description though?
dncornholio 5y ago
Which rules wins is the rule that is the most specific. This article explains it as having 'the most hits'. Whatever that means.
- wccrawford 5y ago
  Not just most specific, though. IDs are weighted higher than classes, so if there's a tie between 2 rules, an ID wins over a class, even if it comes first. If 2 classes (or things weighted the same as classes) tie, the later rule wins. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
  - eurasiantiger 5y ago
    Class specificity can be artificially increased to work around this. .foo.foo { color: blue; } .bar { color: red; } <div class=”foo bar”> I’m blue </div>
    - bryanrasmussen 5y ago
      shouldn't that be foo.bar?
      - eurasiantiger 5y ago
        No, the idea is that .foo.foo increases the specificity of .foo over .bar
        bryanrasmussen 5y ago
        Ok, and checking it I can see that foo.foo.foo increases specificity yet again and so on infinitum I suppose. I suppose this behavior is specified somewhere and you've read that part of the spec thus explaining how you know it, however as the class declaration is not 'foo foo bar' I think if I were to read it I would conclude that I disagreed with whatever logic was given. In fact this really seems to take away part of the argument for important, why not just make your rule be foo.foo.foo.foo.foo.foo when you really want to override something. Add enough foos you're sure to win out. on edit: why I would find foo.foo acceptable if the class declaration was 'foo foo bar' is because, while I find 'foo foo bar' silly I can see why someone would specify what happens when it occurs. I would also have accepted if the spec said 'foo foo bar' is reduced down to 'foo bar' and foo.foo does not make any sense. I guess I find foo.foo not making sense as being my preferred behavior.
        eurasiantiger 4y ago
        Here’s the thing: while the doubled-class ”.foo.foo” trick increases specifity over a single class, it doesn’t completely override selector specificity like !important does: you can still override anything set by ”.foo.foo” with a more specific selector like ”div.foo” or even ”.quux .foo” without having to use the duplicate classname everywhere.
        bryanrasmussen 4y ago
        sure, but foo.foo.foo overrides foo.foo or foo.bar etc. It seems sort of ridiculous.
rosmax_1337 5y ago
I find her website to be difficult to skim and overview, something which is essential for technical reading, because more often than not you will want to return to a document you have previously read to remind yourself of a detail that you remember there, somewhere. It's probably not only related to the wacky sidebar, but more related to the main content style, headlines being too large and an overuse of colors and emphasis in each section of text. Choosing to alternate dark and light scheme in the A/B code blocks doesn't seem right either. Which in a way is neither here nor there, since it's not related to her content. Personally I find the "Funky fact alert! The hierarchy here is actually reversed for..." style of writing to be offputting, but I'm sure some others like it.
- spiderfarmer 5y ago
  I do and I enjoyed her other articles as well, partly because of how it is worded and designed.
- lancesells 5y ago
  I'm all for utility but in this instance that sidebar really makes me appreciate the care and effort that went into it.
seanwilson 5y ago
Can anyone explain how deep use of the CSS cascade is any different to OOP inheritance over composition? This is usually discouraged in OOP languages now because it quickly gets confusing and hard to maintain. Multiple inheritance is also usually discouraged for similar reasons, but not in CSS in the way you can combine classes together without restriction (with `!important` and specificity on top of this). And is CSS cascading actually a good approach that scales to complex UIs and designs? Is this approach successful anywhere else or is there a way to do styling that's closer to regular programming? CSS seems to be in its own world with lots of debates about best practices.
- eurasiantiger 5y ago
  If only there was a way to generate a minimal cascade from a given set of styles. Sort of automatically detect properties that can be moved to a common parent. One would necessarily have to generate the HTML, too, otherwise there are no guarantees, and even then the CSS—browser interplay might lead to broken styles.
  - chrisweekly 5y ago
    Remix^1 has an interesting approach here; they encourage use of traditional CSS (vs CSS-in-JS), but the styles for a given route are scoped to the component. 1. https://remix.run/docs/en/v1/guides/styling https://remix.run/docs/en/v1/guides/styling
    - eurasiantiger 5y ago
      That’s a good fit when each route needs a lot of custom styles and each one is developed by a separate team. However, it doesn’t really fit well if a brand-themed app is developed by a single team. Consistency is easier to maintain when styles can be reused across the application, and things like styled-components don’t work that well there since they tightly couple components to styles, so you need a theming system on top of them… which is silly, because CSS itself is a theming system. CSS modules is a bit better, but even that encourages encapsulation which is necessarily broken if the styles need to be shared between components.
mocana 5y ago
Article a reminder of why CSS is so difficult to work with. Turns out I knew all these precedence rules, however when time comes to look at an element and figure out how to make it, say, wider, figuring out WHERE to add that rule is a challenge.
chrisweekly 5y ago
https://every-layout.dev https://every-layout.dev remains, hands-down, the best resource on CSS I've ever encountered since I started working in webdev 24 years ago. See also this recent post by Josh Comeau, which does a good job explaining layout modes: https://www.joshwcomeau.com/css/understanding-layout-algorithms/ https://www.joshwcomeau.com/css/understanding-layout-algorit...
- farleykr 5y ago
  I second https://every-layout.dev https://every-layout.dev. I was amazed to find out how straightforward the CSS is to accomplish the common layouts we see across the web. CSS is always a tricky one for me but every time I learn about modern CSS I get excited about how you can accomplish more and more while writing less and less CSS/
spansoa 5y ago
> When we add !important to the end of our declaration, it jumps to this level of the Cascade. Ideally, you reserve this level for Hail Marys, which are needed to override styles from third-party libraries Or when you write Stylus[0] themes to create custom skins for your favorite sites. Sometimes the Stylus theme doesn't honor what you've coded, and you have to manually over-ride with an !important [0] https://addons.mozilla.org/en-US/firefox/addon/styl-us/ https://addons.mozilla.org/en-US/firefox/addon/styl-us/
TAKEMYMONEY 5y ago
> Let’s take a look at the different tiers of the Cascade Bad way of framing this, the navigation and phrasing makes it sound like we're going from least to most specific as we scroll down the page but we're not. > The hierarchy here is actually reversed for !important rules, meaning that an !important browser default rule wins over an !important website rule I think this would be difficult for a beginner or even intermediate to understand. This chart does a much clearer jobs including every layer of specificity (including with @layer): https://webkit.org/wp-content/uploads/cascade-layers-2048x1152.png https://webkit.org/wp-content/uploads/cascade-layers-2048x11... I appreciate going for an approachable fun way to deliver a dry, complicated topic. Maybe look at how MDN writes about this stuff and get some of the specifics/technicals nailed down a little more. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
- bryanrasmussen 5y ago
  having hard time to think of any default browser rules that use !important, any ideas?
  - robin_reala 5y ago
    Fullscreen iframes definitely don’t have a border in Firefox, among others. https://searchfox.org/mozilla-central/source/layout/style/res/html.css https://searchfox.org/mozilla-central/source/layout/style/re...
    - deleted 5y ago
      [deleted]

79 points by IA21 5y ago

Huh, I always thought the cascade referred to the fact that certain properties apply to child elements (like font size) and others don't (like borders). There are cascading and non-cascading properties. What is described here I would call the specifity (which is actually only one part of it). The funny thing is that I even implemented a CSS parser and evaluator without knowing the official terms.

seumars 5y ago
I had the same thought. Property inheritance could be a more specific description though?

dncornholio 5y ago

Which rules wins is the rule that is the most specific. This article explains it as having 'the most hits'. Whatever that means.

wccrawford 5y ago
Not just most specific, though. IDs are weighted higher than classes, so if there's a tie between 2 rules, an ID wins over a class, even if it comes first. If 2 classes (or things weighted the same as classes) tie, the later rule wins. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
- eurasiantiger 5y ago
  Class specificity can be artificially increased to work around this. .foo.foo { color: blue; } .bar { color: red; } <div class=”foo bar”> I’m blue </div>
  - bryanrasmussen 5y ago
    shouldn't that be foo.bar?
    - eurasiantiger 5y ago
      No, the idea is that .foo.foo increases the specificity of .foo over .bar
      - bryanrasmussen 5y ago
        Ok, and checking it I can see that foo.foo.foo increases specificity yet again and so on infinitum I suppose. I suppose this behavior is specified somewhere and you've read that part of the spec thus explaining how you know it, however as the class declaration is not 'foo foo bar' I think if I were to read it I would conclude that I disagreed with whatever logic was given. In fact this really seems to take away part of the argument for important, why not just make your rule be foo.foo.foo.foo.foo.foo when you really want to override something. Add enough foos you're sure to win out. on edit: why I would find foo.foo acceptable if the class declaration was 'foo foo bar' is because, while I find 'foo foo bar' silly I can see why someone would specify what happens when it occurs. I would also have accepted if the spec said 'foo foo bar' is reduced down to 'foo bar' and foo.foo does not make any sense. I guess I find foo.foo not making sense as being my preferred behavior.
        eurasiantiger 4y ago
        Here’s the thing: while the doubled-class ”.foo.foo” trick increases specifity over a single class, it doesn’t completely override selector specificity like !important does: you can still override anything set by ”.foo.foo” with a more specific selector like ”div.foo” or even ”.quux .foo” without having to use the duplicate classname everywhere.
        bryanrasmussen 4y ago
        sure, but foo.foo.foo overrides foo.foo or foo.bar etc. It seems sort of ridiculous.

rosmax_1337 5y ago

I find her website to be difficult to skim and overview, something which is essential for technical reading, because more often than not you will want to return to a document you have previously read to remind yourself of a detail that you remember there, somewhere. It's probably not only related to the wacky sidebar, but more related to the main content style, headlines being too large and an overuse of colors and emphasis in each section of text. Choosing to alternate dark and light scheme in the A/B code blocks doesn't seem right either. Which in a way is neither here nor there, since it's not related to her content. Personally I find the "Funky fact alert! The hierarchy here is actually reversed for..." style of writing to be offputting, but I'm sure some others like it.

spiderfarmer 5y ago
I do and I enjoyed her other articles as well, partly because of how it is worded and designed.
lancesells 5y ago
I'm all for utility but in this instance that sidebar really makes me appreciate the care and effort that went into it.

seanwilson 5y ago

Can anyone explain how deep use of the CSS cascade is any different to OOP inheritance over composition? This is usually discouraged in OOP languages now because it quickly gets confusing and hard to maintain. Multiple inheritance is also usually discouraged for similar reasons, but not in CSS in the way you can combine classes together without restriction (with `!important` and specificity on top of this). And is CSS cascading actually a good approach that scales to complex UIs and designs? Is this approach successful anywhere else or is there a way to do styling that's closer to regular programming? CSS seems to be in its own world with lots of debates about best practices.

eurasiantiger 5y ago
If only there was a way to generate a minimal cascade from a given set of styles. Sort of automatically detect properties that can be moved to a common parent. One would necessarily have to generate the HTML, too, otherwise there are no guarantees, and even then the CSS—browser interplay might lead to broken styles.
- chrisweekly 5y ago
  Remix^1 has an interesting approach here; they encourage use of traditional CSS (vs CSS-in-JS), but the styles for a given route are scoped to the component. 1. https://remix.run/docs/en/v1/guides/styling https://remix.run/docs/en/v1/guides/styling
  - eurasiantiger 5y ago
    That’s a good fit when each route needs a lot of custom styles and each one is developed by a separate team. However, it doesn’t really fit well if a brand-themed app is developed by a single team. Consistency is easier to maintain when styles can be reused across the application, and things like styled-components don’t work that well there since they tightly couple components to styles, so you need a theming system on top of them… which is silly, because CSS itself is a theming system. CSS modules is a bit better, but even that encourages encapsulation which is necessarily broken if the styles need to be shared between components.

mocana 5y ago

Article a reminder of why CSS is so difficult to work with. Turns out I knew all these precedence rules, however when time comes to look at an element and figure out how to make it, say, wider, figuring out WHERE to add that rule is a challenge.

chrisweekly 5y ago

https://every-layout.dev https://every-layout.dev remains, hands-down, the best resource on CSS I've ever encountered since I started working in webdev 24 years ago. See also this recent post by Josh Comeau, which does a good job explaining layout modes: https://www.joshwcomeau.com/css/understanding-layout-algorithms/ https://www.joshwcomeau.com/css/understanding-layout-algorit...

farleykr 5y ago
I second https://every-layout.dev https://every-layout.dev. I was amazed to find out how straightforward the CSS is to accomplish the common layouts we see across the web. CSS is always a tricky one for me but every time I learn about modern CSS I get excited about how you can accomplish more and more while writing less and less CSS/

spansoa 5y ago

> When we add !important to the end of our declaration, it jumps to this level of the Cascade. Ideally, you reserve this level for Hail Marys, which are needed to override styles from third-party libraries Or when you write Stylus[0] themes to create custom skins for your favorite sites. Sometimes the Stylus theme doesn't honor what you've coded, and you have to manually over-ride with an !important [0] https://addons.mozilla.org/en-US/firefox/addon/styl-us/ https://addons.mozilla.org/en-US/firefox/addon/styl-us/

TAKEMYMONEY 5y ago

> Let’s take a look at the different tiers of the Cascade Bad way of framing this, the navigation and phrasing makes it sound like we're going from least to most specific as we scroll down the page but we're not. > The hierarchy here is actually reversed for !important rules, meaning that an !important browser default rule wins over an !important website rule I think this would be difficult for a beginner or even intermediate to understand. This chart does a much clearer jobs including every layer of specificity (including with @layer): https://webkit.org/wp-content/uploads/cascade-layers-2048x1152.png https://webkit.org/wp-content/uploads/cascade-layers-2048x11... I appreciate going for an approachable fun way to deliver a dry, complicated topic. Maybe look at how MDN writes about this stuff and get some of the specifics/technicals nailed down a little more. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

bryanrasmussen 5y ago
having hard time to think of any default browser rules that use !important, any ideas?
- robin_reala 5y ago
  Fullscreen iframes definitely don’t have a border in Firefox, among others. https://searchfox.org/mozilla-central/source/layout/style/res/html.css https://searchfox.org/mozilla-central/source/layout/style/re...
  - deleted 5y ago
    [deleted]