1

在我最近的一个项目中，我注意到某些样式重复出现在相同的组合中。根据 DRY 原则，我应该将这些样式结合起来。关于一个好的 CSS 样式，哪个选项更好/最好？

选项 1
创建一个包含这些样式的类，然后简单地将其添加到 HTML 中的相应元素中。

例子

在 HTML 中：

<a href='#' class="myClass">Link</a>

或者

<ul class="myClass">
  <li>Item</li>
<ul>

在 CSS 中：

.myClass {
  font-weight: bold;
  font-size: 14px;
  color: grey;
}

选项 2
只需在我的 CSS 中组合所有需要该样式的元素，如下例所示。

a,
ul {
  font-weight: bold;
  font-size: 14px;
  color: grey;
}
4

2 回答 2

2 
.myClass {
  font-weight: bold;
  font-size: 14px;
  color: grey;
}

是最好的 ...

.myclass {
  font-weight: bold;
  font-size: 14px;
  color: grey;
}

更好（小写）

这样，DOM 引擎将无需在文档中堆叠所有 a 和所有 ul 标记即可访问元素。

于 2013-01-28T23:50:50.093 回答
1

我经常遇到同样的问题，并且已经学会了选择 Option 2。

首先，你需要问自己为什么这两种风格是相互关联的：你设计的这两个元素是要始终以相同的方式设计，还是只是巧合，它们的风格相同？

例如，如果你决定你的链接不应该是灰色的，而是蓝色的，你可以让你的 ul 列表也变成蓝色吗？我的意思是：链接和列表是否相关？他们必须看起来总是一样的吗？或者只是发生在这种特殊情况下，它们是相同的？

此外，您需要注意班级的名称。

  • 如果您将其称为，则说明.boldGrey您做错了，因为您的类名描述的是样式，而不是内容。
  • 如果您将其称为.secondary，则说明您做得很好，因为您描述的是内容，而不是样式。在这种情况下，使用选项 1可以。

但最后，我总是选择 Option 2。尽管您将相同的样式连接到多个元素，但如果您改变主意，之后仍然可以轻松对其进行修改。我通常将共享相同属性的元素列表放在我的 CSS 顶部（就在重置下方）。然后，我为每个元素添加特定样式。

我的网站上的示例：

time, code, figcaption {
  background:#f5f5f5;
  border:1px solid #e9e9e9;
  border-radius:2px;
  color:#93a1a1;
  font-size:11px;
  padding:0 4px 1px;
  white-space:nowrap;
}

然后，在下面，我有一些额外的样式code：

code {
  font-size:12px;
  position:relative;
  top:-2px;
}

在我设计这 3 个元素的样式时，我注意到我希望它们看起来一样。但不完全一样。所以我重新组合了他们所有的共同点，然后具体说明了他们的特别之处。

我可以为此使用一个课程吗？也许。但是我怎么称呼它呢？.greySmallBordered？.littleBlocks？.tag在看吗？很难想出一个只描述内容而不描述样式的名称。

所以我通常在我的选择器中列出多个元素，因为：

  • 这是将 HTML 中的内容与 CSS 中的样式分开的最佳方式
  • 它有助于为每个元素指定额外的样式
于 2013-01-29T00:09:06.407 回答