Less 想法：减少CSS在处理/编译时创建特殊选择器

我试图避免长链的选择器，使用一个基于类的选择器，当较少的CSS被编译成普通CSS时，它会自动创建。有关详细信息，请参见下面的示例

受此启发，我有一个想法，为每个元素创建唯一的类。重复类在本质上有助于提高CSS渲染的效率

HTML

标准的普通CSS从上面编译而来

div.main img {border:1px solid #ccc;}
div.main a.link {color:blue;}

所需的纯CSS从上面的较少部分编译而成，父元素中的子元素的类的格式如下。parentElement1-parentClass1-childElement1-childClass1，如果类未定义，请使用null

.div-main-img-null {border:1px solid #ccc;}
.div-main-a-link {color:blue;}

当然，元素的更具体/描述性的类名可以解决这个问题，但是对于更大的应用程序和避免重复的类名，这种方法可能更好，因为可读性由更少的人处理，并且生产css是有效的。身体元素被用作基础，其他一切在命名上都与身体元素相关。html中的类名仍然需要手动定义以满足此要求，但是可以创建一个脚本来自动创建所有元素的类名

---

我想知道LESS是否可以将编译方法与此标准结合在一起。你对这个想法有什么看法？如果这样的想法可行的话？

我不确定我是否理解这个问题。。。如果需要，只需写下，而不是点和空格：

.div-main {
    &-img-null {border: 1px solid #ccc}
    &-a-link   {color:  blue}
}

---

我想你可以使用普通的正则表达式搜索和替换将一种格式转换为另一种格式。

那么你希望这个神奇的工具不仅生成类，还可以在html中更新它们吗？哈哈！类名可以手动输入，但可以通过预处理html的脚本自动输入。我更关心的是如何在较少编译CSS的情况下完成类似的事情。这让我印象深刻的是，通过平面CSS结构而不是可维护性，这在很大程度上有利于性能，但可能会导致大量CSS文件，这可能会抵消收益？从这篇文章中，我有一种感觉，我们不太谈论渲染效率的东西，因为它不再是一个大问题。。。超高速，零实用性当你需要糖的时候为什么要写盐？此外，如果您切换到此约定（例如div-main-a-link->），则标记标识符实际上没有意义。main link和您最终可能得到的结果类似。BEM标记太可怕了！在几乎每个标记上放置一个依赖于标记层次位置的很长的类名看起来像是一场可维护性灾难。语义标记怎么了？

.div-main-img-null {border:1px solid #ccc;}
.div-main-a-link {color:blue;}

.div-main {
    &-img-null {border: 1px solid #ccc}
    &-a-link   {color:  blue}
}