Single Line CSS
If you are always having a difficult time scanning through lines upon lines of CSS code trying to locate the correct selector, try out this idea by Steve Smith: Single Line CSS.
Compare this:
#wrapper {
width:800px;
margin:0 auto;
}
#header {
height:100px;
position:relative;
}
#feature .post {
width:490px;
float:left;
}
#feature .link {
width:195px;
display:inline;
margin:0 10px 0 0;
float:right;
}
#footer {
clear:both;
font-size:93%;
float:none;
}
To this:
#wrapper {width:800px; margin:0 auto;}
#header {height:100px; position:relative;}
#feature .post {width:490px; float:left;}
#feature .link {width:195px; display:inline; margin:0 10px 0 0; float:right;}
#footer {clear:both; font-size:93%; float:none;}
Of course, there’s always the option of using an IDE to edit your CSS files and get to style your markup as much as you want.
August 8th, 2007 at 5:05 pm
I use the multi-line method when in the middle of development but once the site is finished I almost always remove whitespace to cut the file-size down.