编写语义标记（CSS/HTML）

根据我迄今为止的理解，以下惯例适用于网页样式：

• 对可重用元素使用类，对唯一元素使用id
• 不要使用非语义类或id（例如

  .float{float:left；}

  ）
• 相反，根据元素的角色而不是样式命名选择器

我实际上有两个问题：

什么时候元素被视为非mantic？是一个类似于

.col3

非mantic？-依我看，它定义了元素的结构属性，而不仅仅是它的样式

我们应该如何根据这些规则编写CSS？ 假设我有这个，并且需要在容器和长方体上设置float属性：

----------------------- 
.box，#容器{
浮动：左；
}
#容器{
其他道具。。。
}
.box{
浮动：左；
}
#容器{
浮动：左；
其他道具。。。
}
. { 
浮动：左；
}
.box{
浮动：左；
}
#容器{
其他财产。。。。
}

---

<哪种风格是最佳实践？

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

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

语义就是意义。如果有一个名为

.col3

的div是有意义的，那么它就不是不可靠的

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

我不理解样式3，当您已经在上面定义了

.box

时，再次定义它有什么意义？您提到了两个div，只添加了一个

，但添加了一个id和一个id

---

希望这有帮助。

关于你的问题，是的，

.box{float:left；}

应该是

.box{other properties…}

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

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