BEM的命名规范

基本概念 CSS 的命名规范又叫做BEM规范,为的是竣事杂乱的命名方式,到达一个语义化的CSS命名方式。 BEM是三个单词的缩写:Block(块)代表更高级别的抽象或组件,Element(元素) Block的后裔...

基本概念

CSS 的命名规范又叫做BEM规范,为的是竣事杂乱的命名方式,到达一个语义化的CSS命名方式。 BEM是三个单词的缩写:Block(块)代表更高级别的抽象或组件,Element(米素) Block的后裔,以及Modifier(修饰) 差别状态的修饰符。

命名方式:

.block__element--modifier {
    display: flex;
}
.block--modifier {
    display: flex;
}
.block__element {
    display: flex;
}

<p class="header">
    <p class="header__body">
        <button class="header__button--primary"></button>
        <button class="header__button--default"></button>
    </p>
</p>

通过BEM的命名规范我们可以到达一个什么目的呢?就是有一个清晰的形貌,从上面的代码中我们可以看到一层一层的清晰明晰,而且有一个清晰的结构。


1 block

block 代表一个更高级别的抽象或者是一个组件,它仅仅作为一个界限。它主要的功效有下面三点:

卖力形貌功效的,不应该包罗状态。

    /* correct */
    .header {
    
    }
    
    /* wrong */
    .header--select {
    
    }

不影响自身结构,不包罗详细的样式,也就是block内里不应该加样式

    /* correct */
    .header {
    
    }
    
    /* wrong */
    .header {
        margin-top: 50px;
    }

不能使用米素选择器和ID选择器

    /* correct */
    .header {
    
    }
    
    /* wrong */
    .header a {
        margin-top: 50px;
    }

2 Element

是用一个双下划线离隔

  /* correct */
  .header__body {
      margin-top: 50px;
  }
  
  /* wrong */
  .header .body {
      margin-top: 50px;
  }

示意的是目的,而不是状态,如下例子:目的是在header下面界说三个区域 body、logo、title,然则并没有指定任何状态。

  .header__body {
      margin-top: 50px;
  }
  
  .header__logo {
      margin-top: 50px;
  }
  
  .header__title {
      margin-top: 50px;
  }

不能脱离Block父级单独使用

  /* correct */
  <p class="header">
      <p class="header__body">
          <button class="header__button--primary"></button>
          <button class="header__button--default"></button>
      </p>
  </p>
  
  /* wrong */
  <p>
      <p class="header__body">
          <button class="header__button--primary"></button>
          <button class="header__button--default"></button>
      </p>
  </p>

3 Modifier

示意的是一个状态,是用双横杠离开的。

  .header__button--default {
      background: none;
  }
Boolean
  .header__button--select {
      background: none;
  }
枚举
  .header__button--primary {
      background: #329FD9;
  }

不能单独使用

  /* correct */
  <p class="header">
      <p class="header__body">
          <button class="header__button--primary"></button>
          <button class="header__button--default"></button>
      </p>
  </p>
  
  /* wrong */
  <p>
      <p>
          <button class="header__button--primary"></button>
          <button class="header__button--default"></button>
      </p>
  </p>

BEM在预处理器语言中的使用

在Sass中的使用

    .header {
        &__body {
            padding: 20px;
        }
    
        &__button {
            &--primary {
                background: #329FD9;
            }
            &--default {
                background: none;
            }
        }
    }

在Less中的使用

    @classname: header;
    
    .@{classname} {
        .@{classname}__body {
            padding: 20px;
        }
    
        .@{classname}__button {
            .@{classname}__button--primary {
                background: #329FD9;
            }
    
            .@{classname}__button--default {
                background: none;
            }
        }
    }
思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动,优惠券领取点击进入

3.广告同盟: 整理了现在主流的广告同盟平台,若是你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4032

  • 发表于 2021-02-11 16:48
  • 阅读 ( 201 )
  • 分类:互联网

0 条评论

请先 登录 后评论
wjs5588
wjs5588

707 篇文章

你可能感兴趣的文章

相关问题