玩点不同之CSS的BEM规范

引言

人类自诞生开始,无论是凿木取火还是制造武器,都是在不断的解决问题。

所以说,人类的进步就是一个不断解决问题的过程。

BEM引入背景

因为项目的业务逻辑发生重大变化,所以原来大半年的开发周期里做的事情基本上变成无用功。但是公司的项目上线时间依旧没有改变。剩下的时间只有区区的两个月,要做的功能是有社区+电商+核心业务的网站,着实是非常的紧张。

所以为了在有限的时间里面能够完成,甚至于保质保量的完成项目的开发。正所谓非常时期,非常方法。我们必须要高效的完成设计稿到页面输出的这个过程,这时候SASS和一些模板引擎(我们使用的jade)配合自动化构建工具(gulp)就展示出了他们和传统html配合css所不同的强力肌肉了。

BEM到底有什么好的呢?

因为以前也用过sass,所以感觉有一个坑的地方就是:当dom结构比较复杂的时候,最后sass编译完成以后的css的嵌套层级非常的深。

如果按照传统的方式,为了防止css样式冲突。我们会给我们的css类名增加深层次的嵌套。所以在写sass的时候我们也按照这样的方式来写,结果就会出现如上图css文件这般的样式。这样的话样式如果需要进行查找和修改的时候就会非常的头疼。而且眼睛也很累。所以很多人都觉得重写css会比修改css要快乐得多。

所以,按照我在文章开头所说的话推而广之。技术的进步就是不断解决问题的过程。那么,问题来了:我们如何可以快乐的使用sass的特性,又可以减少层级的嵌套呢?

那就快使用BEM规范来书写类样式吧!今天就拿出来说说,希望能给大家有所裨益。

因为sass为我们引入了很多很强大的特性,例如宏(mixin)和include。这样就为了我们实现sass样式的复用提供了一条康庄大道。既然sass可以复用了,除去表现,不考虑行为,剩下结构。就是我们的html了,既然html要能复用的话,就必须要将结构进行组件化的分割。

这也是BEM的核心思想:块(block)、元素(element)、修饰符(modifier),我喜欢在这里将块称为组件。

原始的BEM的规范如下:

.block{}
.block__element{}
.block__element--modifier{}

  

而我使用的是Nicolas Gallagher修改过的规范,不同如下:

.block{}
.block__element{}
.block--modifier{}//
.block-user{}
.block-user__element{}
.block-user--modifier{}

修改过的之所以使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定

我们来按照上面这个常用的Tab切换来做一个定量的分析。

按照BEM规范来看,tab这个切换就是一个可复用的组件。所以TAB就是一个组件

所以我们的顶级类名就是:.tab

每个单独的tab页签就是一个单独的元素:.tab__tab1,.tab__tab2...

每个单独的tab元素就会有选中这样的状态,这里就是最后一层:.tab__tab1--active

//BEM scss.tab{}
.tab__tab1{}
.tab__tab1--active{}

//normal scss
.tab{
    .tab1{
        .tab1_active{}
    }
}

 改进后的BEM规范:

//BEM scss
.tab{}
.tab__tab1{}
.tab--active{}

如果我们有一个tab页面是个竖版的怎么办呢?使用了改进版的如下

.tab-vertical{}
.tab-vertical__tab1{}
.tab-vertical--active{}

如果使用未改进版的BEM写个竖版的,当然这个在BEM里面未定义,而且相对而言,对于改进版而言的类命过长。

.tab-vertical{}
.tab-vertical__tab1{}
.tab-vertical__tab1--active{}

这样我们就可以把组件化的sass写成一个单独的scss文件,当我们的结构需要使用到这个组件的时候,我们就把它include进去,因为是一个单独的组件,所有无外乎你的最外层是什么类命,我都可以使用。

//main.html
<div class="tab">
    <ul>
           <li class="tab__tab1 tab--active"></li>
           <li class="tab__tab1"></li>
           <li class="tab__tab2"></li>
    </ul>
</div>

总结:

因为使用了BEM规范,我们的类名高度的特异性。所以即使不嵌套类名,我们的样式冲突的可能性也很小。只要整个团队能遵循这个规范,需要修改的时候我们可以马上定位要具体的组件,而且我们也可以很方便的了解到项目中其他同事想要表达的样式信息。当然,BEM规范的受人诟病的地方也正是类名太长,不太美观,而且如果没有接触过BEM规范的人来看css的话会一头雾水,但是瑕不掩瑜。BEM一定会为你的项目加速。

正所谓技术无好坏,合适方最好。

想了解更多可以戳如下链接:

http://docs.emmet.io/filters/bem/

http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

				
时间: 2024-10-03 22:54:36

玩点不同之CSS的BEM规范的相关文章

问答:如何规划CSS 中 的命名方式 如何看待 CSS 中 BEM 的命名方式?

好多盆友 很纠结 css命名规则 怎么弄,还没起步就被绊住了,那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量,但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个人经验总结,如果觉得有用请点赞 留言! JS前端实用开发QQ群 :147250970  欢迎加入~! 如何看待 CSS 中 BEM 的命名方式? BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种CSS Class 命名方法. 类似于: .blo

CSS 样式书写规范

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transitio CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如paddin

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的

CSS命名规则规范整理

转载声明:原载:彬Go本文链接:http://blog.bingo929.com/css-coding-semantic-naming.html 在此,非常感谢该文章作者的分享,本文完全转载自上面链接,此处作为备份,方便查看使用. CSS命名规则规范整理 大家在写css的时候,经常会遇到关于命名的问题.页面上成百甚至上千的class或者id,我们就会越来越感到困扰. 所以,这样我们就很有必要整理自己的一套命名规范.这里我就说说我自己的命 大家在写css的时候,经常会遇到关于命名的问题.页面上成百

编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范(转)

今天看了Bootstrap中文网关于编码规范的文章,觉得很受用,赶紧记下来. 首先是黄金定律:永远遵循同一套编码规范.不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. HTML部分语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格) 对于属性的定义,确保全部使用双引号,绝不要使用单引号 不要在自闭(例如,<meta> 或 <img>)元素的尾部添加斜线 -- HTML5 规范中明确说

CSS编写指导规范和建议

在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一部分将探讨语法.格式以及分析 CSS 结构:第二部分将围绕方法论.思维框架以及编写与规划 CSS 的看法. CSS 文档分析 无论编写什么文档,我们都应当维持统一的风格,包括统一的注释.统一的语法与统一的命名规范. 总则 将行宽控制在 80 字节以下.渐变(gradient)相关的语法以及注释中的

编写灵活、稳定、高质量的 css代码的规范

语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个声明块的左花括号前添加一个空格. 声明块的右花括号应当单独成行. 每条声明语句的 : 后应该插入一个空格. 为了获得更准确的错误报告,每条声明都应该独占一行. 所有声明语句都应当以分号结尾.最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错. 对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,

css的书写规范

格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ margin:0; padding:0;} a{ color: inherit; text-d

编码规范之编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范

不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. 因此,编写灵活.稳定.高质量的 HTML 和 CSS 代码,是每一个技术人员的基本操守. HTML ************************************************************************ 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双引号,绝不要使用单