BEM类链

Question

我最近讨论了边界元语法，我想知道在CSS中使用chainability的情况，因为我尝试使用class=*^ & class=*选择器来获得更自由的CSS类顺序。

例：

[class^="btn"][class*="--default"][class*="--outline"] {/* style */}

所以

<button class="btn--default--outline">Button</button>

或

<button class="btn--outline--default">Button</button>

会有相似之处。

还有比以下更易读的：

<button class="btn btn--default btn--outline">Button</button>

这个人正在使用同一概念，但每个人似乎都不同意，而不是为他们的论点提供真正的来源(慢点？反html符合吗？反语义的？)

那么，有理由不使用这种语法吗？

Answer 1

您应该避免使用您的技术，因为属性选择器比类选择器慢。。而且，我怀疑带有"^=“或"*=”的属性选择器不能在庞大的DOM上执行，就像SQL中的"LIKE“不如索引列上的"=”那样有效。(奇怪的方式总是更难写和维护)。

我建议这种边界元语法

• BlockName
• BlockName.-修改名
• BlockName-元素名
• BlockName-elementName.-修改名称

使用此语法，您的示例如下：

<button class="Btn -default -outline">Button</button>

注:修饰符不应独立于其块或元素的样式，因为这种做法不符合边界建模方法。如果-outline是一个横向类，那么将它设置为一个块：

<button class="Btn -default Outline">Button</button>