Yeah, the other poster pointed out https://developer.mozilla.org/en-US/docs/Web/CSS/Inheritance and https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade.

I meant the concept that when you e.g. apply the style "color: blue;" to an element, all child elements get the same style unless you override it. I'm not saying it's identical to inheritance, but it's similar in that changes and additions at the top-level ripple down to lower levels, which I find causes most of the problems when writing maintainable code.

> I meant the concept that when you e.g. apply the style "color: blue;" to an element, all child elements get the same style unless you override it.

This is the first thing you've said so far that I would push back against. Neither BEM nor Tailwind removes this behavior that I'm aware of. I thought when talking about the cascade you meant generic styles on elements like "p", "ul", etc... getting applied across separate components, or specificity of child selectors, or something similar.

If you really dislike styles being applied to children in the DOM that don't override those styles, I don't think there is a way around that other than web-based components and shadow DOM with isolated styles. Or I guess use a bunch of style resets beforehand I guess? Neither Tailwind nor BEM gets rid of child inheritance of applied styles; you can use @layer I guess, but that doesn't get rid of that behavior either, it just allows you a bit more control over style order.

If you're using Tailwind and you write:

  <div class="text-red-400">
     <p>Some text</p>
  </div>

that text will be red. If you're using BEM and you write:

  <div class="Container">
     <p>Some text</p>
  </div>

  .Container { color: red; }

same deal.

> I thought with inheritance you meant generic styles on elements like "p", "ul", etc... getting applied across separate components

Yes, so I mean if you add "color: blue" to "p", it's now going to start interacting with any element that's a child of "p" (which will probably be on all pages on your website so hard to predict and check what will happen).

BEM and Tailwind don't get rid of the behaviour of the color being applied to child elements, but it at least forces you to isolates these kinds of style changes to the component level (vs sitewide) which is what improves maintainability.

Okay, we are on the same page then -- sorry. Yep, I generally agree with this.

I can see how it causes problems, but I don't really see any alternatives for certain properties. Would you want to set the color property on every element that contains text? Or do something with the universal selector?