css - CSS格式的优点和缺点

Question

CSS格式的优缺点

我知道四种 CSS 格式。 你觉得哪个更好？

A) 经典

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

B) 经典鉴定

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

C) 同一条线

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

D) 同一行标识

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

Answer 1

老实说，我不认为你使用什么风格有什么不同，只要你始终如一地使用它并且它是与可能与你在同一元素上工作的任何其他人达成一致的和根据您的工作场所/办公室强加的任何特定文档要求。

话虽如此，我更喜欢样式 A，组大致按血统组织:

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

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

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

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

话虽如此，其他人有其他有效的偏好。

显然，对于生产代码，提供缩小代码的效率更高，因此单行格式更接近我在开发完成后使用的格式。