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 //选中状态
四、参考文章
CSS命名方式=》BEM的更多相关文章
- 更好用的css命名方式——BEM命名
一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块 ...
- 常用的Css命名方式
常用的Css命名方式: CSS命名规范: 1.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:p ...
- CSS命名规范——BEM思想(非常赞的规范)
人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...
- 前端css命名规范----BEM
一.什么是BEM BEM就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法可以使css类对其他开发者来说更加透明 ...
- css 命名规范 BEM
在项目的开发过程当中, 我们往往因为日益复杂的css代码而感到力不从心. 如何合理的组织css代码成为了我们前端开发过程中必须考虑到的环节. 在读element源代码的时候, 了解到了BEM的命名风格 ...
- CSS 命名规范 BEM 思想
Part.1 何为 BEM? BEM :Block ( 块 ) 丶Element ( 元素 ) 丶Modifier ( 修饰符 ) 出 处:是由 Yandex 团队提出的一种前端命名方法论 优 点:命 ...
- css 命名规则 BEM!
随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理.著作权归作者所有. BEM本质应该是一个css命名方案,最流行的命名规则之一就是BEM ...
- CSS命名规范 BEM
良好的代码结构,HTML和css元素之间的关系,对于项目交付是很重要的! BEM解释: (1).block 是BEM的区块(B),包含内容和风格.如bootstrap框架的.container. (2 ...
- CSS BEM 命名方式
简介 简易 css 命名方式,减小命名冲突,使得 css 更有组织感和识别感.但如今写 react 项目大多可以忽略对 css 的命名约束了. 官网介绍:http://getbem.com/intro ...
随机推荐
- PHP-CPP开发扩展(六)
PHP-CPP是一个用于开发PHP扩展的C++库.本节讲解在C++中PHP异常.变量.常量的实现相关知识. 异常 PHP和C++都支持异常,而PHP-CPP库这两种语言之间的异常处理是完全透明的.你在 ...
- C#读取Cookie
public class HttpCookie { [DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = ...
- 技术人员在小公司成长 vs 大公司成长路径和建议
我们经常听到这样的对话: 大公司猿A:真不想干了,每天都做类似的工作,学不到什么东西,会议也多,浪费不少时间,想去小公司多做些事情,多学些东西. 小公司猿B:累死了,什么都做,太乱太杂,没系统不规范, ...
- mybatis中动态SQL之trim详解
一. 背景 之前mybatis中<where>.<update>.<if>.<foreach>标签用的多,知道有<trim>这个标签,但很少 ...
- VSCode git Warning LF will be replaced by CRLF
本文参考自:http://www.yulongjun.com/linux/20170518-08-lf-cr/ 我们打开Visual Studio Code编辑器,可以看到右下角有这个LF,这是VS ...
- java命令运行带包的类
类文件d:\test2.java package b; public class test2 { public static void main(String[] args) { ...
- JDK源码解析之Java SPI机制
1. spi 是什么 SPI全称Service Provider Interface,是Java提供的一套用来被第三方实现或者扩展的API,它可以用来启用框架扩展和替换组件. 系统设计的各个抽象,往往 ...
- java_分数
题目内容: 设计一个表示分数的类Fraction.这个类用两个int类型的变量分别表示分子和分母. 这个类的构造函数是: Fraction(int a, int b) 构造一个a/b的分数. 这个类要 ...
- Tests for Variances
In each case, we'll illustrate how to perform the hypothesis tests of this lesson using summarized d ...
- blfs(systemd版本)学习笔记-编译安装openssh软件包
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! openssh项目地址:http://www.linuxfromscratch.org/blfs/view/stable/pos ...