Jul 21

Single Line CSS

Light BulbI came across an interesting article on orderedlist.com relating to single line CSS and how using this technique could aid in organising your stylesheets and make finding selectors easier, especially in large CSS files. I know from bitter experience how hard it can be to locate that offending css selector.

The compression benefits alone makes this technique worth considering but I am particularily intersted in how it could help make my CSS easier to work with.



It is quite interesting that a CSS editor I use regularily, Adobe GoLive (now discontinued in favor of Dreamweaver) formats CSS on to single lines and has done so for as long as I can remember. Ok perhaps having selectors on single lines isn’t to everyones taste but, as mentioned I can certainly appreciate Steve Smith’s opinion.

Traditional CSS Formating

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

html, body {
 
	width:100%;
 
	margin:0;
 
	padding:0;
 
}
 
body {
 
	background:#eee3ca url(/images/body-bg.gif) repeat-x 0 0;	
 
}
 
#main-container {
 
	margin: 0 auto;
 
	width:860px;
 
	background:url(/images/main-container-bg.gif) repeat-y;
 
	overflow:hidden;
 
	padding:162px 5px 0;
 
	position:relative;
 
}

Single Line Variation

1
2
3
4
5

html, body	{ width:100%; margin:0; padding:0; }
 
body		{ background:#eee3ca url(/images/body-bg.gif) repeat-x 0 0; }
 
#main-container	{ margin: 0 auto; width:860px; background:url(/images/main-container-bg.gif) repeat-y; overflow:hidden; padding:162px 5px 0; position:relative;}

This technique certainly flies in the face of convention but It could be worth experimenting with especially for large beasty CSS files which we all know are a pain to find anything in sometimes!

Share This

Posted in: CSS Techniques | | July 2007

One Response to “Single Line CSS”

  1. Carey Says:
    July 26th, 2007 at 5:09 pm

    Good tip, I am torn between the scannability of the single line formatting but the readibility of the original elements.

    When I am coding and have a series of functions or classes I can expand and contract them. This means that I can effectively hide all the code and just show function names.

    If a css editor applied this principle, you could opt to view a list of the elements and then expand on the one you want to edit… solving both problems!

Leave a Reply