Un-bloat CSS by using multiple classes

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Let’s say you need six different 100px square boxes with different characteristics:

  • Red with Border
  • Blue with Border
  • Green with Border
  • Red without Border
  • Blue without Border
  • Green without Border

coloredboxes.png

You COULD create a unique class for each of these, like so:

.redwithborder {
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
	background-color: red;
	border: 3px solid black;
}
.bluewithborder {
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
	background-color: blue;
	border: 3px solid black;
}
...etc

BUT that’s called CSS Bloat because it includes a bunch of unnecessary repetitive code. Instead, create just five classes with simple, identifiable names that each handle something very specific:

.box {
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
}
.red {
	background-color: red;
}
.blue {
	background-color: blue;
}
.green {
	background-color: green;
}
.border {
	border: 3px solid black;
}

In your HTML, things look just as clean, just put a space between each of the classes you wish to apply to the div:

	<div class="red border box">
	</div>
	
	<div class="blue border box">
	</div>
	
	<div class="green border box">
	</div>
	
	<div class="red box">
	</div>
	
	<div class="blue box">
	</div>
	
	<div class="green box">
	</div>

This method allows better future flexibility as well. If you wanted to create an orange box, or even a box with a background-image or some completely separate characteristic, you could. And then adding a border to that new box is simple adding a space and the “border” class name.

[EXAMPLE PAGE]