LJ 0

I've tried both multi-line and single-line. I feel like I want use both sometimes, when theres a shorter code, I want to use single-line and larger I want to use multli-line.

Coders, ever used both when your coding CSS?

6 answers


I develop with multi-line and lots of comments. Then I optimise for production.

I use textmate and there's a very handy bundle that makes switching between multiline and single line, (compressed too) very easy.

Answered about 7 years ago by Tony Crockford
  • That's probably the best approach. Doug about 7 years ago
  • I agree with that, it makes it much easier to develop and re-factor at a later time. TEXTMATE ALL THE WAY! Matenia Rossides about 7 years ago
Doug 1095

I use both all the time. Single line saves space for short statements, but multi-line is more readable for the longer, more complicated rules.

Answered about 7 years ago by Doug
danwellman 5600

I always use single lines. YSlow gives a higher performance rating when all rules are on single lines. This is a trade-off on full minification, which gives even better performance. But minified stylesheet are much harder to maintain than fully un-minified code so single-line code is the middle-ground...

Answered about 7 years ago by danwellman

It depends on what's more important to you.

If you have a a large site with a ton of selectors, typically you key in on the selector first, then make your changes. In those cases, single-line CSS is very useful. If you tab/indent your selectors just like the HTML, you can get a pseudo site structure just by looking at the CSS. The disadvantage of single-line CSS is being slightly less readable. It can be tricky to effectively integrate comments as well.

Multiline makes things very readable at the expense of a larger stylesheet. It tends to be easier to integrate useful comments inline with certain rules, etc. Some rules are better suited to being multiline, IMO.

Just my two cents.

Answered about 7 years ago by Nate Kennedy

I tend to use multi-line - it has the advantage of greater readability - IMO - and keeping below the magic 80 chars per line limit. Single-line, however, has the huge advantage that it's very grep-friendly, i.e.

grep "margin" style.css

will instantly give you all selectors that affect margins and

grep "#footer" style.css

will give you all styles applied to the footer element. Of course, with additions to the pipeline, you can get much more advanced - i.e. get a unique ordered list of all class names that have a black border. Whilst this is all possible with a multi-line file, the scripts get much more complicated.

I've recently been experimenting with this format:

ul      { border: 1px solid black; }
    li  { line-height: 2; }

which I like because it emphasises and documents the markup hierarchy (much more useful when you're dealing with IDs/classes) but still keeps everything relatively compact. The only problem is the 80-char line limit, which I'm on the verge of quitting altogether, and just relying on line-wrap. If only my text editor offered a really powerful line-wrap (e.g. indent wrapped lines past the "{" column) I would definitely use this format.

Alternatively, a minifier that generated this kind of layout would be very handy.

Answered about 7 years ago by Bobby Jack

Using a CSS generator like SASS (SCSS), and Compass, make this a real non-issue for me. What I type in is what is easiest for me to deal with, what gets 'compiled' is what is best for the end user. I can leave it uncompressed for easier parsing for development, and then switch it over to compressed once I'm ready to go live.

To actually answer your question, though, I prefer to be more verbose. Being more verbose lets me spot mistakes and really think about each property I'm applying. Shortcut properties make nice clean code, but I find I have to look up the order sometimes. Breaking my workflow.

Answered about 7 years ago by Nathan DeGruchy