BEM---前端css命名规范

Posted 2021-04-09 IT狗的成长日记

一、什么是BEM

    BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

    BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览html代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符

二、BEM的命名规则

.block{}.block__element{}.block--modifier{}

• block 代表了更高级别的抽象或组件。

• block__element 代表.block的后代，用于形成一个完整的.block的整体。

• block--modifier代表.block的不同状态或不同版本

    

Block是逻辑和功能独立的单元，类似于组件。每个block包含自身的行为（js）、结构（HTML模板）、表现（css）。block的独立性有利于代码的复用，有利于项目管理，block决定了命名空间，确保elements不被其他block影响。

    特点：

        1、block可以嵌套、复用，并且可以嵌套任意多个block

        2、block不影响自身布局，也就是说不能设置margin和position属性。

<header class="header">    <div class="logo"></div> <form class="search-form"></form></header>

Element 是block的组成部分，并且不能脱离block使用。

    特点：

        1.element表示其目的 而不是其状态，简单的来说就是block的子元素

        2.Element的命名方式：block-name__element-name. element名字和block名字以双下划线分开。

<form class="search-form">     <input class="search-form__input"> <button class="search-form__button">Search</button></form>

Modifier定义block和element的外观,状态,或者行为

<form class="search-form> <button class="search-form__button search-form__button--size_s search-form__button--size_m"> Search </button></form>

三、例子

    常规的css

<div class="person"> <div class="female"> <p class="color"></p> </div> <div class="male"> <p class="color"></p> </div></div>

这些CSS类名真是太不精确了，并不能告诉我们足够的信息。尽管我们可以用它们来完成工作，但它们确实非常含糊不清

BEM命名规范

<div class="person"> <div class="person_female"> <p class="person_female--color"></p> </div> <div class="person_male"> <p class="person_male--color"></p> </div></div>

顶级块是‘person’，它拥有一些子级元素，如‘female male’。男性和女性都有一些颜色，这样我们单单通过代码中的命名就能知道元素之间的关联

---

    

长按二维码有惊喜