CSS代码结构

Question

我想知道何时以及如何对重复的属性进行分类。考虑可读性、代码性能、结构之间的缺点和优点。假设我有两个CSS代码:

第一个代码:

.a {
    text-align: center;
    font-size: 1em;
    background-color: red;
}
.b {
    text-align: center;
    font-size: 1em;
    background-color: green;
}
.c {
    text-align: center;
    font-size: 2em;
    background-color: blue;
}
.d {
    background-color: blue;
}

第二代码:

.a,
.b,
.c {
    text-align: center;
}
.a,
.b {
    font-size: 1em;
}
.c,
.d {
    background-color: blue;
}
.a {
    background-color: red;
}
.a {
    background-color: green;
}
.c {
    font-size: 2em;
}

所以哪一个是更好的家伙，谢谢以前:)

Answer 1

关于可读性和结构，我认为这取决于应用程序的复杂性和组织。

通常的做法是为了组织你的CSS代码，这是特别有用的，当你在一个大型应用程序和几个开发人员参与。

本

块、元素、修饰符——是一种命名方法。这是一种聪明的命名方式，可以给你的类赋予更多的意义和可读性。

更多信息在这里:

https://css-tricks.com/bem-101/

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

SMACSS

代表CSS的可伸缩和模块化架构，更像是CSS的样式指南。

更多信息在这里:

https://smacss.com/