[latronic_notron]

In recent projects I tried 3 new approaches: React's CSS-in-JS, Vue's Scoped CSS and Tachyons/Tailwind Atomic CSS.

All of those solutions were a huge improvement and scaled better than any of the previous pure-CSS techniques I was using before.

BUT the key here is that those things only work when you rely on React/Vue/etc components. If you have have to rely on copy/pasting markup, things go wrong FAST and you lose track of your app style and things get duplicated. You also to have to enforce SMALL components. If you duplicate markup between components things get hard (but not as nasty as if you weren't using components).

I honestly believe that people not using modern frameworks can't see the advantages of any of those techniques, and would urge everyone to try them out in component-based project.

[deltron3030]

Those techniques work well for design systems. CSS in JS on its own, and Vue's Scoped CSS are a different thing than Tachyons, Tailwind or Styled System. Styled System is for CSS in JS what Tachyons is for CSS, you're using a design system, either the default values that are already present, or your own customizations.

This basically frees you from making style decisions while coding, depending on your design system, things will just work well together as you create your components, with spacing, colors etc. all being already figured out.

This means that you don't "translate" pixel perfect designs, you use design tools like Sketch or Figma to find the rules and scales that you then translate into the style sheet/design system.

Instead of doing the "configuration" in your CSS when you're coding, you basically have an intermediate step where you set up those rules in advance, and can just focus on composition.

[latronic_notron]

> Those techniques work well for design systems.

That's true! I find that enforcing a consistent and quickly-changing design system is way easier than when I was using old techniques.

> Instead of doing the "configuration" in your CSS when you're coding, you basically have an intermediate step where you set up those rules in advance, and can just focus on composition itself.

You summed it up perfectly