Question

根据我目前的理解，以下约定适用于样式化网页：

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

我实际上有两个问题：

什么时候元素被认为是非语义的？像.col3这样的命名是否是无意义的？ - Imo，它定义了元素的结构属性，而不仅仅是它的样式？
我们应该如何根据这些规则编写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>

哪种风格是最佳做法？

Answer 1

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

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

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

非语义类名称可能是“big-blue-text”，因为它描述了它的表示。此外，我们可能在某些时候想要改变立场的风格是绿色的。现在我们有一个“big-blue-text”的班级名称，现在实际上是绿色的。有关语义的更多信息，我建议您阅读本文http://css-tricks.com/semantic-class-names/

对于CSS问题，您在第一个示例中的方法是前进的方法 - 首先通过对选择器（容器和框）进行分组来设置共享样式。你的容器是父元素，所以我在下面设置它的独特样式，然后是子元素的独特样式（在这种情况下为方框）

#container,
.box {
  float: left;
}
#container {
  styles
}
.box {
  styles
}

Answer 2

语义就是意义。如果有一个名为.col3的div是有意义的话，那么它就不是非语义的。
首选样式1是因为最终不会在任何地方复制CSS属性。它还减小了CSS文件的大小。

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

希望这有帮助。

编写语义标记（CSS / HTML）

2 个答案: