CSS is “teh awesome”. Being able to control the look and feel of an entire website with one file while simultaneously keeping your markup clean and creating a separation between presentation and code is a wonderful thing. But sometimes, especially for beginners, CSS itself isn’t necessarily used or written in the most efficient way. There’s a powerful feature in CSS that I don’t see a lot of people using or talking about and I thought I’d share it since it’s been useful to me in several projects.

Most people know about grouping: you can write your CSS classes with multiple selectors if they will share the same attributes.

Grouping can be useful and help keep your CSS from getting bulky with duplicate classes, but there’s an opposite approach that can also reduce duplication of code while providing some other benefits.

I don’t know if there’s an actual name for this practice but I call it “aggregation”. You may create CSS classes for specific attributes and apply them simultaneously to your HTML elements. The styles will aggregate and all of them will then display on the element:

You can apply the classes to HTML elements by separating them with spaces in the class attribute.

The above code will result in something like this:

Why is this useful? Because you can separate things like changing the colors of an element from it’s layout information and only apply the styles to the element as needed.

Say you have a stylesheet that you want to keep all the layout information the same (margins, paddings, font sizes, positions, etc..), but just change the colors of your backgrounds and fonts. If the only place you declare your color attributes is in your special classes you only have to change the colors there instead of hunting down and changing every class you used “color: #a508fd;”.

Creating special classes to aggregate can also make your HTML more readable for yourself or whomever may come along after you to maintain your site (well, depending on how you name your special classes!). You don’t necessarily know from just looking at the HTML what the class “myspecialheader” will cause your element to look like but you have a good idea how an element with the class “bigfont bluefont padleft” will display.

Another benefit is that you can apply styles in special situations without necessarily having to create a class just for that exception. For instance if you have a table that is styled with a padding of 5px on all TD elements but you need the first column to have extra padding on the left, you don’t have to declare a special class just for that one situation if you’ve already got a “padleft” class in your CSS. Apply it only to that first TD and you’re set.

The one caveat to styling with aggregation is that you have to be careful that you really segregate the attributes you will be putting in your special classes. If you use two classes with the same attribute there will be conflicts (such as using two classes that both have “color” defined).

But these conflicts can be overcome by paying attention to the scope of your classes.

Setting up your CSS for aggregation does require a bit of planning, but if done correctly it can make your CSS efficient and both your CSS and HTML easier to maintain in the long run. It’s an approach worth trying if you haven’t before. I hope you might find it as useful as I have.