1

我最近玩过 BEM 语法，我想知道 CSS 中可链接性的使用，因为我尝试使用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符合？反语义？）。

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

4

1 回答 1

0

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

我建议使用这种 BEM 语法：

  • 块名
  • BlockName.-modifierName
  • 块名-元素名
  • BlockName-elementName.-modifierName

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

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

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

<button class="Btn -default Outline">Button</button>
于 2014-09-09T11:00:08.773 回答