CSS Utility Classes and Separation of Concerns


Note: Content might be outdated!

Adam Wathan writes about how Separation of concerns can be a “straw man” when it comes to choosing an approach for naming CSS utility classes.
I found this to be genuinely plausible.

There are two ways you can write HTML and CSS:

  1. “Separation of Concerns” CSS that depends on HTML.Naming your classes based on your content (like .author-bio) treats your HTML as a dependency of your CSS. […]In this model, your HTML is restyleable, but your CSS is not reusable.
  2. “Mixing Concerns” HTML that depends on CSS.Naming your classes in a content-agnostic way after the repeating patterns in your UI (like .media-card) treats your CSS as a dependency of your HTML. […]In this model, your CSS is reusable, but your HTML is not restyleable.

[…] Neither is inherently “wrong”; it’s just a decision made based on what’s more important to you in a specific context.

Adam Wathan, CSS Utility Classes and “Separation of Concerns”