css-optimizer.md

CSS is hard to maintain because:

• It's hard to know what CSS changes will affect the DOM and how. The Append-Only Stylesheet Problem
• If you change the HTML structure you have to change your CSS selectors and viceversa.

Current solutions:

Scoped CSS. It generates bloated CSS files and DOM structures

https://twitter.com/themikepan/status/1093035372186034176?s=20

https://twitter.com/sindresorhus/status/1089075390327316480?s=20

Solution: no selectors, just small CSS classes and a CSS optimizer that is aware of the DOM

Imagine you had a "flat" set of CSS classes, like https://tachyons.io/ or just inlined styles or both. Example:

<style>
.br-1 {
  /* br-1 styles here */
}
</style>

<div class="component-name">
  <div class="br-1">foo</div>
  <div class="br-1">foo</div>
  <div class="br-1">foo</div>
  <div class="br-1">foo</div>
</div>

It would translate it to

<style>
.component-name div {
  /* br-1 styles here */
}
</style>

<div class="component-name">
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
</div>

This tool would create the optimal CSS + HTML combination. It would be super simple to maintain. Keeping track of unsused CSS would be trivial. In fact the compiler could tell you at compile time.

Of course this is a trivial example. Now imagine more complex styles, nested, etc. and a tool capable of calculating the best output for the CSS and HTML style/class attributes. Even aware of React/Angular/Vue components.