Are global CSS helper classes a good idea? [closed]
I personally don't think it's a good idea to name classes based on their properties, like .green
for a green-colored text. Instead, use a qualifier, say .approved
for green text, and .warning
for warnings, alerts and etc.
In my humble opinion, the selectors (classes, IDs) should reflect the role/purpose of the element, and not their appearance. Say for example, if you want to redesign your site and adopt a new colour scheme, and your navigation menu changes from green to blue - then, the .green
selector will have very little meaning, and will be hard to understand to whoever is taking over the project in the future, if any.
Moreover, there is no reason to assign a .green
class to the navigation login <div>
, if you can already specify it using .nav-login
.
Chris Coyier has compiled a rather comprehensive CSS style guide - it's not the golden rule, but it's good to follow.
Have a look at OOCSS (and Smashing Mag introduction to it)) if you didn't already have. Also to BEM from Yandex - again Smashing Mag intro to it.
I'd have laughed at the idea of not strictly separating content (HTML) from style (CSS) a few years ago, I scratched my head when Nicole "stubbornella" Sullivan gave a talk about it in a conference I attended but now that I'm working on projects made of dozens of pages to where we have to go from PSD to HTML/CSS for a client inside a team of a few people, my requirements have drastically changed! Working alone on CSS that nobody else will modify or in a team on a single project in a startup or in a team for a client that'll reuse the CSS you create aren't the same at all.
Learn about OOCSS and what it can do for you, give it a try and don't use it in your projects if it isn't suitable. Or do.
Using CSS preprocessors or not is quite irrelevant here: if you use them to output 1 kilometer long selectors, you're using them wrong obviously. They're just a way to write CSS faster and with less pain (not having to bother to learn which prefix are needed for each CSS3 property thanks to macros is great, but they should still output more or less the same CSS than before). The point is to write efficient CSS, with or without a preprocessor. Same with ZenCoding/Emmet: you know you need it when you're fed up with writing the same repeated lines/instructions day after day. But they'll output these same lines of CSS, nothing magical here.
Actually, it is a good idea. I use them too, but I do not name them the way you said. teddyrised' example is good.
Just my example, when I make a simple project that does not need a huge page structure and minimal CSS, I name them like this:
.push-right {
float: right;
}
push-left {
float: left;
}
.no-float {
float: none;
}
.centered {
margin: 0 auto;
}
.success {
color: green;
}
.error {
color: red;
}
.warning {
color: orange;
}
.info {
color: blue;
}
So actually it is okay to use them. Just watch out for naming them :)