Nick Lewis: The Blog

I've been writing my CSS this way for years, And it totally bugs me when CSS is not in this format. As far as a quick fix for formating a style sheet that is in non-compliance, Topstyle has a great CSS formatting utility. For Mac users all i've found is CSSEdit's re-indent Style Sheet command. It works but it kinda barfs on CSS that is heavily commented or has hacks. There's also online CSSTidy formating tools, pick your poison.

I agree with your suggestions and also that the indent should be two spaces. This makes it consistent with writing things like if statements in php (personally my fingers can't help but to put the brackets this way anyway.) I noticed in a recent version of zen theme that the brackets are on their own lines in the css and nothing is indented and it makes me have to fight some OCD urges to want to change them all to look like what I think is correct.

I disagree about the single line rule. I would go for consistency (every property on its own line), which is better for visual parsing and maintainability.

Another thing that could be recommended is the spacing around the colon. I prefer "foo: bar;" instead of "foo:bar;".

Both of these things are common in the already existing css files from drupal core.

Nick, definitely a space after the colon: please;

I personally like the look of indenting (maybe because it looks more like drupal code). But also queezing everything to the left makes it blend in with the selectors and hence harder to visually parse.

Hi
Good post. For me personally I also prefere to use an indent. I think it makes it more clear of what is selector and what is property.

I don't think a strict CSS coding standard for Drupal is as important as that in the PHP.

I say this mostly because I have a highly unusual style of writing CSS.

Here is a snippet:

#header-region {
    font-size:12px;
    background:url(core/header.gif) 50% 0px no-repeat;}

    #header-region a {
        color:#999;
        padding:4px;}

        #header-region a.active {
            font-weight:bold;
            color:#164;}

        #header-region a:hover,
        #header-region a.active:hover {
            color:#fff;
            background:#7a8;}

    #header-region .limiter {
        position:relative;
        height:60px;
        background:url(core/header.gif) 50% 0px no-repeat;}

While I would have no problem switching to putting the closing bracket of rules on their own lines, I have serious misgivings about non-indented CSS structure.

It is to me as troublesome as failing to indent if, foreach and other such structures in PHP. My main reason for following cascading / structured formatting of CSS is it documents and implicitly represents how the language actually behaves -- if you apply a rule to a parent element like #header-region, it will cascade to its children. This makes tracking redundant rules, rule overrides, and the such much simpler and straightforward, even without the help of DOM inspectors like Firebug.

I of course understand that I am one of 2 people I have ever met who approach CSS this way. So I don't suggest that this be a standard. I just hope a conflicting standard doesn't get imposed on me : )

I don't find multi-line selectors any harder to parse, so long as they make sense in the first place. I code with the openig brace on the top line, because that is how I learned and it is how I code functions. I don't see any need or benefit in puttijng the opening brace on its own line.

I am not doing this out of a mania for compactness. To the contrary, my style.css files tend to be complex, so I like to separate color, typography and position into their ow3n sections, so there are often multiple selector calls. I have been doing elastic themes, and I find that this is a big help when the client wants type resized relative to the containers.

That's pretty much my coding style too, although I add some spaces in single line rules, not this:
a {text-decoration:none;}
but this:
a { text-decoration: none; }
I think the latter increases readability.
I also add a space after the colon separating the property from it's value. Again, I think that increases readability.

Now that we have the CSS parser/compressor in Drupal I've become a big fan of adding plenty of comments too, big multiline ones if necessary. Often one comes back to a theme after many months, or is handing it off to someone else. Well commented CSS is just as good a thing as commented PHP - it was a pain when it was all sent to every browser.

The software I currently use for CSS* also has 'groups' where a comment is used to group styles together, like so:

It's useful for grouping styles together, and has the added bonus of allowing quick navigation in my editor. Not sure how useful that is in general, but something to consider.

@Jeff
Putting all your colour rules in one place is not something that should be part of Drupal's CSS code style suggestions.

@Kevin Montgomery
The properties are indented from the selector anyway, I don't think it increases readability to put the opening bracket on a new line. Instead it just means more scrolling ;)

* MacRabbit's CSSEdit2

Yes, I agree that indentation is also important. But I don't whether to use spaces or tabulator. I prefer tabulator. I would also put a space between values and properties.

Dont you mention about indent?

I know you're having trouble with indentation, but it's worth spelling out. One tab = two spaces, as per PHP. I'd add a space after the colon.
Also, comment blocks may as well keep to the Drupal convention for PHP.