css 中的类结构 - 建议？答案

【问题标题】：structure of classes in css - suggestions?css 中的类结构 - 建议？
【发布时间】：2014-07-26 12:47:30
【问题描述】：

试图在我的网站中组织元素以免迷路，但由于我是第一次这样做，所以我想问问你的意见。看看图片，让我知道这样的类命名在语义和效率方面是否有意义：

我的网站上有几个类似的 div，它们在字体大小、元素位置等方面有所不同，这就是为什么我决定在给类命名时使用树结构。

您认为这是一个好主意，还是您宁愿采取不同的做法？

【问题讨论】：

您需要在每个班级名称中重复名片吗？我想这是有道理的，但由于无论如何它都将是具有类 businesscard 的节点的子节点，那么您可能可以缩短名称而不会发生冲突

标签： html css class fonts

【解决方案1】：

既然你有一个层次结构，为什么不在 CSS 中也使用它，我会这样做：

.businesscard {}
.businesscard .details {}
.businesscard .details .name {}
.businesscard .details .connector {}
.businesscard .details .date {}
.businesscard .title {}
.businesscard .content {}
.businesscard .progress {}

因此，这种方法比使用 -

的方法更容易转换为 LESS/SCSS

.businesscard {
 .details {
  .name {}
  .connector {}
  .date {}
 }
 .title {}
 .content {}
 .progress {}
}

另外，如果您要创建一张，比如说红色名片。一种方法是将其作为class='red businesscard' 添加到顶部容器中，但它会与您创建的方案一致吗？如果您要创建一个红色名片，顶部容器的外观有所不同，但其余部分保持不变，使用您给定的方案，它将是 class='red-businesscard'，但它会与其他容器的命名不一致。

【讨论】：

谢谢大家！所以让我弄清楚 - 使用你们提到的结构，我可以拥有一个具有不同值的类“内容”，这取决于它所在的 div，只要我坚持分层结构？ IE。 .businesscard1 .content {color:red} 和 .businesscard2 .content {color: blue}?在 html 中，我必须选择 class="businesscard1 content"?
是的，是的，不 - 在 html 中，您可以将其命名为 <div class='businesscard1'><div class='content'></div></div>
啊，很明显！非常感谢

【解决方案2】：

您可以只使用class="content" 等，并使用后代选择器反映您的树结构。例如

#businesscard .content { /*...*/ }
#businesscard .details { /*...*/ }

等等

这也使您可以灵活地将样式应用于页面中的相似元素，例如

.content { /*...*/ }
.details { /*...*/ }

如果您可能使用多个businesscard div，则应使用类而不是 id，例如

.businesscard .content { /*...*/ }
.businesscard .details { /*...*/ }

【讨论】：

也感谢您的回复，非常感谢