Semantic vs Content-Independent CSS

Say you have a search form in the top right corner of your website, that looks something like the picture below. What should be the class name of a component?

If you use semantic classes, you could name it something like “search” or even “header-search”, because it is how it’s used. If you use content-independent classes, you might call it “tiny-form”, because that’s what it is.

Now, say you’re about to create a feature that allows users to input their phone number, and be sent a one-time verification code. You could absolutely reuse that style, but the chances you would give that component the class “header-search”, or even consider reusing the style is much smaller than if it was called “tiny-form”.

CSS classnames are not used for semantics by crawlers, users or accessibility software. They are only used by developer trying to understand/change frontend code. Frontend developers do not need css class names to comprehend the semantic of an element. This is already accomplished by other means: HTML tag names or the name of the class/component that renders this html. CSS classes are for developers, and we use classes for attaching js-interactivity or styling purposes.

These are all content independent class names, i.e. describe what they are, rather than the how they’re used. I hear you say “Well, of course they are. Bootstrap is suppose to be used across any web application, independent of what sort of content it contains. Semantic names never works without knowing what you’re building”. Valid point, but you must admit this type of naming enables reusability, consistency and readability! And isn’t really our own little Mini-Bootstrap exactly what we want from our css? That can be reused in new components and projects with totally new concepts? I think it is!