2

定义一个特定的类会更好吗

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

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

或者将样式分成2个类会更好吗

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

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

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

4

4 回答 4

9

我认为公认的最佳实践是使用语义类。因此，如果这是例如一篇文章的标题，它应该如下所示：

html:

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

CSS：

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

这样做的主要原因是：您不想进入网站的 HTML 或代码，只是为了从所有文章标题中删除 awhite和类，并添加and ，当您认为粗体和白色不是正确的样式时. 您希望调用一个仅编辑 css 的类。boldgreyitalicarticle-header

于 2013-05-22T07:01:02.513 回答
1

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

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

我倾向于以描述样式角色的方式命名您的 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;
}

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

于 2013-05-22T07:02:41.103 回答
1

将其拆分为多个类的唯一意义是重用它们。例如，如果您确定会再次使用它。如果课程很短，那没有意义，但如果课程很长，那么它是有意义的。

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

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

例子：

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

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

于 2013-05-22T07:03:33.500 回答
0

取决于使用情况。

如果你想拥有特定类型的白色和粗体文本，你应该使用一种样式。如果您只想在某些粗体上使用白色或仅在某些白色文本上使用粗体，您应该使用 2 种样式。

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

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

这将适用于所有<p></p>标签。

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

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

于 2013-05-22T07:18:33.760 回答