Question

假设我必须在网页上重复蓝色，最有效，最省时，最聪明的做法是什么？

示例：

1。这个例子可能会弄乱我的css文件。

#header, #content, #footer {
  color: blue;
}

#header {
  (other properties)
  (other properties)
  (other properties)
}
#content {
  (other properties)
  (other properties)
}
#footer {
  (other properties)
  (other properties)
  (other properties)
}

2。通过这个例子，我最终会更频繁地修改我的html文件。

的CSS：

.default-color { 
  color: blue

}

#header {
  (other properties)
  (other properties)
  (other properties)
}
#content {
  (other properties)
  (other properties)
}
#footer {
  (other properties)
  (other properties)
  (other properties)
}

html：

<div id="header" class="default-color">
  (content here)
</div>

<div id="content" class="default-color">
  (content here)
</div>

<div id="footer" class="default-color">
  (content here)
</div>

Answer 1

我更喜欢第一种形式。添加“默认颜色”类开始进入将标记添加到标记中的区域，并且通常可以更灵活地将它们尽可能地分开。另一方面，如果你有一个语义类名，你可以添加到所有那些有意义的类名，那么这可以工作。

否则，如果你真的只想要一个“默认”颜色，你可以在你的css中的html或div元素上指定它，然后用更具体的类来覆盖它不希望元素显示为默认颜色。

Answer 2

考虑使用SASS创作样式表。这将允许您以多种方式管理重复：

最简单的方法是为您的蓝色定义变量，而不必担心必须更新多次出现：

$color-corporate-base: #009
#header  { color: $color-corporate-base; }
#content { color: $color-corporate-base; }

这将编译为常规CSS，将颜色值放在文档中引用的任何位置：

#header  { color: #009; }
#content { color: #009; }

您可以使用“mixins”将规则包含在不同的选择器中：

@mixin bold-color {
  color: blue;
  font-weight: bold;
}

#header {
  @include bold-color;
  background: black;
}
#content {
  @include bold-color;
  background: white;
}

这将编译为常规CSS，每个选择器中包含两个包含的样式规则。当然，这会造成重复：

#header {
  color: blue;
  font-weight: bold;
  background: black;
}
#content {
  color: blue;
  font-weight: bold;
  background: white;
}

即使这样可以处理Sass样式表源代码中的重复，使其易于使用，但CSS输出仍然具有重复性。（您可以使用逗号对常见样式进行分组，并将不同的样式放入自己的选择器中，但这可以回到原始问题。）

Sass有一个很酷的新功能可以解决这个问题。它被称为“选择器继承”。看看：

.bold-color {
  color: blue;
  font-weight: bold;
}

#header {
  @extend .bold-color;
  background: black;
}
#content {
  @extend .bold-color;
  background: white;
}

乍一看，这看起来与mixins非常相似，但请看CSS输出：

.bold-color, #header, #content {
  color: blue;
  font-weight: bold;
}
#header { background: black; }
#content { background: white; }

这使您可以根据需要在Sass样式表中组织选择器，和，您可以获得所需的优化输出！

Answer 3

为标准兼容浏览器执行此操作的一种方法是使用!important。

示例：

div
{
   color: blue !important;
}

Answer 4

我也更喜欢第一个版本。但请记住，您还可以在一个元素中使用多个类。所以你可以这样：

.blue {
    color: #00F;
}

.bold {
    font-weight: bold;
}

<div class="blue bold">Text</div>

处理重复的选择器：将元素放在一起或使用类？

4 个答案: