重新认识 CSS--BEM核心概念

概要

从狭义上来讲，BEM就是一套CSS的命名规则，将CSS的命名分解为 Block, Element, Modifier 三个部分，即 块（block）、元素（element）、修饰符（modifier）。它是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明且更有实际的意义。block 代表了更高级别的抽象或组件。block__element 代表.block的后代，用于形成一个完整的.block的整体。block--modifier代表.block的不同状态或不同版本。BEM命名约定更加严格，而且包含更多的信息，它们主要用于团队开发一个耗时的大项目。

块Block

页面上逻辑与功能独立的组件等同于 Wwb 组件。一个块中，封装了行为（JavaScript）,模板，样式（CSS）和其它一些实现技术。一个独立的块可以被重用，以及推进项目的开发与维护。
一个块可以嵌套在另一个块中。比如，一个head块可以包含一个标识（logo），一个导航菜单（nav）和一个用户信息块（profile）。

元素Element

不能用于块之外的组成成分。例如一个菜单项（menu item）不能在一个菜单块（menu block）外面使用，所以他是一个元素。

修饰语Modifier

一个 BEM 实体定义了一个块或者元素的外观与行为。
修饰语的使用并不是必须的。
修饰语本质与与 HTML 的属性（attribute）相似。同样的块因为使用了修饰语而变得不一样了。
比如，菜单块（menu）外观的改变依赖于他使用的修饰语。

BEM树

一个页面在结构方面表现为许多的块，元素与修饰语。这是 DOM 树的一种抽象表示，用来描述 BEM 实体的名称，状态，顺序，嵌套与辅助数据。在实际项目中，BEM 树可以用任意的格式描述，但推荐使用树型结构。假设有一个这样的 DOM 树：

<header class="header">
    <img class="logo">
    <form class="search-form">
        <input type="input">
        <button type="button"></button>
    </form>
    <ul class="lang-switcher">
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="url">en</a>
        </li>
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="url">ru</a>
        </li>
    </ul>
</header>

类似的 BEM 树看起来可能是这样：

header
    ├──logo
    └──search-form
        ├──input
        └──button
    └──lang-switcher
        └──lang-switcher__item
            └──lang-switcher__link
        └──lang-switcher__item
            └──lang-switcher__link

BEMJSON：

{
    block: 'header',
    content : [
        { block : 'logo' },
        {
            block : 'search-form',
            content : [
                { block : 'input' },
                { block : 'button' }
            ]
        },
        {
            block : 'lang-switcher',
            content : [
                {
                    elem : 'item',
                    content : [
                        { elem : 'link' }  
                    ]
                },
                {
                    elem : 'item',
                    content : [
                        { elem : 'link' }
                    ]
                }
            ]
        }
    ]
}