CSS样式最佳实践

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;
}

这样做的主要原因是:你不想进入网站的HTML或代码只是为了从所有的文章标题中删除white和bold类，并添加grey和italic，当你决定粗体和白色不是正确的风格。您需要一个名为article-header的类来编辑css。

Answer 2

将其拆分为多个类的唯一意义是重用它们。例如，如果你确定你会再次使用它。如果class很短就没有意义，但是如果class很长就有意义了。

使用多个类可以更容易地为元素添加特殊效果，而不必为该元素创建一个全新的样式。例如，您可能希望能够快速地将元素向左或向右浮动，或者添加花哨的边框。

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

例子:

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

Answer 3

如果是我，我会避免将事物命名为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;
}

Answer 4

根据使用情况而定。

如果你想有特定类型的文本将是白色和粗体，你应该使用一种样式。如果你想只在一些粗体上使用白色，或者只在一些白色文本上使用粗体，你应该使用两种样式。

如果你想让所有的文本都是粗体和白色的，我建议为段落设置:

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

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

有人写道，如果你想用它作为段落标题，你应该做某事(见其他答案在这里)。我只是想说，它总是更好地使用标题标签- <h1></h1>, <h2></h2> ..所以你的代码将是结构化的

你可以很容易地编辑这些标题的样式，就像我在上面为段落写的一样。