What I mean by this is STOP every single type of abstraction/library/programming layer for CSS - nothing gets it right, everything causes a problem.

The ONLY way to deal with CSS is program it directly in the way the docs say, never anything else.

There's nothing wrong with using Bootstrap or whatever, and I definitely use JavaScript to program CSS. What I am saying is - no abstractions - no "better way" - no trying to turn CSS into something it isn't via whatever your new abstraction is that can be added to the N other abstractions that other people have made over the years.

Program the damn machine.

Some topics I'm curious what people think about:

- What’s the one thing this doesn’t cover that you’d expect it to?

- Does the syntax feel natural to you, or did you find yourself confused by anything?

- I'm looking for edge cases: what kind of complex selector scenario would trip this compiler up or be impossible to express with this model?

AMA—happy to answer any questions about the tool, the implementation, or the design choices.

  .btn {
    &:enabled:hover {
      background: dodgerblue;
    }
    &:disabled {
      background: gray;
    }
  }

Unfortunately I can’t give it more attention now, because I should have gone to sleep a couple of hours ago…

—⁂—

Another approach entirely is to embrace last-declaration-wins, by :where()ing everything:

  :where(.t0)           { background: var(--primary-color); }
  :where(.t0:hover)     { background: var(--primary-hover-color); }
  :where(.t0:active)    { background: var(--primary-pressed-color); }
  :where(.t0[disabled]) { background: var(--surface-color); }

These days if starting a greenfield web app, each page has its own style/css sent in the head tag.

Because it’s usually just base layout + page specific styles/overrides then it barely adds any overhead in the scheme of things(couple of extra KB).

Maybe the base layout could be moved into a static file to be cached but whatever, it’s already ridiculously quick to render plain html/css.

.thing

.thing-container .thing

html body .thing-container .thing.thing.thing.thing