Html css中的类结构-建议？

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

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

---

您认为这是一个好主意，还是您更愿意以不同的方式执行？

您可以使用

class=“content”

等，并使用后代选择器反映您的树结构。例如

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

等等

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

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

如果您可能使用多张

名片

div，则应使用类而不是id，例如

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

---

既然您有一个层次结构，为什么不在CSS中也使用它呢？因此，我将按如下方式进行操作：

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

因此，这种方法比使用-

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

---

另外，如果你要创建一张红色的名片。一种方法是将其添加到顶部容器中，作为

class='red businesscard'

，但它是否与您创建的方案一致？如果您要创建一张红色名片，上面的容器外观不同，但其余部分保持不变，那么在给定的方案中，它将是

class='red-businesscard'

，但它将与其他容器的命名不一致。

您需要在每个类名中重复名片吗？我想这是有道理的，但是因为它都是带有类businesscard的节点的子节点，所以您可能会缩短名称，而不会有冲突的危险谢谢大家！让我弄清楚——使用你们都提到的结构，我可以有一个具有不同值的类“content”，这取决于它所在的div，只要我坚持层次结构？例如，

.businesscard1.content{color:red}

和

.businesscard2.content{color:blue}

？在html中，我必须选择

class=“businesscard1 content”

？是的，是的，不是-在html中，显然是

啊！非常感谢您的回复，非常感谢