上一篇文章讲解了 BEM 的核心概念,今天这篇文章主要讲解 BEM 的命名约定。
当时工作中遇到 BEM 实体的时候,你需要了解他们的命名规则。
命名约定的主要思想是要使得 CSS 选择器尽量的清晰并且能够携带最多的信息。这将有助于代码的开发与调试,并且解决 web 开发者所面临的一些问题。
假设我们有一个叫做menuitemvisible
的选择器。这种符号的第一眼不能让我们从选择器的名称中识别出 BEM 实体的类型。
让我们加入定界符:menu-item-visible
或者mentItemVisible
以这种方式书写,选择器的名称被清晰的分割成多个逻辑部分。我们能确定menu
是一个块,item
是一个元素,然后visible
是一个修饰语。但是,实际项目中的例子通常更为复杂,并不像之前的例子那样简单易懂,这就是 BEM 命名约定发挥作用的地方。
BEM 方法论提供了一种创建命名式规则的思路,并将它落实为典型的 CSS 选择器命名规则。但是,还有其它基于 BEM 的替代方案。