Why Tailwind CSS Won

Re:Why Tailwind CSS Won by danielvaughn on Wednesday August 16, 2023 @09:48AM (#37146949)

There are two different things people could be referring to when they mention the "cascade".

One is CSS style inheritance. So if I do this:

  <div class="text-blue-500">
    <i>hello</i>
    <b>world</b>
  <div>

The `text-blue-500` style is going to cascade down to the descendent elements. That's just how CSS works and there's no getting around it.

The other usage of the term applies to a style of writing CSS that makes use of this cascade. So something like this:

  .card {
    color: darkgray;
  }

  .card .header {
    font-size: 20px;
  }

I think what people are referring to in this thread is the latter, which is not the cascade, but a particular approach to CSS.

[ Parent | on HN ]

Re:Why Tailwind CSS Won by doix on Wednesday August 16, 2023 @10:07AM (#37147238)

I mean, the top just happens because color has 'inherit' by default. The latter is specificity, and normally what I think of when I hear "cascading". But, it turns out that isn't cascading either [0].

Cascading refers to the order stylesheets have priority when loaded by the browser. Going to have to update my definitions for the future. I always thought cascading referred to how specificity worked.

Edit: no wait, specificity is part of cascading, cascading refers to the entire process of determining which style applies, including specificity. Inheritance on the other hand is not part of cascading. My definitions were right, don't need to relearn anything.

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

[ Parent | on HN ]

Re:Why Tailwind CSS Won by gnagatomo on Wednesday August 16, 2023 @10:20AM (#37147440)

>But, it turns out that isn't cascading either

The order in which stylesheets are loaded and it's origin is just part of the cascading algorithm. See the "Cascading order" section https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#cas...

[ Parent | on HN ]

Re:Why Tailwind CSS Won by danielvaughn on Wednesday August 16, 2023 @10:50AM (#37147968)

In truth everything mentioned above is part of the overall cascade. CSS takes almost everything into account - stylesheet ordering, rule ordering, rule specificity, etc.

[ Parent | on HN ]