The End of Global CSS(

almost 5 years ago from Catalin Cimpanu

  • Matt SistoMatt Sisto, almost 5 years ago (edited almost 5 years ago )

    This is awesome. Haven't used it but it seems promising. If not, kuddos to this guy anyway for trying to fix our hard problems. PostCSS sure does seem to be inspiring some amazing work.

    Love this:

    We no longer need to add lengthy prefixes to all of our selectors to simulate scoping. More components could define their own foo and bar identifiers which — unlike the traditional global selector model—wouldn’t produce any naming collisions.

    People joke that naming things is the hardest problem in computer science, but seriously how much time have we spent collectively trying to think of what to name a "header"?

    We write things like ".navbar-header" because the styles live in the global scope and there is no real mainstream technique for achieving total isolation, while keeping your code DRY, that doesn't have some serious negative consequences.

    Deep nesting in Sass bloats your stylesheet and puts you in specificity hell. Inline styles (which are, ironically, the key to this concept) are basically unmaintainable. BEM is hugely helpful — I use it on everything — but is a methodology, not actual protection. Plus, BEM is ugly; not a non-starter but definitely annoying.

    Frankly, I'm sick of spending an inordinate amount of time and mental energy compensating for the shortcomings of CSS.

    It's frustrating to know that new specs like WebComponents will transform how we work in a similar way, but to not be able to go "all-in" because WebComponents itself is not quite ready for prime time.

    I'm drawn to this in the same way that I was drawn to Sass initially: Nesting allowed for me to structure my CSS in a way that echo'd my HTML's structure. It abstracted away the problem of naming things. I know that is a terrible idea now, but at the time it was truly liberating and I find it difficult to have only gotten a taste of what that felt like.

    To me, this is an incredibly intriguing option that could be a perfect stop gap solution, and one that gets us thinking in legitimate object-oriented terms.

    5 points