html - CSS类的结构-建议？

尝试在我的网站中组织元素以免迷路，但是由于我是第一次这样做，所以我想请教您一下。看一下图像，让我知道这样的类命名在语义上和效率上是否有意义：



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

您认为这是个好主意，还是宁愿以其他方式来做？

最佳答案

当您具有层次结构时，为什么不在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'，但是这将与其他容器的命名不一致。