Hacker News Reader

Comment by yoav | Hacker News Reader

Senior Staff grey beard: Counterpoint: The C in CSS stands for Cascading.

So you’re not learning CSS. You’re learning Tailwind specific classnames that expand to non-cascading style rules.

This is not true. There's no way to create a "non-cascading style rule" unless the style rule already doesn't cascade. You still have to understand the cascade in order to use Tailwind.

> You still have to understand the cascade in order to use Tailwind.

Can you expand? I haven't used Tailwind, but from looking at the docs, it looks like a short-hand syntax for writing inline styles. Not exactly the same since it can take advantage of media queries and other things that you can't do with inline styles, but close enough conceptually.

Where is the cascade with Tailwind? Perhaps I completely misunderstood how it works, but I would say that it feels like it's purposefully trying kill cascading.

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.

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

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

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

Mid level beard: Tailwind makes most sense in an app developed with components.

So the cascade still happens, just in a different way.

You're not the first person to mention that, to which I counter: Cascading is a mistake in today's component-first web. It works at a very small scale, and _sure_ some things should be cascaded—which Tailwind absolutely lets you do. But 80% of your styles are going to end up scoped to their component—so you might as well use a tool that leverages that concept to its fullest extent.

All my "hard opinions" aside, I have anecdote that no amount of facts can change—I build things faster, more maintainably, that look BETTER than anything I did before Tailwind. Until those pillars stop being true—Tailwind will have my heart.

the cascade has as many benefits as it has drawbacks, few people like to juggle specificities.

IMHO the only important application of the cascade is in its original purpose: custom user defined stylesheets (today often via browser extension or adblockers), but you can add proper descriptive attributes to your markup for them.

In today's uses, cascade _with_ custom properties (the vars defined within :root ) are powerful and are what I leverage when providing theme-able ui libraries. Dark mode, light mode, large mode can all be solved using custom properties which to me most exemplify the power of the cascade.

that is inheritance not the cascade: Inheritance allows for DOM nodes to use properties set on their ancestors, the cascade algorithm is how multiple conflicting rules interact and are overwritten.

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

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

Custom properties are by default inherited by all descendant nodes (they also interact with the cascade, but it is less relevant) and this can be used with tailwind in a couple of different ways: https://stackoverflow.com/questions/64872861/how-to-use-css-...

Styles applied by Tailwind cascade like any other styles.

Reply on news.ycombinator.com