编写语义标记（CSS / HTML）

Question

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

• 将类用于可重用元素，将ID用于唯一元素
• 请勿使用非语义类或id（例如.float {float: left;} ）
• 而是根据元素的角色而不是其样式来命名选择器。

我实际上有两个问题：

1. 什么时候将元素视为非语义？ 像.col3这样的命名.col3语义的吗？ -Imo，它定义了元素的结构属性，而不仅仅是其样式？
2. 我们应该如何根据这些规则编写CSS？ 假设我有这个，并且需要在容器和盒子上都设置float属性：

 <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”。

非语义类名称在描述其表示形式时可能为“大蓝文本”。 另外，我们可能会在某些时候希望将standfirst的样式更改为绿色。 现在，我们有了一个“ big-blue-text”类名，实际上它现在是绿色的。 有关语义的更多信息，建议您阅读本文http://css-tricks.com/semantic-class-names/

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

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

Answer 2

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

2. 首选样式1，因为您最终不会到处复制CSS属性。 它还可以减小CSS文件的大小。

我不了解样式3，在上面已经定义了.box又有什么意义呢？ 您提到了两个div，仅添加了一个. 但一个ID一个ID。

希望这可以帮助。