一、 什么是 BEM

BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由 Yandex 团队提出的一种前端命名方法论。

这种巧妙的命名方法让你的 CSS 类对其他开发者来说更加透明而且更有意义。(摘录自伯乐在线,不擅总结见谅)

<div class="tabs category-tabs">
<a href="#" class="tabs__item tabs__item--active">电影</a>
<a href="#" class="tabs__item">动画</a>
<a href="#" class="tabs__item">纪录片</a>
<a href="#" class="tabs__item">广告</a>
</div>

如上,tabs 为 block,是一个逻辑与功能的独立组件,或者“模块/功能区块”随便你怎么叫,

tabs__item 为 element,是非区块的其他东西,(这里为什么要用双下划线(而不是单的)其实我也不知道)

(而这两者到底该如何界定,主要看你的功能复杂程度,比如 list 区块下 有个 list__item,而 list__item 如果太复杂,不妨再写个 item 区块)

tabs__item--active 为 modifier,正如其表意,用于修饰/标注。

把它想象成一个 XML 或者 json 要更容易理解些。

好,区块化是懂了,但为什么非要这么写呢,不是更麻烦又难看了吗,

毕竟大多时候我们还是习惯 class 属性里写很多类的,诸如 BootStrap。

  

二、 为什么要使用 BEM

1. .head > .logo 速度肯定没有 .head-logo

选择器渲染是由右至左的(div.logo 这类除外,那样就更烧了),意味着先遍历一遍 CSSOM 树找到 .logo 再找 .head。

另外,也大大地避免了污染,毕竟当到处都有 .body/.content 时,说不定刚改了一页发现另一页不对了。

2. 样式层叠问题

id > class > (:nth-* :empty :checked等伪类) > [] > div = :not()

这个选择器优先级大家都熟悉吧,曾见识过全用 id 作为选择器的改需求,由衷想说,能只用一个 class 就只用一个,样式修改会方便很多。

3. 模块化

BEM 中的 B(block) 可以被认为就是模块的意思,换个顺序,复制粘贴都是飞快的,不会牵扯太多,结构更稳定。

4. Less/Sass 等工具的应用

会产生上节最后所提到的疑问,很大原因就在于没有享受到“动态CSS”的魅力和乐趣。

写很多类是因为它公用,而预处理语言能像变量一样保存这些公共类,那我还何必加在 HTML 上呢,毕竟又多又破坏语义。

5. 为了改需求时能优雅一些

工作半年多,有时真的会被业务搞得没脾气,需求变更是常有的事,又往往出于对项目负责的态度说改就改,

于是乎,在小修改上,用层叠去覆盖,在大修改上,用 modifier 去补充修饰,都可以避免越改越乱的情况。

三、BEM 具体要做什么

1. 学会使用 Less/Sass

个人认为这是十分首要的一环,不然你肯定会为公共类问题而叫苦不迭的,

其次 .tabs {*_item {}} 这种嵌套式的编写方式也会让代码非常清晰和简单。

此外题外话:推荐一款名为 Koala 的编译工具,不必用 node.js 或者 blabla 那些来把 Less/Sass 编译成 CSS 了。

2. 学会使用 Emmet

这是一款快速编码的神器,具体可查看教程,主要是能让书写 HTML 变得行云流水。

3. 多文件分解

将所有模块的 CSS 分别放在不同的 *.css 文件里,小巧意味着可替换,易查找,牵动不大。

使用 @import 方法链接起来,Less 编译时会帮你压缩到一起的。

4. 将皮肤分离出去

像 reset | public | module | respond | theme 这样,将背景色/文字颜色等,分离到 theme 里去。

5. 语义问题,有意义的命名

把关键词和功能写在 class 里是个很棒的事,所以它最好是有意义的名字。

如今如果选用 BEM 命名规则,个人认为它会更清晰,毕竟 element 有没有意义无所谓嘛,block 有意义才是正道。

6. 最后聊聊简单与复杂

扪心自问,BEM 到底让命名更复杂了还是更棒了?

说实话,我觉得实在不能更棒。

就和 Vue.js 为什么更好一样,这个问题可见知乎

四、其他

1. 用 HSL 要比 RGB 好一些,因为如果用 HSL,设计会对你说,这个颜色浓一点或淡一点,而不是这颜色好像偏红了偏蓝了。

2. 空格用双格,别用4个空格也不用tab,有内嵌关系就缩进...这样明确关系,方便查找。

3. 舍弃 IE 吧,虽然它还占有 18% 左右的 PC 端市场份额(移动端毫无它的一席之地吧),但真心觉得不值得。

4. 善用 Less 的 data-uri 方法,将小图在编译时自动转成 base64,不去占用 http 请求。

BEM(一种 CSS 命名规则)的更多相关文章

  1. 常用的css命名规则:

    关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...

  2. 【转】常用css命名规则

    常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...

  3. CSS 命名规则

    CSS书写顺序: 位置属性(position, top, right, z-index,display, float等) 大小(width, height, padding, margin) 文字系列 ...

  4. 一些CSS命名规则

    一些CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中 ...

  5. CSS命名规则常用的css命名规则

    CSS命名规则常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  6. [转] 常用的CSS命名规则

    (一)常用的CSS命名规则  头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度 ...

  7. CSS命名规范(规则)常用的CSS命名规则

    CSS命名规范(规则)常用的CSS命名规则   CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer ...

  8. CSS命名规则和如何命名

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  9. css 命名规则 BEM!

    随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理.著作权归作者所有. BEM本质应该是一个css命名方案,最流行的命名规则之一就是BEM ...

随机推荐

  1. [浪风分享]App必死 Web永生 看Web的前世今生 必会卷土重来

    当我们回顾技术的演变历史时,我们也应该关注技术演变的背后逻辑. 几年前,美国的<连线>杂志发表了“Web已死,Internet永生”的文章,由于作者之一是长尾理论的提出者克里斯.安德森(C ...

  2. 利用JNDI的命名与服务功能来满足企业级API对命名与服务的访问

    包含了大量的命名和目录服务,使用通用接口来访问不同种类的服务: 可以同时连接到多个命名或目录服务上: 建立起逻辑关联,允许把名称同Java对象或资源关联起来,而不必知道对象或资源的物理ID. JNDI ...

  3. Spring MVC集成Log4j

    以下示例显示如何使用Spring Web MVC框架集成LOG4J.首先使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态表单的Web应用程序: 创建一 ...

  4. Eclipse 生成jar包

    Eclipse 生成jar包 打开 Jar 文件向导 Jar 文件向导可用于将项目导出为可运行的 jar 包. 打开向导的步骤为: 在 Package Explorer 中选择你要导出的项目内容.如果 ...

  5. 【转发】linux开发人员常用命令

    每个开发人员到了他们职业人生的某个阶段的时候,将会发现自己要寻找有关Linux的信息.我并不是这方面的专家.但是掌握了以下8个命令,我几乎可以得到我任何需要的东西. 注意:以下的命令都有很多扩展的文档 ...

  6. 第0周---python网络爬虫前奏

    目标:掌握定向网络数据爬取和网页解析的基本能力 Python开发工具的选择

  7. 集合 Vector ArrayList 集合一

    集合是存储对象的,与对象数组不同,集合可以自动的扩大自己的容量,像StringBuffer一样,存储的对象类型可以不一致,(object数组). 方法: add();remove();get();se ...

  8. 关于 js 动态生成html 绑定事件失效的问题

    在实际问题中,也只到使用新版jq 的on 事件 进行动态元素的绑定: 是这样 (但是依然没有效果——): $('dom节点').on('click',function(){}) 之后经过查阅发现:正确 ...

  9. 使用jQuery lazyload 实现图片延迟加载

    下载地址 使用说明 0. 准备工作 下载jQuery和lazyload 插件(地址如上) 1. HTML 引入jQuery库和lazyload插件 <div id="imagesCon ...

  10. 《从零开始学Swift》学习笔记(Day 39)——构造函数重载

    原创文章,欢迎转载.转载请注明:关东升的博客  构造函数作为一种特殊方法,也可以重载. Swift中构造函数可以多个,他们参数列表和返回值可以不同,这些构造函数构成重载. 示例代码如下: class ...