zoukankan      html  css  js  c++  java
  • CSS 中 BEM命名方式

    BEM的意思就是块(block)、元素(element)、修饰符(modifier),是一种CSS Class 命名方法。

    类似于:

    .block{}
    .block__element{}
    .block--modifier{}
    __双下划线代表B和E连接例如 menu__item
    _单下划线代表B和M或E和M的连接 例如 menu_active 或 menu__item_active
    -中划线同英语里做连字符例如 mod-menu 或 mod-menu__item 这里 B或E或M需要多个单词来描述,就使用中划线

    了解什么是 B.E.M

    Block
    将所有东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是block,甚至一个icon一个logo也是block
    block可以相互嵌套

    Element
    一个Block下的所有Element无论相互层级如何,都要摊开扁平的属于Block
    所以 BEM 最多只有 B+E+M 三级,不可能出现 B+E+E+..+E+M 超长class名,也要求E不能同名

    Modifier
    之前我们经常写的 .current .active 等表达状态



  • 相关阅读:
    团队冲刺03
    梦断代码 阅读笔记02
    团队冲刺02
    团队冲刺01
    周总结
    团队工作任务
    阅读笔记3
    梦断代码阅读笔记01
    周总结
    NABCD项目分析
  • 原文地址:https://www.cnblogs.com/anyun/p/8297640.html
Copyright © 2011-2022 走看看