I completely agree with what you’re saying here Matt.

Your approach is what others call Atomic or Functional CSS — taking the single responsibility literally, where each class does one thing and one thing only.

I’m not sold on it personally. I use a handful of similar utility classes to alter elements that are completely unique and/or don’t fit in with any other components, but I try to limit my use of them.

My reluctance to Atomic/Functional CSS is that I think it’s much harder to create consistently styled components, because a developer could in theory use any combination of classes. I believe that Atomic CSS goes further in that it only creates the classes based off what is in your HTML — which opens it very wide to inconsistency abuse.

And, as for one of my last points in my article, components styled through a mixture of “random” classes only will be very hard for users to override with a custom, user stylesheet. That’s a big accessibility issue in my opinion.

But, as I haven’t taken the time to fully evaluate or use it in a real-world project, I don’t feel that qualified to provide an opinion.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.