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. leecode刷题(8)-- 两数之和

    leecode刷题(8)-- 两数之和 两数之和 描述: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输 ...

  2. 【CF453D】 Little Pony and Elements of Harmony(FWT)

    题面 传送门 设\(a\)的递推公式为 \[a_i=\sum_ja_jb[count(i\oplus j)]\] 其中\(\oplus\)为异或,\(count(i)\)表示\(i\)的二进制中\(1 ...

  3. 洛谷P3783 [SDOI2017]天才黑客(前后缀优化建图+虚树+最短路)

    题面 传送门 题解 去看\(shadowice\)巨巨写得前后缀优化建图吧 话说我似乎连线段树优化建图的做法都不会 //minamoto #include<bits/stdc++.h> # ...

  4. 自己实现一个shell

    用C实现一个简单的交互式shell,要求:当用户输入一行命令时,识别程序名和参数并调用适当的exec函数执行程序,等待执行完成后给出提示符. exec函数实际上是六种以exec开头的函数,统称exec ...

  5. 10分钟教你用VS2017将代码上传到GitHub

    前言 关于微软的Visual Studio系列,真可谓是宇宙最强IDE了.不过,像小编这样的菜鸟级别也用不到几个功能.今天给大家介绍一个比较实用的功能吧,把Visual Studio 2017里面写好 ...

  6. MVC软件设计模式

    Model(模型):负责数据维护 View(视图):负责向用户呈现数据 Control(控制):负责模型和视图之间的交互 应用:Struts就是基于MVC模式的架构

  7. ipython 导入模块 非法ascii字符问题

    SyntaxError: Non-ASCII character '\xe2‘ ipython  使用了 python2    加入 #coding=utf-8 ipython3 使用 python3

  8. mysql基本用法

    mysql的基本用法     一.创建数据库 create database day02 default character set utf8; -- 创建表 create table user( i ...

  9. 数据库--sql文件

    sql 脚本是包含一到多个 sql 命令的 sql 语句集合 使用 Linux: mysqldump 命令 1.导出数据和表结构: mysqldump -u 用户名 -p 数据库名称 > nam ...

  10. C语言编译器和IDE的选择

    什么是编译器: CPU只认识几百个二进制形式的指令,C语言对CPU而言简直就是天书.C语言是用固定的词汇与格式组织起来,简单直观,程序员容易识别和理解. 这时候就需要一个工具,将C语言代码转换成CPU ...