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

    时间:2016-11-04 20:04:53
    原文地址:https://github.com/zhongxia245/blog/issues/48

    一、背景

    挺早就听说过BEM了,也大概的知道怎么用,但是具体 BEM 指啥,具体有啥要求,还不是很清楚,然后今天就学习了下。

    二、BEM(Block,Element,Modifier)

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

    重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagher修改过的。这篇文章中介绍的这种命名技术并不是原始的BEM,但却是一个我更喜欢的改进版。无论实际使用了什么样的符号,它们其实都是基于同样的BEM原则。

    命名约定的模式如下:

    .block{}
    .block__element{}
    .block--modifier{}
    
    • .block 代表了更高级别的抽象或组件。
    • .block__element 代表.block的后代,用于形成一个完整的.block的整体。
    • .block--modifier代表.block的不同状态或不同版本。
      之所以使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定,如:
    .site-search{} /* 块 */
    .site-search__field{} /* 元素 */
    .site-search--full{} /* 修饰符 */
    

    三、总结

    • B: block ,某一块展示/功能区域(div, 比如: nav
    • E: Element, 这块展示/功能区域(div)里面的某个元素,比如: nav__item
    • M:Modifier, 某个元素或者某个块的状态,比如 nav--hide, nav__item--open 啥的

    例子:

    B:header-tabs //名字随便
    E:header-tabs__item //多个tab选项
    M:header-tabs__item--active //选中状态

    四、参考文章

    1. BEM —— 源自Yandex的CSS 命名方法论
  • 相关阅读:
    Java IO/NIO
    LeetCode—— 两两交换链表中的节点
    LeetCode——合并K个排序链表
    LeetCode第201场周赛
    LeetCode第202场周赛
    LeetCode215. 数组中的第K个最大元素
    LeetCode213. 打家劫舍 II
    LeetCode212. 单词搜索 II
    LeetCode211. 添加与搜索单词
    LeetCode210. 课程表 II
  • 原文地址:https://www.cnblogs.com/zhongxia/p/6031582.html
Copyright © 2011-2022 走看看