CSS编写规范 BEM

写 CSS 并不是一件简单的工作，类名的取法、归类，但项目愈加庞大，因为 CSS 引起的各种问题会越来越多。
之前一直对 css 不怎么感冒,也没有了解过相关规范,在项目中也都是用CSS Module或者Scoped Style这种形式将类名进行混淆,并没有一个良好的规范来约定整个项目的样式编写,因此特地找了下对应的规范 BEM

简单讲一下BEM的命名规则,BEM分为 3 块 Block Element Modifiler

通用要求如下:

• 类名可以包含拉丁字母，数字和短划线
• 只使用类选择器 即 class
• 不要使用 tag name 比如 h1 p
• 与当前的页面的其他 block 或者 Element 没有依赖关系

Block

Block即为块,通常的话我们可以根据组件来进行 block 的划分, 命名方面很简单：

 .block

Element

Element为元素, element 的类名为其上层 block 的名称再加上__

 .block__elem

Modifier

Modifier为 block 或者 element 的某种状态, 类名为 block 或者 element 的类名加上--

 .block--theme-light
 .block__elem--theme-light

举几个例子理解下

block && element

<style>
  .block {
  }
  .block__elem {
  }
</style>
<div class="block">
  <div class="block__elem"></div>
</div>

modifiler

<style>
  .block {
  }
  .block--theme {
  }
  .block__elem {
  }
  .block--theme .block__elem {
  }
  .block__eleme--disable {
  }
</style>
<div class="block block--theme">
  <div class="block__elem  block__eleme--disable"></div>
</div>

整体下来，BEM 还是挺简单的，感觉很适用于 UI 组件库这样的场景,同时也可以和 css module 结合使用.总的来说,BEM 整体提供了一套规范来树立一个比较良好的结构,遵循一定的规则来约束开发者,但是也会带来类名过长等问题。以后的项目的话可以尝试使用