Quick Tip 5 – Compact CSS
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:
- Quick Tip 6 – CSS Shorthand
- Quick Tip 7 – CSS !Important
- Quick Tip 9 – CSS min height
- Quick Tip 2 – CSS Text Shadow
- 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.
