Is there a way to contain CSS class names from conflicting? - html

Question

When using a class structure for a something like a button is there a way to specify which classes should be grouped together?
For example if I have the following:
<style>
.button {
height: 32px;
width: 16px;
}
.blue.bg {
background: blue;
}
.white.bg {
background: white;
}
.blue.text {
color: blue;
}
.white.text {
color: white;
}
</style>
<a class="blue bg white text button">Click me</a>
In this example the colors blue and white don't know if they are attached to the text or the background. This means sometimes the button will render as a blue button with blue text, a blue button with white text, a white button with blue text, or a white button with white text.
I'm wonder if there is a way to specify which classes are grouped together, like:
class="'blue bg' 'white text'"
or
class="(blue bg) (white text)"
or
class="blue bg" class="white text"
or
class="blue bg, white text"
etc...
YES, I know you can make the class names more specific (like bg-blue, text-white) but my entire CSS framework is focused around semantic naming of classes.c

Answer 1

You can group classes together on an element just as you have done on the a tag. However, you can't take that group and sub-group it again.
Also, your class names are not semantic; using names such as "blue" or "white" are too specific. What if one day, you decide you'd like all those "blue" buttons to now be red? You could just change the color value on your "blue" class in your CSS, but then you'd end up with a class named "blue" that applies red text. You see what I'm getting at?
Also, why not make one class that contains a grouping of text and background styles for every combination you want instead of trying to sub-group them on the element?
Here is an article that explains semantic markup well:
http://css-tricks.com/semantic-class-names/

Answer 2

As I described in my comment above, what you are doing is NOT semantic markup. Semantic markup focuses on functionality, not the display. So having
<div class="modal">
<h1 class="hd">My Modal</h1>
<p class="body">Hello there! Welcome to this site</p>
</div>
would be semantic, because each element and class describe what the content does. In the case above, we are describing a modal that contains a header and some main (body) text. Now you can add CSS to those classes as you desire:
.modal {
position: absolute;
top: 100px;
left: 100px;
background: #ccc;
}
.modal h1 {
font-size: 15px;
color: green;
}
Now, let's say you want to change the background of all your modals to green, you just have to change that description in one place. Also, since you didn't describe the background color in the class name, you will never get into the situation where you have a class name is in contrast with the actual CSS (like it could happen after a site redesign).
More importantly, if you describe what the functionality is, rather than the look, you can have different designs with the same markup. Take responsive design for example. Let's say you want a gray background for the modal on all devices above 600px width and a blue background for all other screens, you can easily overwrite the background in the media query.
What you are trying to do is called Atomic CSS. While there are pros and cons to that approach, you would never go as far as you described above. It doesn't really make any sense. What would a bg class do without a color class? What does a white class do without a class that describes what is white. If you want to always group them together, then why not do .bg-blue and .text-white? You are already doing it in your example anyway, just with "dots" instead of "dashes".
So to answer your question: No, you can't group class names together. You need to make specific unique class names for every combination.