Question

定义单个特定类

是否更好

<div class="text_bold_white"> text </div>

.text_bold_white {
    font-weight: bold;
    color: white;
}

或者将样式分成两个类

会更好吗？

<div class="text_bold color_white"> text </div>

.text_bold {
    font-weight: bold;
}
.color_white {
    color: white;
}

来自编程背景，我倾向于第二，因为它允许可重用性。但我想知道是否会导致定义太多样式。它会对渲染性能产生影响吗？

Answer 1

我认为商定的最佳做法是使用语义类。因此，如果这是例如文章的标题，它应该看起来像：

HTML：

<div class="article-header"> text </div>

的CSS：

.article-header{
  font-weight: bold;
  color: white;
}

这样做的主要原因是：您不想仅仅为了删除所有文章标题中的white和bold类而添加到网站的HTML或代码中，并添加{ {1}}和grey，当你决定粗体和白色不是正确的风格时。您希望有一个名为italic的类来仅编辑css。

Answer 2

如果是我，我会避免将事物命名为colours和bold，因为它们是css类的属性。

如果您选择将颜色从白色更改为红色，则.color_white的css类无意义。

我倾向于以描述样式角色的方式为您命名css类，例如.footer_text或.emphased_link。

最后，我还要说，如果您经常使用非常常见的颜色或样式，但是在多种情况下，例如，您肯定可以使用更多的语义类。颜色，字体系列，大小，组合。有时候最好有一个类：

.common_style {
    font-family: some-fonts,
    size: 20px,
    color: #123456;
}

您可以在多个地方重复使用，而不必写：

.header_text {
    font-family: some-fonts;
    size: 20px;
    color: #123456;
}

.footer_text {
    font-family: some-fonts;
    size: 20px;
    color: #123456;
    //then some styles which vary
    font-weight: bold;
}

因为它提供了一个很好的集中位置来进行更改。

Answer 3

将它分成许多类的唯一意义是它们的重用。例如，如果您确定要再次使用它。如果课程很短，那就毫无意义，但如果课程很长则有意义。

多个类可以更轻松地向元素添加特殊效果，而无需为该元素创建全新的样式。例如，您可能希望能够快速向左或向右浮动元素或添加花式边框。

主要的缺点是当你有多个类时代码可能看起来很乱。

示例：

<p class="float_l border_fancy clear underline textaligned_left">

以这种方式创建聚合类更好。

Answer 4

取决于使用情况。

如果你想要特定类型的文字是白色和粗体你应该使用一种风格。如果你只想在一些粗体或粗体上使用白色只有一些白色文本你应该使用2种风格。

此外，如果您希望所有文本都是粗体和白色，我建议您为段落设置：

p {
    font-weight: bold;
    color: white;
}

这适用于所有<p></p>代码。

有人写道，如果你想把它用作段落标题，你应该做某事（参见其他答案）。我只是想说使用标题标记总是更好 - <h1></h1>，<h2></h2> ..所以你的代码将结构化很好

你可以像我上面为段落所写的那样轻松编辑这些标题的样式。

CSS风格最佳实践

4 个答案: