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

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

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

Answer 2

对于一个巨大的样式表，B，因为由于所有选项卡，导航更容易。 （使用 SASS 之类的东西可以强化这一点）。

对于非常小的一个，A.C

和 DI 不推荐，因为它更难读取/操作属性和值。我认为唯一的情况是，如果您急于修复某些问题并且不关心缩进，否则我看不到任何好处。

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

Answer 3

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

Answer 4

优点：

• 非常容易快速导航和查找属性

• 重新定位元素时更容易理解

缺点：

• 文件大小较大（由于额外的制表符/空格），加载速度较慢

• < p>其他人可能不熟悉您的格式（但我不会太担心）