Right now I am compressing some CSS into a slimmer package. This is only one of a few steps, but this little bit of planning and thought will save a lot of time in the end. Especially when your CSS file is 2000+ lines and already formatted in line to decrease line count.
The original:
#iz_catnav {
background: url(/add/images/left_nav_rpt.png) repeat;
width:185px;
padding:4px 0px 4px 0px;
overflow:hidden;
}
#catNavCap {
height:30px;
width:185px;
background: url(/add/images/left_nav_cap.png) no-repeat;
margin:0px;
padding:0px;
}
#catNavBase {
height:30px;
width:185px;
background: url(/add/images/left_nav_base.png) no-repeat;
}
compacted:
#iz_catnav, #catNavCap, #catNavBase {
background: url(/add/images/left_nav_rpt.png) repeat;
width:185px;
padding:4px 0px;
}
#catNavCap, #catNavBase {
height:30px;
margin:0px;
padding:0px;
}
#catNavCap, #catNavBase {
background: url(/add/images/left_nav_cap.png) no-repeat;
}
#catNavBase {
background: url(/add/images/left_nav_base.png) no-repeat;
}
So, minor gain, a 2 line reduction. From 18 lines to 16 lines. Just over 10% reduction. Think about that on the scale of thousands of lines of CSS. Then compound that with “smart” design and setting up better patterns in your CSS including Object-Orientated CSS where standard attributes are wrapped up in a well defined document.
How many times are you Floating? What if there was compressed style sheet with all your common needs defined in classes. Nice huh? That is the idea behind OO-CSS – more reusable objects (classes).