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... */
}

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

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

Answer 2

对于一个巨大的样式表，B因为所有标签都更容易导航。（使用类似SASS的东西强化了这一点）。

对于非常小的一个，A。

C和D我不建议，因为它更难以读取/操作属性和值。我认为唯一的情况就是如果你急于修理某些东西并且不关心缩进，否则我看不到任何好处。

当然，对于制作而言，您可以选择最小化版本，因此我的观点反映了正在编辑的版本。

Answer 3

如果是sass或更少生成的css，通常只能看到缩进。如果你不使用sass（如果可以的话你应该使用），它基本上是一个vs c的问题。当你只有一个规则的设置时，c是有意义的，当你有更多的规则时，这是有意义的。

Answer 4

<强>优点：

很容易导航并快速找到属性
重新定位元素时更容易理解

<强>缺点：

较大的文件大小（由于额外的标签/空格）反过来加载较慢
其他人可能不熟悉您的格式（但我不会那么担心）

CSS格式的优缺点

4 个答案: