css 中的类结构 - 建议？

Posted 2023-02-16

【中文标题】css 中的类结构 - 建议？

【英文标题】：structure of classes in css - suggestions?

【发布时间】：2014-07-26 12:47:30

【问题描述】：

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

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

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

【问题讨论】：

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

【参考方案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  /*...*/ 

【讨论】：

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