Are global CSS helper classes a good idea? [closed]

Question

Say I have a color I know I am going to use a lot of in a website.

I could either define the colour lots of times in various CSS class's

.nav-login { color:#green; other CSS content....... }

Or

.green {color:green;}
.nav-login { other CSS content....... }

<div class="nav-login green">stuff</div>

So the concept is, should you use helper CSS classes or should you define everything specific?

Theoretically, you will save bandwidth in the long term by writing more CSS and less HTML, yet I find the method of applying helper CSS classes in the HTML pleasing, almost as if you are writing semantic CSS in a design sense.

Answer 1

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.