I’m curious to see what others think about single-use css classes (referred to as atomic by some). I’m talking about a class like:
.m-top-50 {
margin-top: 50px !important;
}
Some would consider using classes like that to be as bad as using inline-css, and to some extent I agree. I’d say they’re better than inline-styling simply because they’re faster to write out than the entire style=“margin-top: 50px;”-line. Especially when using something like Emmet.
I would never style a page using only single-use classes, but I think they have their uses. Consider that you might have set the top margin of some .media-box class to be 20px, but in one place where you use it, you notice it lines up much better with the content above when there’s no margin. Instead of digging into the css and having to add classes all around the page to be able to target that specific .media-box, you just add a .m-top-0 class to it and presto!
I used sass (and it’s ability to generate lots of code with loops) to create a helpers.css-file with such classes like the ones above and a lot others, and I find myself importing it into every project nowadays. Sure, it adds a bit to the filesize, and you might not use every class in a project, but it speeds up the development time so much that I think it’s absolutely worth it. Later on, you could strip out unused classes and minify the thing.
Maybe it’s a crutch, but I think that it’s okay to use such classes for special case scenarios. What are your thoughts?
I’ve never heard it called “atomic”, but I’ve seen designers use a similar approach on a project and I’m not a fan. However, I’m not a CSS expert so maybe I’m wrong.
To me, if feels very similar to the challenges you have when maintaining any other kind of code. You can make quick, direct changes, but over the long term you are building up technical debt, since you aren’t refactoring the design as you go.
If you later need to make a change which affects the whole design then you’re probably going to have to make edits in many places.
I agree with @andyw8, there’s a lot of added duplication and whenever you need to make a change you’ll have to replace the class name in N places since you can’t “find and replace all” or change .m-top-50 { margin-top: 40px }.
Where as if you where using a more semantic class name you could easily change the styling for that particular one instead.
Another reason is that it’s easy to add inconsistency to the design, in one place you might use .m-top-40 and in another .m-top-50 when they should have been the same.
The only some what “atomic” classes I’m using are grids.
I think that’s only marginally better than <div style="margin-top: 50px">...</div>. It can be more easily overridden (even then, only if you also !important), but it’s nearly identical duplication and the class is completely non-semantic.
Why is “digging into the css” a problem? I think if you answer that, you’re on a path toward a better solution.
All good points! I don’t exactly see this way of working with css as the one true way. I’d say it depends from project to project what works best, and the most important thing might be to be consistent and do the same thing as any other coders in the team.
Yes this is true if you spam these classes all over. But on the flip-side, if you need to make a single small change to one place, which for me has been by far the most common request from clients, using small classes like this is much easier than having to isolate that part by adding a bunch of more classes in the html and selectors in the css and then adding the change in the css-file. But then again, because it’s easier doesn’t mean it’s more right. It’s just faster.
The problem is only that it’s hard to come up with good, semantic, reusable names for everything and that don’t describe the visual aspect. It usually turns into very abstract things that makes it hard to know what the classes really do.
And with a class like m-children-top-0 I can see directly in the html that that element has had its childrens top margins zeroed through that class. Otherwise I must use the chrome dev tools and scroll through the elements and their styles to see what caused just these elements to have their top margin zeroed.
Single-use classes are hacks, for sure, though, and should probably be avoided when possible. But sometimes, they have their merits when it comes to quickly make a small change in a single place.