CSS Utility Classes and Separation of Concerns

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”

Leave a Reply

Commenting is a privilege, not a right. Be good.

Your email address will not be published. Required fields are marked *