我使用的Bem的习惯
在基于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的习惯的更多相关文章
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
- BEM(一种 CSS 命名规则)
一. 什么是 BEM BEM的意思就是块(block).元素(element).修饰符(modifier),是由 Yandex 团队提出的一种前端命名方法论. 这种巧妙的命名方法让你的 CSS 类对其 ...
- 和BEM的战斗:10个常见问题及如何避免
原文链接: https://segmentfault.com/a/1190000006135647 无论你是刚刚发现BEM或者已经是个中熟手(作为web术语来说),你可能已经意识到它是一种有用的方法. ...
- 问答:怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式?
好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...
- CSS命名规范——BEM思想(非常赞的规范)
人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...
- 防御性编程习惯:求出链表中倒数第 m 个结点的值及其思想的总结
防御性编程习惯 程序员在编写代码的时候,预料有可能出现问题的地方或者点,然后为这些隐患提前制定预防方案或者措施,比如数据库发生异常之后的回滚,打开某些资源之前,判断图片是否存在,网络断开之后的重连次数 ...
- 漫谈C++:良好的编程习惯与编程要点
以良好的方式编写C++ class 假设现在我们要实现一个复数类complex,在类的实现过程中探索良好的编程习惯. ① Header(头文件)中的防卫式声明 complex.h: # ifndef ...
- PHP新手常见的一些不好习惯(抄的 有待理解)
1.不写注释(是个好习惯,不过也没必要每个语句都要写) 2.不使用可以提高生产效率的IDE工具 3.不使用版本控制 4.不按照编程规范写代码 5.不使用统一的方法 6.编码前不去思考和计划 7.在执行 ...
- XCode设置自己windows习惯的快捷键(比如Home、End键)
Xcode的preference(command+,)中可以设置Key Bindings.绑定自己习惯的快捷键.实测系统快捷键设置同样名字也可以生效,但操作比较繁琐这里就不介绍了. 1.打开Xcode ...
随机推荐
- C# 使用 PerformanceCounter 获取 CPU 和 硬盘的使用率
C# 使用 PerformanceCounter 获取 CPU 和 硬盘的使用率: 先看界面: 建一个 Windows Form 桌面程序,代码如下: using System; using Sys ...
- 23.C++- 继承的多种方式、显示调用父类构造函数、父子之间的同名函数、virtual虚函数
上章链接: 22.C++- 继承与组合,protected访问级别 继承方式 继承方式位于定义子类的”:”后面,比如: class Line : public Object //继承方式是publi ...
- 【转】hibernate 延迟加载
Hibernae 的延迟加载是一个非常常用的技术,实体的集合属性默认会被延迟加载,实体所关联的实体默认也会被延迟加载.hibernate 通过这种延迟加载来降低系统的内存开销,从而保证 Hiberna ...
- phpStorm ctrl+左键无法找到类
场景 在使用phpstrom时,通过commd+鼠标左键的方式找不到该类 报如下异常: Cannot load settings from file ‘/*/.idea/xdp_stat.iml': ...
- FE 命令随笔
FE_CMD ————— * >>>>>>>> Vue ________________________________________________ ...
- K8S 高级调度方式
可以使用高级调度分为: 节点选择器: nodeSelector.nodeName 节点亲和性调度: nodeAffinity Pod亲和性调度:PodAffinity Pod反亲和性调度:podAnt ...
- POJ1275 Cashier Employment(差分约束)
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9078 Accepted: 3515 Description A sup ...
- SuperMap iClient for JavaScript image出图
SuperMap iClient for JavaScript 客户端基于openlayers 开发. 目前最高版本为811,9D产品后推荐客户使用leaflet.openlayers客户端开发. 问 ...
- 自动排版工具——XML自动排版生成工具
——支持全球化/多语言/符合W3C标准的XML自动排版工具 Boxth XML/XSL Formatter是专为XML数据或其他结构化数据源自动输出排版文件(如: PDF等)而设计的集数据格式化.版式 ...
- Python property使用简介
property使用简介 by:授客 QQ:1033553122 功能简介 1) 把类方法变成只读属性 2) setter和getter的另一种实现 代码演示1 #!/usr/bin/env pyth ...