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:
“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.“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”