Question

我最近玩过BEM语法，我想知道在CSS中使用可链接性，因为我尝试使用class=*^＆amp; 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>

这家伙正在使用the same concept但是每个人似乎都不同意，而没有为他们的论点推进真正的来源（慢？反html符合？反语义？）。

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

Answer 1

你应该避免使用你的技术，因为attribute selectors are slower than class selectors。而且，我怀疑具有“^ =”或“* =”的属性选择器不能在巨大的DOM上执行，就像SQL中的“LIKE”在索引上的效果不如“=”一样柱。（奇怪的方式总是更难以编写和维护）。

我建议this BEM syntax：

块名称
BlockName.-modifierName
块名称-的ElementName
块名称-elementName.-modifierName

使用此语法，您的示例变为：

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

注意：修饰符的样式不应独立于其块或元素，因为这种做法不符合BEM方法。如果-outline是横向类，请将其设为块：

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

BEM类可链接性

1 个答案: