时间: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 命名方法论

CSS命名方式=》BEM的更多相关文章

  1. 更好用的css命名方式——BEM命名

    一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块 ...

  2. 常用的Css命名方式

    常用的Css命名方式: CSS命名规范: 1.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:p ...

  3. CSS命名规范——BEM思想(非常赞的规范)

    人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...

  4. 前端css命名规范----BEM

    一.什么是BEM BEM就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法可以使css类对其他开发者来说更加透明 ...

  5. css 命名规范 BEM

    在项目的开发过程当中, 我们往往因为日益复杂的css代码而感到力不从心. 如何合理的组织css代码成为了我们前端开发过程中必须考虑到的环节. 在读element源代码的时候, 了解到了BEM的命名风格 ...

  6. CSS 命名规范 BEM 思想

    Part.1 何为 BEM? BEM :Block ( 块 ) 丶Element ( 元素 ) 丶Modifier ( 修饰符 ) 出 处:是由 Yandex 团队提出的一种前端命名方法论 优 点:命 ...

  7. css 命名规则 BEM!

    随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理.著作权归作者所有. BEM本质应该是一个css命名方案,最流行的命名规则之一就是BEM ...

  8. CSS命名规范 BEM

    良好的代码结构,HTML和css元素之间的关系,对于项目交付是很重要的! BEM解释: (1).block 是BEM的区块(B),包含内容和风格.如bootstrap框架的.container. (2 ...

  9. CSS BEM 命名方式

    简介 简易 css 命名方式,减小命名冲突,使得 css 更有组织感和识别感.但如今写 react 项目大多可以忽略对 css 的命名约束了. 官网介绍:http://getbem.com/intro ...

随机推荐

  1. PHP-CPP开发扩展(六)

    PHP-CPP是一个用于开发PHP扩展的C++库.本节讲解在C++中PHP异常.变量.常量的实现相关知识. 异常 PHP和C++都支持异常,而PHP-CPP库这两种语言之间的异常处理是完全透明的.你在 ...

  2. C#读取Cookie

    public class HttpCookie { [DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = ...

  3. 技术人员在小公司成长 vs 大公司成长路径和建议

    我们经常听到这样的对话: 大公司猿A:真不想干了,每天都做类似的工作,学不到什么东西,会议也多,浪费不少时间,想去小公司多做些事情,多学些东西. 小公司猿B:累死了,什么都做,太乱太杂,没系统不规范, ...

  4. mybatis中动态SQL之trim详解

    一. 背景 之前mybatis中<where>.<update>.<if>.<foreach>标签用的多,知道有<trim>这个标签,但很少 ...

  5. VSCode git Warning LF will be replaced by CRLF

    本文参考自:http://www.yulongjun.com/linux/20170518-08-lf-cr/ 我们打开Visual Studio Code编辑器,可以看到右下角有这个LF,这是VS ...

  6. java命令运行带包的类

    类文件d:\test2.java package b; public class test2 {    public static void main(String[] args) {         ...

  7. JDK源码解析之Java SPI机制

    1. spi 是什么 SPI全称Service Provider Interface,是Java提供的一套用来被第三方实现或者扩展的API,它可以用来启用框架扩展和替换组件. 系统设计的各个抽象,往往 ...

  8. java_分数

    题目内容: 设计一个表示分数的类Fraction.这个类用两个int类型的变量分别表示分子和分母. 这个类的构造函数是: Fraction(int a, int b) 构造一个a/b的分数. 这个类要 ...

  9. Tests for Variances

    In each case, we'll illustrate how to perform the hypothesis tests of this lesson using summarized d ...

  10. blfs(systemd版本)学习笔记-编译安装openssh软件包

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! openssh项目地址:http://www.linuxfromscratch.org/blfs/view/stable/pos ...