Question

由于在我正在开发的项目中使用BEM的性质，我发现自己和其他人在我们的CSS文件中使用以下内容：

[class*="something"] { ... }
[class*="__something-else"] { ... }
[class*="--other-stuff"] { ... }
[class*="more-things"] { ... }
[class*="__even-more"] { ... }

是否有一个明智的解决方法来缩短上述内容以防止单词重复class，或者我们应该坚持使用这种方法吗？

Answer 1

您需要使用预处理器，例如LESS或SCSS / Sass。

我使用SCSS来证明您的想法。

通过使用@mixin和@content，您可以创建类选择器的生成器函数：

@mixin contain($name) {
  [class*=#{$name}] {
    @content;
  }
}

创建一个新的包含选择器：

@include contain(--big) {
  font-weight: bold;
  font-size: 50px;
}

https://jsfiddle.net/twxia/pLy3bz44/2/

这似乎不仅仅是键入[class*=...]，但如果您使用Sass，则可以生成@mixin，如下所示：

+contain(--big)
  font-weight: bold
  font-size: 50px

我认为使用编辑器或Sass的自动完成插件可以解决您的问题：D

使用正则表达式定位的类名的简写

1 个答案: