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 命名方法论
  • 相关阅读:
    循环播放音乐
    在发板实现24位jpg和bmp图片用手划动显示上一张与下一张图片
    AnsiIO
    PosixIO
    java3
    java2
    java1
    ios音乐播放器demo
    添加文章查看连接
    elementary os变成mac风(笔记)
  • 原文地址:https://www.cnblogs.com/zhongxia/p/6031582.html
Copyright © 2011-2022 走看看