0

据我目前所了解，以下约定适用于网页样式：

  • 对可重用元素使用类，对唯一元素使用 id
  • 不要使用无语义的类或 id（例如.float {float: left;}）
  • 相反，根据元素的角色命名选择器，而不是它们的风格。

我实际上有两个问题：

  1. 什么时候一个元素被认为是无语义的？命名是没有语义的.col3吗？- Imo，它定义了元素的结构属性，而不仅仅是它的样式？
  2. 我们应该如何按照这些规则编写 CSS？ 假设我有这个，并且需要在容器和盒子上设置浮动属性：
 <div id="container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
 </div>
 ----------------------- <!-- Now which CSS is best practice? //-->
 <style id="style_1">
   .box, #container { 
      float: left; 
   }
   #container { 
      other props... 
   }
 </style>

 <style id="style_2">
   .box { 
      float: left;
   }
   #container { 
      float: left;
      other props...
   }
 </style>

 <style id="style_3">
   .<commonclass for both divs, to be added to both> { 
      float: left;
   }
   .box { 
      float: left;
   }
   #container { 
      other properties....
   }
 </style>

哪种风格是最佳实践？

4

2 回答 2

0

我认为语义名称是描述您正在构建的内容的名称，而不是描述内容外观的名称。在您的示例中，您使用了 col3 类。在我看来这很好，因为它描述的是一段内容而不是它的外观。例如，假设我们有一篇文章，我们希望第一段（standfirst）的样式略有不同：

<article>
  <h1>Article title</h1>
  <p>Introductory paragraph</p>
  <p>Next paragraph</p>
<article>

我们可以在第一段添加一个类，这样我们就可以设置一些 CSS 值。在这种情况下，语义类名称可能是“standfirst”，因为它描述了内容。

一个无语义的类名可能是“big-blue-text”，因为它描述了它的表示。此外，我们可能在某些时候想要将standfirst 的样式更改为绿色。现在我们有了一个名为“big-blue-text”的类名，它实际上现在是绿色的。有关语义的更多信息，我建议阅读这篇文章http://css-tricks.com/semantic-class-names/

对于您的 CSS 问题，您在第一个示例中的方法是前进的方向 - 首先通过对选择器（容器和框）进行分组来设置您的共享样式。您的容器是父元素，因此我将在下一个元素上设置其独特的样式，然后是子元素的独特样式（在本例中为框）

#container,
.box {
  float: left;
}
#container {
  styles
}
.box {
  styles
}
于 2013-10-21T12:46:42.160 回答
0

  1. 语义就是意义。如果命名一个 div 是有意义的，.col3那么它不是没有语义的。

  2. 样式 1 是首选，因为您最终不会在任何地方复制 CSS 属性。它还减小了 CSS 文件的大小。

我不明白样式3，.box当您已经在上面定义了它时，再次定义有什么意义？你提到了两个 div，只添加了一个.但一个 id 一个 id。

希望这可以帮助。

于 2013-10-21T12:46:51.273 回答