Quick Tip: Save Time by Using Multiple Classes

One of the most exhausting aspects of web development is writing out endless amounts of CSS styling for various elements – that differ only slightly in style from one another. It has taken the life (or will) of many a talented designer. Well, why give each element its own unique CSS entry, when you can mix match and add re-usable CSS styling to elements using multiple CSS classes?

Step 1: Set Up The CSS

Lets start with identifying and writing out some of our most common CSS markup. We’ll set them up as individual styles. The ones that we’ve set up here are the most basic, but the same technique can be applied to even the coolest CSS 3 properties.

.primaryColor {
color: blue;
}

.articleImage {
border: 1px solid #292929;
padding: 5px;
}

.standOut {
font-size: 22px;
}

.important {
font-weight: bold;
}

.floatRight {
float: right;
}

Step 2: Applying The Classes In Our Document

• <p class=”primaryColor important”>This text will be blue and bold</p>
• <img src=”#” class=”articleImage floatRight”>This image will be floated to the right, and will have some padding and a border.</p>
• <p class=”standOut”>This text will be huge</p>
• <p class=”primaryColor standOut important”>This text will be blue, 22px large, and bold. </p>

Why It’s Useful

This can be a massive help, especially when designing layouts… you can use one class to define the size and width, and another class to define the positioning. Hope this helped!

Editor’s Note: Keep in mind that, in some of the older browsers – meaning older than IE 6 – this “multiple classes” method will fail. What are your thoughts on this approach? P.S. Have a killer quick tip? Email us and we’ll talk.