在基于BEM命名思想的基础上,我整理一些实用的点:

BEM,B即block(块),E即element(元素),M即modifier(修饰符)

块:最顶层,可包含块和元素

元素:被块包含,通常为最终被包含项,即无子代,当然,也有例外,它有时也会包含其他,如:

<div class="media">
<img src="logo.png" alt="Foo Corp logo" class="media__img--rev">
<div class="media__body">
<h3 class="alpha">Welcome to Foo Corp</h3>
<p class="lede">Foo Corp is the best, seriously!</p>
</div>
</div>

应注意的,它内部的东西class单独命名,最好不要有层级关系

修饰符:可修饰块和元素,表示一种状态

注意,不是所有时候都用BEM,当你觉得一个DOM结构符合使用BEM的条件时,你就可以用

完整的class名结构如下:

block-name__element-name--modifier

我使用的Bem的习惯的更多相关文章

  1. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  2. BEM(一种 CSS 命名规则)

    一. 什么是 BEM BEM的意思就是块(block).元素(element).修饰符(modifier),是由 Yandex 团队提出的一种前端命名方法论. 这种巧妙的命名方法让你的 CSS 类对其 ...

  3. 和BEM的战斗:10个常见问题及如何避免

    原文链接: https://segmentfault.com/a/1190000006135647 无论你是刚刚发现BEM或者已经是个中熟手(作为web术语来说),你可能已经意识到它是一种有用的方法. ...

  4. 问答:怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式?

    好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...

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

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

  6. 防御性编程习惯:求出链表中倒数第 m 个结点的值及其思想的总结

    防御性编程习惯 程序员在编写代码的时候,预料有可能出现问题的地方或者点,然后为这些隐患提前制定预防方案或者措施,比如数据库发生异常之后的回滚,打开某些资源之前,判断图片是否存在,网络断开之后的重连次数 ...

  7. 漫谈C++:良好的编程习惯与编程要点

    以良好的方式编写C++ class 假设现在我们要实现一个复数类complex,在类的实现过程中探索良好的编程习惯. ① Header(头文件)中的防卫式声明 complex.h: # ifndef ...

  8. PHP新手常见的一些不好习惯(抄的 有待理解)

    1.不写注释(是个好习惯,不过也没必要每个语句都要写) 2.不使用可以提高生产效率的IDE工具 3.不使用版本控制 4.不按照编程规范写代码 5.不使用统一的方法 6.编码前不去思考和计划 7.在执行 ...

  9. XCode设置自己windows习惯的快捷键(比如Home、End键)

    Xcode的preference(command+,)中可以设置Key Bindings.绑定自己习惯的快捷键.实测系统快捷键设置同样名字也可以生效,但操作比较繁琐这里就不介绍了. 1.打开Xcode ...

随机推荐

  1. Spring.net的一些感悟

    模拟Oracle+spring.net+NHibernate+MVC 对DLL文件引用问题得注意,库文件最好放在固定目录,否则严重影响项目迁移的成功, 由此可见,“代码规范”的重要性(自己大部分时间耽 ...

  2. C# 获取当前屏幕的宽高和位置

    上一篇博客<C# 获取当前屏幕DPI>,介绍了如何获取当前屏幕的DPI设置 本章主要介绍如何获取当前窗口所在屏幕的信息 当前屏幕信息 如果当前是单屏幕,可以直接获取主屏幕 var prim ...

  3. Postman Post请求上传文件

    Postman Post请求上传文件一.选择post请求方式,输入请求地址 二.填写Headers Key:Content-Type :Value:multipart/form-data 如下图 三. ...

  4. mybatis_ The content of element type association must match (constructor,id,result,ass ociation,collection,discriminator)

    一般遇到这种问题肯定要看一看association中元素编写顺序, <resultMap id="orderRslMap" type="orders"&g ...

  5. Python-10行代码实现3个数据可视化

    阅读本文约“1分钟” 最近将Python作为第二编程语言,进行了了解与学习,可以说它的包是很强大的.这次的demo仅仅不到10行代码就可以实现三个数据可视化的小实例. 我们将要使用到matplotli ...

  6. sqlplus导入数据

    从sqlplus命令行中向数据库中导入数据:

  7. div中img依据不同分辨率居中显示,超出部分隐藏

    在做banner居中时 碰到的问题,知道可以用背景图实现居中显示,但是内心是想深究下的,故找到几种办法收集一下,后面两种真的是奇技淫巧 来着下面两处 https://www.zhihu.com/que ...

  8. 直接插入排序算法的C++实现

    直接插入算法:每趟将一个待排序的关键字按照其值的大小插入到已经排好的部分有序序列的适当位置上,直到所有待排序的关键字都被插入到有序序列中为止. 理论上,在直接插入排序中第二层循环是可以提前结束的,即某 ...

  9. react-fetch数据发送请求

    在一个项目中,数据的请求发送数据是最为重要的,不可能我们的数据都是自己进行编写的 在react中官方推荐使用的方法是fetch.当然它里面也可以使用vue中的axios请求数据,jQuery的$.aj ...

  10. mac os安装多个版本的chrome

    1.下载chrome69安装程序后,双击dmg文件 2.将chrome拖到Application文件夹,如图,选择保留两者,不要替换 打开应用程序,会多出一个Google Chrome2,重命名为Go ...