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

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.