BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称

使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长)

官方地址

点击查看

在选择器中,由以下三种符号来表示扩展的关系:

  • -中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号

    • type-block__element--modifier
  • __ 双下划线:双下划线用来连接块和块的子元素

    • block__element
  • -- 双中划线: 双中划线用来连接块和块的修饰状态或者块的子元素和块的子元素的修饰状态

    • block--modifier block__element--modifier

参考案例

<!-- 某个块 -->
<form class="search-form">
<!-- 某个元素 -->
<div class="search-form__content-left">
<!-- 错误:不能出现多个元素 -->
<h2 class="search-form__content-left__h2">标题</h2>
<!-- 某个元素,虽然是子集,保证了只有一级元素 -->
<input class="search-form__input">
<!-- 某个元素,加上了hover修饰器 -->
<button class="search-form__button search-form__button--hover">搜索</button>
<button class="search-form__button-set search-form__button-set--hover">搜索1</button>
<!-- 错误:不能单独使用lg修饰器 -->
<button class="search-form__button--lg">搜索</button> <!-- 块中可嵌套着另一个块 -->
<p class="my-img">
<img class="my-img__logo" src="abc.png" alt="image" title="image">
</p>
</div>
</form> <div class="search-result"></div>
 .search-form {
position: relative;
} .search-form__input {
font-size: 12px;
} .search-form__button--hover {} /* 避免:避免使用不必要的嵌套(此处只是简单的嵌套,没有必要) */
.search-form__content-left .search-form__input {} /* 稍好的嵌套(此处是在块的theme1修饰器下的子元素,某些时候有必要) */
.search-form--theme1 .search-form__input {} /* 错误:使用了标签 */
button.search-form__button {}
.search-form button {}

常见问题汇总

BEM中常见问题及如何避免

BEM样式使用规范的更多相关文章

  1. CSS 样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...

  2. PHP团队 编码规范 & 代码样式风格规范

    一.基本约定 1.源文件 (1).纯PHP代码源文件只使用 <?php 标签,省略关闭标签 ?> : (2).源文件中PHP代码的编码格式必须是无BOM的UTF-8格式: (3).使用 U ...

  3. CSS 样式书写规范+特殊符号

    虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没 ...

  4. css样式书写规范

    在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position  display  float  left  top  right  bottom ...

  5. 补充:CSS选择器样式的规范!

    css----页面样式,美化页面 css样式的三个规则 1内联式:直接写在html标签中 <p style="color:red"> 直接对html标签使用 style ...

  6. CSS网站框架及样式命名规范

    CSS网站框架 复位:reset.css 基础:base.css 或 basic.css (字体大小.颜色.背景.行高.列表样式.按钮样式.表格样式等等) 布局:layout.css (非结构的布局) ...

  7. 一篇关于BEM命名规范

    一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习. BEM是一个很有用的方法可以创建复 ...

  8. 谈谈BEM规范(含代码)

    css规范之BEM规范 前言 引用一句经典名言在编程的世界里其中一件最难的事情就是命名,不管是设计到编程语言还是标记语言都会有命名的需求.今天聊的就是关于css的命名规范的发展过程以及演变. 命名的发 ...

  9. CSS样式规范

    一般团队都有对CSS样式的规范,因为只有写的规范些,维护层本低,易懂.我们开发并不一次性的,往往都是要迭代的,如果这次随便写,下次迭代的时候将付出高昂的代价.而团队的规范一般都大同小异,往往都包含一下 ...

随机推荐

  1. OI树上问题 简单学习笔记

    判断链 每个点的度数不超过2 判断树 n个点,n-1条边 每两个点之间的路径唯一 多叉树转换成二叉树 第一个孩子作为左孩子,第一个孩子的兄弟作为它的右孩子. 树的重心 树上一点,满足删除该点时,树内剩 ...

  2. redis 3.0 集群__使用

    参考文档 http://redis.readthedocs.org/en/latest/topic/cluster-tutorial.html#id5 http://blog.csdn.net/myr ...

  3. this指向的一个小总结

    凡是在函数内部调用的函数的this的指向都是window 定时器,延时器this的指向都是window 在事件中一般情况下this的指向都指向当前的DOM对象 在对象函数中this的指向一般情况下都指 ...

  4. Ionic开发Hybrid App问题总结

    http://ionichina.com/topic/5641b891b903cba630e25f10 http://www.cnblogs.com/parry/p/issues_about_buil ...

  5. Corn表达式

    CronTrigger CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表.CronTr ...

  6. leetcode-198-House Robber(动态规划)

    题目描述: You are a professional robber planning to rob houses along a street. Each house has a certain ...

  7. leetcode-137-Single Number II-第二种解法

    题目描述: 详细的题目描述见上一篇博客<leetcode-137-Single Number II-第一种解法>,这里简单说一下. 有一个数组,所有元素都出现了三次,除了一个元素只出现了一 ...

  8. linux上的常用的进程与内存优化命令

    进程 ps命令 f 以树状结构显示 u 显示详细信息 a 显示所有进程 -A 显示所有进程 -u 用户名 是显示该用户下的进程 -l 更多进程详细信息 例子1. 以树状结构显示root用户下进程的详细 ...

  9. mfix中更改time dependent VTK filename的最大时间步数的容量

    默认是0000四位,有可能保存文件多了以后不够用,可以在源码中修改,修改以后效果: 源码位置: 把 I4. 改成 I5.

  10. BASIC CONCEPTS ABOUT 4G

    http://en.wikipedia.org/ 原版的维基,远比我认识的强大 http://www.3gpp.org/ http://www.ietf.org/ http://www.wiresha ...