Single-Line vs. Multi-Line CSS: A Tool to End the Debate
Quicklink: Open up the css style converter here.
An interesting divide exists among web designers, one that is rarely commented on. When coding CSS, do you put your properties on a single line or across multiple lines? If you don't know what the difference is, here is a quick example:
Multi-Line
#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;
}
Single Line
#wrapper {width:800px; margin:0 auto;}
#header {height:100px; position:relative;}
#feature .post {width:490px; float:left;}
#feature .link {width:195px; display:inline; float:right;}
The benefits to selecting one over the other may not be immediately obvious. Generally when writing code of any kind, it is best to optimize your code for readability as opposed to writing speed. This makes your code more understandable to others (and yourself) when reviewed. CSS is no different.
Which method is more readable?
The answer is that it depends. When using the more popular multi-line format, it is much easier to find individual properties. This is especially true when you stick to a declaration ordering convention. Using the single-line format, it is much easier to find selectors as your file is much more vertically compact. I prefer the single-line format as I can return to a stylesheet in the future and quickly figure out where to make changes. You can look at the selectors quickly to understand the structure of your document.
Obviously there are a number of varying opinions on the subject. Here is a list of links to people arguing for one format or another:
|
|
If you and your collaborators can't decide on a common style, I've got a tool to make your life a lot easier. It parses and converts css files between the two formats. It isn't a CSS Compressor, instead it is designed to make your life easier if you write css. Try it out and let me know if you think it needs any tweaks in the comments.
Open up the css style converter.
Related Posts
Comments
alex
oops, a little guesswork, and I'm getting your zip now via this address:http://files.www.newmediacampaigns.com/posts/css-formatting/clean.zip
alex
Hi joel,really interestedd to stumble upon this post. However, its possible your site is a little out of date? You seem to be missing the rest of the cssTidy libraries now....I tried using your clean.php script with the current cssTidy repo, but the output is a mess. Any chance you can repair the link to your project zip, 'twould be greatly appreciated!
Joel Sutherland NMC team member
Ivan -- that is a great thing to do.
The purpose of this tool is to organize the code as a development preference prior to doing that.
Ivan
Before putting CSS into production, I run it through an optimizer, which groups properties, and then through my own CSS flattener which formats the CSS in one line: http://imsky.org/app/cssflattener
Great to see other tools like this exist.
steve
I do like single line css for somethings, through do find if you get a lot of elements set at once, prefer multiple lines
Mark
@Joel
RE: "If you get textmate to do this be sure to let me know. That would be AWESOME."
You're post gives TextMate the macro to convert between single-line and multi-line CSS.
http://superfluousbanter.org/archives/2008/08/regex-patterns-for-single-line-css/
imaginary adam
I prefer multi line for editing and a mixture of memcache and minify for the rendered site content. Get the best of both worlds at all times. On the fly minification is always best. Cleanup is intended for performance gain, minification is intended for ultimate condensed performance.
Now what would be really handy is a script that does on the fly minification as well as reduction, removing css that is simply not used in a rendered page/content layout.
Nathan
I got something that seems to be working. It is a custom command for textmate that requires csstidy to be installed on your mac and a csstidy template (based on your template2).
This is what I used to install csstidy: http://thingsilearned.com/2009/01/02/installing-csstidy-and-scons-on-os-x-or-linux/
(Note: I'm on snow leopard and when installing scons i did not use the --standard-lib flag and that is the only way i got it to work)
E-Mail me and I'll give you what I have done so far. You're welcome to post it on your site from there.
Joel Sutherland NMC team member
Nathan,
You can download a zip of the project here:
http://www.newmediacampaigns.com/files/posts/css-formatting/clean.zip
If you get textmate to do this be sure to let me know. That would be AWESOME.
Nathan
Your Cleanup CSS script is the only one I have found so far that indents the opening { correctly. Nice job.
Would you mind sharing your code? I'm trying to get textmate to be able to do this with a macro.
The one tweak I'd like to see is adding a newline after commas.
Potherca
Nice write-up! I'll take a look at the (what looks like a very usefull) tool later... *bookmark* :-)
Antonio Wells
Thanks for the tool. Great for conforming between the two CSS writing methods.
Zachary Danger
Multi-line wins hands down if you use any sort of source control and need to diff between revisions. Using the single line method makes it nearly impossible.
Leave a comment