前端css命名规范----BEM

一、什么是BEM

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

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

 

二、BEM的命名规则

  .block{}  表示更高级别的抽象或组件

  .block__element{}  表示是.block的后代,用于形成一个完整的.block整体

  .block--modifier{}  表示.block的不同状态或不同版本

 

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

  特点:

    1、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__buttom">搜索</button>
    </form>

 

  modifier定义block和element的外观、状态、行为。

    <form class="search-form">
        <button class="search-form__buttom
                       search-form__buttom--size_s
                       search-form__buttom--size_m
        ">搜索</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。男性和女性都有一些颜色,这样我们只通过代码中的命名就能知道它们之间的关联。

 

  

  

posted @ 2019-09-29 17:18  吴小明-  阅读(923)  评论(0编辑  收藏  举报