Are you finding that sometimes you are writing out the same rules multiple times for classes, id’s or tags?

A very simple tip today, but one that can help dramatically reduce the amount of CSS Styles you create.

This, For Example:


.col_1 { width: 330px; height: 400px; padding: 20px; background: #ccc; }
.col_2 { width: 330px; height: 400px; padding: 20px; background: #666; }
.col_3 { width: 330px; height: 400px; padding: 20px; background: #999; }


Should Be:


.col_1, .col_2, .col_3 { width: 330px; height: 400px; padding: 20px; }
.col 1 { background: #ccc; }
.col 2 { background: #666; }
.col 3 { background: #999; }


Therefore you no longer have to repeat any code that has already been assigned.

Related posts:

1. Quick Tip 6 – CSS Shorthand
2. Quick Tip 7 – CSS !Important
3. Quick Tip 9 – CSS min height
4. Quick Tip 2 – CSS Text Shadow
5. Quick Tip 10 – CSS Vertical Alignment

Posted By: Martyn

Hi, I'm Martyn, the Lead Designer for Web Design GM and really hope you find my existing and upcoming articles useful. Please leave comments below and I will try to respond to any questions as soon as possible.

Visit Authors Website

Tags: Compact, CSS, Style Sheets

This entry was posted on Friday, March 5th, 2010 at 1:42 pm and is filed under Quick Tips, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.