Comparison
Scoped stylesvsUtility-first CSS
Scoped styles
the class in the output is a hashed string, so nothing else on the page can accidentally match it.
Rewriting class names at build time so a component's styles cannot collide with any other component's. It gives you the isolation that naming conventions used to approximate by hand, without giving up plain CSS files. The trade is that the class you see in the browser is not the class you wrote, and styling a child component from a parent now requires an explicit escape hatch.
Full entry →Utility-first CSS
the markup carries a dozen single-purpose classes and there is no stylesheet to open at all.
Composing styles from many small, single-declaration classes in the markup rather than writing semantic rules. It keeps specificity flat and makes deleting a component genuinely delete its styles, which is the failure mode of every growing stylesheet. The costs are verbose markup and the fact that repeated patterns have to be extracted into components rather than classes, which pushes the abstraction into the framework layer.
Full entry →