Have you ever set a class for your css that uses it multiple times?

Question

I always was told to take out multiple properties in your css that you use more then once, and add them all in one rule. Like below. (please excuse the poor example)

I always seen this:

.button, .list, .items { color: #444; }

With multiple rules, can't that leave a lot of clutter?

Only in css tutorials and examples Ive seen this:

.someColor { color: #444; }

And in the css, just add another class of '.sameColor'. (div class="button someColor")

I've never seen this and feels like it would leave less clutter in your CSS. Would this be okay? Or do you think it could leave with more clutter in your HTML ?

Answer 1

It's all based on personal preference. I've tried both methods and prefer the second method you listed, except with more generic class names such as middleParagraph or headerGraphic so it applies to an area rather than a specific color because colors can change.

Answer 2

Try to name your classes independently of their visual effect. It is a nature of CSS to play with the design and layout without having to change the HTML. Class names such as .someColor or .left-sidebar are a bad practice. Colors and position can change. And also apply rules to semantic HTML elements rather than adding classes on all different divs and spans. It should be obvious, although many people get this wrong.

CSS is a limited set of rules and that makes it a perfect creativity stimulator.

Answer 3

What you're suggesting is a bit like an in-line style, e.g. style="color:#444". So if you want to change the color of your element you'd have to make a change to the html, which means you've defined style as part of your content. Which is exactly what css is supposed to avoid.

Imagine if you'd included 'someColor,' multiple times across multiple html files and you decide some of these elements shouldn't have 'someColor,' after all, you've got a lot of files to go through.

I'd probably avoid the list option too, if I'm making a component, say a button, I want to find .mybutton class in my css file and see all the rules for that component, without having to go through all sorts of unhelpful global classes. Also if someone comes along and changes the color in our global class he may break my button, where as if the button controlled it's own styles it can't be broken in this way.

Answer 4

Good classnames and IDs are the first place you should optimize. THEN move onto multiple class names.

Multiple classnames can help out quite a bit though, consider:

<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
    <div class="rightColumn">Right</div>
    <div class="middleColumn hasRignt">I have padding right of 210px</div>
       <!-- or -->
    <div class="leftColumn">Left</div>
    <div class="middleColumn hasLeft">I have padding left of 210px</div>
       <!-- or -->
    <div class="middleColumn">I have no padding</div>

and your css

.leftColumn { width:200px; float:left; }
.rightColumn { width:200px; float:right; }
.middleColumn.hasLeft { padding-left:210px; }
.middleColumn.hasRight { padding-right:210px; }

The result is floated right/left columns and the center area compensates for them with padding. This means you can style your middleColumn how you want to (e.g. .middleColumn .otherCoolSelector ).

Answer 5

It's perfectly acceptable to apply multiple classes to HTML elements. The trick is to be judicious; I usually find that when I do this, the additional classes are additions or exceptions to the basic styling being applied. For example, here are some classes I occasionally add to an element that already has a class:

• error -- to style the current element if the user entered invalid data
• first -- to style the first element in a list or in a table row, e.g. to suppress padding-left
• last -- to style the final element in a list or in a table row, e.g. to suppress margin-right
• even -- to apply zebra-striping to alternate elements
• hidden -- to hide an element if it's not currently relevant

These extra classes are typically generated dynamically with a server-side language like ASP.NET or PHP. They can also be added or removed on the client side with JavaScript, esp. with a library like jQuery. This is especially useful to show or hide elements in response to an event.

Answer 6

There are a lot of good answers here. The trick is finding out which one fits your situation best.

One thing to consider is your markup size. In a high-traffic situation, your markup size is critical to the speed of your page loads...every byte counts. If this is the case for you, then you may want to create more CSS classes and put less in your markup. That way, the client is caching more and your website is serving up less.