CSS格式的利弊

CSS格式的利弊

我知道四种CSS格式。 你认为哪个更好

A）经典

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

B）经典标识

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

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

C）同一行

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

D）识别的同一行

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

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

---

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

对于一个非常小的，a

我不推荐使用C和D，因为它更难读取/操作属性和值。我认为唯一的情况是，如果你急于修复某些东西，而不关心缩进，否则我看不到任何好处

---

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

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

对于一个非常小的，a

我不推荐使用C和D，因为它更难读取/操作属性和值。我认为唯一的情况是，如果你急于修复某些东西，而不关心缩进，否则我看不到任何好处

---

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

我真的不认为您使用的样式有什么区别，只要您坚持使用，并且与可能与您一起从事相同项目的任何其他人达成一致，并且符合您工作场所/办公室规定的任何特定文件要求

话虽如此，我还是倾向于A型风格，基本上是按血统组织的：

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

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

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

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

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

---

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

老实说，我不认为使用什么样式会有什么不同，只要您坚持使用，并且与可能与您一起从事相同项目的任何其他人达成一致，并且符合您工作场所/办公室规定的任何特定文件要求

话虽如此，我还是倾向于A型风格，基本上是按血统组织的：

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

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

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

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

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

---

显然，对于生产代码来说，提供小型化的代码更有效，因此一旦开发完成，单行格式就更接近我使用的格式。

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

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

优点：

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

• 重新定位图元时更易于理解

缺点：

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

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

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

• 重新定位图元时更易于理解

缺点：
• 较大的文件大小（由于额外的制表符/空格），从而导致加载速度变慢

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

---

哪种类型的专业人士和首席风险官？A、 B、C或D？哪种类型的赞成和反对者？A、 B，C还是D？