I respect CSS for the flawed masterpiece that it is.
CSS is a wonderful, powerful language that is fundamentally broken with regards to styling UI. Its "everything global all the time" design makes it very difficult to reason about, easy to break styling elsewhere in your app, and has led to all sorts of awkward workarounds such as BEM.
That's why I almost never use CSS on its own, without some nice abstraction that provides scoping.
WebComponents with shadow DOM work well if you want very strict scoping, but more commonly you'll want a few global styles (such as fonts) to be able to affect the inner scope, while preventing any of the inner styles from leaking.
JSS works really well for this, as do Vue or Svelte's scoped style tags.
All these solutions are built on top of plain old CSS, so you get all the power of CSS without the drawbacks.
I respect CSS for the flawed masterpiece that it is.
CSS is a wonderful, powerful language that is fundamentally broken with regards to styling UI. Its "everything global all the time" design makes it very difficult to reason about, easy to break styling elsewhere in your app, and has led to all sorts of awkward workarounds such as BEM.
That's why I almost never use CSS on its own, without some nice abstraction that provides scoping.
WebComponents with shadow DOM work well if you want very strict scoping, but more commonly you'll want a few global styles (such as fonts) to be able to affect the inner scope, while preventing any of the inner styles from leaking.
JSS works really well for this, as do Vue or Svelte's scoped
styletags.All these solutions are built on top of plain old CSS, so you get all the power of CSS without the drawbacks.
I spend futile time wondering what we would use for styling apps and pages if we started again from scratch.