美文网首页CSS相关
css命名规范-BEM

css命名规范-BEM

作者: 小母鸡叽叽叽 | 来源:发表于2018-05-04 11:16 被阅读212次

什么是BEM

BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区块,功能以及样式来给元素命名。这三个部分使用__--连接(这里用两个而不是一个是为了留下用于块儿的命名)。命名约定的模式如下:

.block{}
.block__element{}
.block--modifier{}
  • block代表更高级别的抽象或组件
  • block__element代表 block的后代,用于形成一个完整的block的整体
  • block--modifier代表block的不同状态或不同版本

常用规范

  1. block element modifier包含多个单词时, 用一个中划线-链接,如
  • el-dropdown-menu el-button
  1. blockelement用双下划线__链接, 例
  • 表单项 form__item
  • 导航项 menu__item
  1. elementmodifier用双中划线--链接, 如表示按钮的不同状态,
  • 默认:el-button--default
  • 成功:el-button--success
  1. 用js控制样式时,css命名用is-开头,如
  • is-success is-failed
  • is-disabled

例如,写一个下拉菜单,参考element-ui

<div class="el-dropdown">
    <span>下拉菜单
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <ul class="el-dropdown-menu">
        <li class="el-dropdown-menu__item is-diasbled">选项一</li>
        <li class="el-dropdown-menu__item el-dropdown-menu__item--divided">选项二</li>
    </ul> 
<div>

常用的block、element、modifier命名

  • 参考element-ui的组件命名, 开发控制台, 在控制台查看组件的命名。

相关文章

  • 简单好用的CSS命名规范

    CSS命名规范 BEM命名法 BEM(Block, Element, Modifier)是由Yandex团队提出的...

  • web前端经验分享

    CSS技巧 解决css样式污染方案 命名约定 BEM命名规范 使用CSS Modules css实现新手引导效果 ...

  • CSS代码规范

    CSS规范 一.命名规范BEM(Block Element Modifier) 1.Block name 1) 实...

  • CSS BEM 命名简介

    BEM是一种CSS命名规范,旨在使用严格的命名约定,使得CSS类的命名更加透明,能直接了解上下文含义。BEM分别代...

  • CSS命名——BEM

    前言 详情见参考,下面的只是部分摘要 BEM是什么 BEM是一种CSS命名规范。BEM代表 “块(block),元...

  • BEM(CSS命名规范)

    在Web项目中规范css命名还是很有必要的,BEM传送门。 通过阅读Element-UI源码来分析学习BEM规范,...

  • CSS命名规范—BEM

    背景:最近上了一个前端项目,技术栈是angular + ionic。在听别的前端人员讨论的时候听到一个词叫BEM,...

  • css命名规范-BEM

    什么是BEM BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区...

  • CSS命名规范 BEM

    通过阅读Element-UI源码来分析学习BEM规范, 使用BEM规范语义化更加鲜明,阅读更容易理解,意思是 块,...

  • CSS BEM命名规范

    简介 BEM 的意思就是块(block)、元素(element)、修饰符(modifier),是由 Yandex ...

网友评论

    本文标题:css命名规范-BEM

    本文链接:https://www.haomeiwen.com/subject/ezplrftx.html