Pros and cons of CSS formatting

Question

Pros and cons of CSS formatting

I know four kinds of CSS formatting. Which do you think are better?

A) classic

.class1 {
}
.class1 .class2 {
}
.class1 .class2 .class3 {
}
.classFoo {
}

B) classic idented

.class1 {
}
    .class1 .class2 {
    }
        .class1 .class2 .class3 {
        }
.classFoo {
}

C) same line

.class1 {}
.class1 .class2 {}
.class1 .class2 .class3 {}
.classFoo {}

D) same line idented

.class1 {}
    .class1 .class2 {}
        .class1 .class2 .class3 {}
.classFoo {}

Answer 1

For a huge stylesheet, B since it's easier to navigate because of all the tabbing. ( Using something like SASS reinforces this ).

For a very minimal one, A.

C and D I wouldn't recommend because it's harder to read/manipulate the properties and values. I think the only case for this would be if you were rushing to fix something and didn't care about indenting, otherwise I don't see a benefit.

Of course for production you can opt with a minimized version, so my opinions reflect the one being edited.

Answer 2

I honestly don't think it makes a difference what style you use, so long as you use it consistently and it was agreed with anyone else who is likely to work with you on the same projects and according to any specific documentation requirements imposed by your work-place/office.

Having said that, my preference is for style A, with groups organised roughly by descent:

.className {
    width: 50%;
    background-color: #fff;
    /* ...etc... */
}

.className .descendantOne {
    /* ...stuff... */
}

.className .descendantTwo {
    /* ...stuff... */
}

.anotherClassName {
    /* ...stuff... */
}

Having said that, other people have other, valid, preferences.

Obviously, for production code it's more efficient to serve minified code, so the one-line format is closer to what I use once development is complete.

Answer 3

you usually only see indentation if it is css generated by sass or less. If you aren't using sass (which you should if you can), it is basically a question of a vs c. c makes sense when you only have a single setting for a rule, a makes sense for when you have more then that.

Answer 4

Pros:

• Very easy to navigate and find properties quickly

• Easier to understand when repositioning elements

Cons:

• Larger file size (due to extra tabs/spaces) which in turn loads slower

• Other people may be unfamiliar with your formatting (but I wouldn't worry about that much)