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.