[译] CSS使用BEM命名规范的五大理由

前言

BEM命名规范无疑是优秀的，它可以防止你的CSS代码陷入混乱,难以维护。当我刚接触到BEM的时候，我一会儿就喜欢上了这种规范，下面我将给你们分享下。

CSS是一门易于书写并容易理解的语言，但若是要在一个大型的项目中保持你的CSS代码整洁，易于维护却不是一件容易的事情，不少人每每把它写的杂乱无章。不少时候，你须要理解某部分代码时，你可能须要从头开始读起。这种场景是否是似曾类似呢？也许这个时候就须要一套规范让你们共同遵照了。常见的规范不少，每一个人的选择可能也不同，而我则选择使用BEM命名规范

来源: Mat Przegiętka

图片来源： Mat Przegiętka

BEM是什么？

BEM是一种CSS类命名规范，经过 模块化 和 可维护 的方式 编写样式。

BEM是 块（Block），元素（Element），修饰符（Modifier）的缩写。

例如：'block__element--modifier'

类的命名老是以块名开始,而后是元素名（可选，前面加两个下划线），最后是修饰符（也可选，前面加两个破折号）。

图1：在BEM中命名的组件示例

块(Block)

块是一个独立的，可重复使用的模块 , 你能够将其视为前端框架中的组件。例如，一个上图示例的"card"就是一个很典型的块。

注意：避免使用特定内容的命名（好比“shopping-list”）,推荐使用通用的名称（好比“check-list”），以便在不一样的场景中复用它们（“check-list”和“todo-list”）。

元素(Element)

元素是只存在于其块内的子元素。

好比上图示例中的card__title,card__text 或 card__button。

注意：元素嵌套只能有一个层级，因此card__button__text是不可行的。你应该定义另外一个名为“button”的块（由button__text组成）。

修饰符(Modifier)

修饰符能够为块或元素提供额外的描述，如颜色，状态等。

经过这种方式，咱们能够有像card__button--primary这样的card--featured类。

注意：修饰符只能进行修饰，并老是伴随着基础块。对于card，它将是：“card card--featured”，其中基础块定义了内边距和边框，而修饰符则定义了背景颜色。

图2：修饰符示例

• 除了BEM三个核心部分，你还能够给类添加 命名空间 前缀。

想深刻理解可点击 getbem 和 Naming convention 。此外，还有一些 相关博文。

BEM 有哪些优点

普遍承认

BEM是最受开发者承认的命名规范之一。也就是说，当你为你的BEM项目引入新的开发成员时，他们颇有可能已经了解过这一规范，从而缩短了学习和适应的过程，从而让他们快速投入开发。

可读性强

每一个元素都有语义化的类名，这样CSS样式表可读性很是强。选择器不只阅读起来更温馨，也比多层嵌套的写法运行效率更高。

图3：语义化的BEM命名 VS 标签选择器

扩展性强

CSS选择器的粒度足够地细，改动时就变得很是简单。只须要修改一个选择器就够了，也不用担忧两个选择器之间产生的权重问题

图4：重写二级菜单图标的样式（BEM与嵌套标签）

适应性强

模块化复用的理念，让BEM很容易配合其余框架一块儿使用。 此外，样式与元素类型和嵌套无关，不会打乱文档结构。

图5：元素类型和嵌套的重要性（BEM与标签））

健壮性

计算机科学只有两件事难以处理：缓存失效和命名。
—— Phil Karlton

当你开始使用BEM时，你可能会发现本身会有许多疑虑。
这反而是一件好事:

1. 使用合适的块命名让你的代码清晰易读，别人更容易理解（也包括你之后本身理解）

2. 类似的模块推荐复用已有的类名

3. 避免多级嵌套

简而言之，它会促使你开始注意细节，思考问题，从而提升代码的质量。 准备好使用BEM了吗？

译者：因为本人水平有限，翻译的内容不免有错漏和理解误差之处，欢迎各位大神指正

原文：blog.elpassion.com/reasons-to-…