我使用的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#连接oracle数据库 DBHelper
闲着没事自己写了一个OracleHelper类,希望大神给点建议优化 using System; using System.Collections.Generic; using System.Linq ...
- JS隐藏号码中间4位
function resetPhone(phone) { var str = String(phone) var len = str.length; var prev,next; if (len &g ...
- crontab清理日志
1.日志介绍 2.日志清理 (以下达到清理效果) du -sh * //查看日志大小 * 1 * * * cat /dev/null > /var/log/message 解释/dev/nul ...
- 关于RecyclerView你知道的不知道的都在这了(下)
目录 目录 正文 6. Recycler 7. ItemAnimator 8. ItemDecoration 9. OnFlingListener 目录 由于本篇篇幅特长,特意做了个目录,让大伙对本篇 ...
- es6 语法 (正则扩展)
{ //es5中 let regex = new RegExp('xyz', 'i'); let regex2 = new RegExp(/xyz/i); console.log(regex.test ...
- CSS概念【记录】
1.CSS语法 2.@规则 3.注释 4.层叠 5.优先级 6.继承 7.值 8.块格式化上下文 9.盒模型 10.层叠上下文 11.可替换元素 12.外边距合并 13.包含块 14.视觉格式化模型 ...
- jQuery效果之jQuery Color animation 色彩动画扩展
jQuery 的动画方法(animate)支持各种属性的过渡,但是默认并不支持色彩的过渡,该插件正是来补足这一点! PS: 该插件支持 RGBA 颜色的过渡,但是请注意,IE8以下的版本不支持 RGB ...
- BZOJ1007: [HNOI2008]水平可见直线(单调栈)
Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 8638 Solved: 3327[Submit][Status][Discuss] Descripti ...
- 浅谈pc和移动端的响应式
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早 ...
- ionic提示弹框
//提示框 .factory('TipsPort', function ($ionicPopup) { var TipsPort = function (tipsText, SureFunction, ...