CSS代码重构与优化

CSS代码重构的基本方法

前面说到了CSS代码重构的目的，如今咱们来讲说一些如何达到这些目的的一些基本方法，这些方法都是易于理解，容易实施的一些手段，你们平时可能也不知不觉地在使用它。

提升CSS性能的手段

首先说说如何提升CSS性能，根据页面的加载性能和CSS代码性能，主要总结有下面几点：

一、尽可能将样式写在单独的css文件里面，在head元素中引用

有时候为了图方便或者快速搞定功能，咱们可能会直接将样式写在页面的style标签或者直接内联在元素上，这样虽然简单方便，可是很是不利于往后的维护。将代码写成单独的css文件有几点好处：

（1）内容和样式分离，易于管理和维护

（2）减小页面体积

（3）css文件能够被缓存、重用，维护成本下降

二、不使用@import这条手段已是众所周知，这里简单提一下，@import影响css文件的加载速度

三、避免使用复杂的选择器，层级越少越好

有时候项目的模块愈来愈多，功能愈来愈复杂，咱们写的CSS选择器会内套多层，愈来愈复杂。

建议选择器的嵌套最好不要超过三层，好比：

.header .logo .text{} 

能够优化成

.haeder .logo-text{} 

简洁的选择器不只能够减小css文件大小，提升页面的加载性能，浏览器解析时也会更加高效，也会提升开发人员的开发效率，下降了维护成本。

四、精简页面的样式文件，去掉不用的样式

不少时候，咱们会把全部的样式文件合并成一个文件，可是这样有一个问题：不少其余页面的CSS同时引用到当前页面中，而当前页面并无用到它们，这种状况会形成两个问题：

（1）样式文件偏大，影响加载速度

（2）浏览器会进行多余的样式匹配，影响渲染时间。

正确的处理方法是根据当前页面须要的css去合并那些当前页面用到的CSS文件。

PS：合并成一个文件有一个优势：样式文件会被浏览器缓存，进入到其余页面样式文件不用再去下载。这条规则应根据场景来区别对待，若是是大项目，应该合并成不一样的样式文件，若是是简单的项目，建议合并成一个文件便可。若是没法确认项目规模，建议分开成不一样的样式文件，往后要合并也比较方便。

五、利用CSS继承减小代码量

咱们知道有一部分CSS代码是能够继承的，若是父元素已经设置了该样式，子元素就不须要去设置该样式，这个也是提升性能的行之有效的方法。

常见的能够继承的属性好比：

color，font-size，font-family等等

不可继承的好比：

position，display，float等

你们能够查看 CSS参考手册

提升可维护性的方法

提升CSS代码的可维护性，简单的说就是要让开发人员易于理解CSS代码，容易去修改它，不会破坏原有的功能。下面说说一些经常使用的手段。

一、命名与备注

命名是提升代码可读性的第一步，也是及其重要的一步。不少人都有这样的体会：命名是写代码中最让程序员头疼的事情之一，尤为是对母语非英语的开发人员来讲，要找一个合适贴切的名字并不容易。提升本身命名的能力，能够多看看别人的代码。下面是CSS中的一些命名相关的建议：

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制总体佈局宽度：wrapper
左右中：left right center
登陆条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情连接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签：tags 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guide 服务：service 注册：regsiter 状态：status 投票：vote 合做伙伴：partner 导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary 

二、提取重复样式

这一个方法很容易理解，简单说就是提取相同的样式成为一个单独的类再引用，这样不只能够精简CSS文件大小，并且CSS代码变少，更易于重用和维护。例以下面的例子：

原来的代码是这样：

.about-title{ margin: 0 auto 6rem; color: #333; text-align: center; letter-spacing: 4px; font-size: 2rem; } .achieve-title{ margin: 0 auto 6rem; color: #fff; text-align: center; letter-spacing: 4px; font-size: 2rem; } 

这两个样式的区别在于文字颜色的不一样，咱们能够将其公共的样式提取出来，而后再分别设置其不一样的样式

.column-title{ margin: 0 auto 6rem; text-align: center; letter-spacing: 4px; font-size: 2rem; } .about{ color: #333; } .achieve{ color:#fff; } 

提取公用的部分，而后在页面上分别引用column-title和about等，这样代码更简洁，维护起来也更方便了。这个例子很是简单，实际上项目中可能有更复杂的状况，总之就要要尽量的DRY，尽量的提取重复的东西。

三、书写顺序

这个书写顺序指的是各个样式的书写顺序，下面是推荐的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, transition等)

书写顺序不必定非得按照上面的推荐来进行，而是根据你本身的习惯，可是最好能保证先后的习惯一致的，或者团队应该有一个共同的代码规范去遵照，这样后期维护起来也会方便许多。

以上是我我的总结的一些简单的写好和重构CSS代码的方法，你们固然没必要拘泥于此，有不一样的意见和建议欢迎进行交流！

CSS方法论

什么是CSS方法论呢？简单地说就是一些同行为了提升CSS的可维护性、提出的一些编写CSS代码的规范和方法。他们提出了一些概念，这些概念可能听起来很高大上，可是实际你平时可能不知不觉也会用到这些所谓的CSS方法论。下面我简单地介绍下几个比较常见的CSS方法论。

OOCSS

OOCSS是（Object Oriented CSS），顾名思义就是面向对象的CSS。

OOCSS主要有两个原则：

一、结构和样式分离

咱们平时必定遇到过这种状况，好比一个页面存在着多个不一样功能的按钮，这些按钮的形状大小都差很少，可是根据不一样的功能会有不一样的颜色或背景来加以区分。若是不进行结构和样式分离，咱们的CSS代码多是这样的

.btn-primary{ width:100px; height:50px; padding:5px 3px; background:#ccc; color:#000; } .btn-delete{ width:100px; height:50px; padding:5px 3px; background:red; color:#fff; } 

这两个或者可能更多的按钮拥有一些不一样的样式，可是它们同时拥有相同的大小样式等，咱们将其抽象的部分提取出来，结果以下：

.btn-primary{ width:100px; height:50px; padding:5px 3px; background:#ccc; color:#000; } .btn-delete{ width:100px; height:50px; padding:5px 3px; background:red; color:#fff; } 

这样提取公用的样式出来，而后按钮同时引用btn和primary等。这种作法除了减小重复的代码精简CSS以外，还有一个好处是复用性，若是须要增长其余额外的按钮，只须要编写不一样的样式，和btn配合使用便可。

（2）容器和内容分离咱们平时写代码必定写过这样代码

.content h3{ font-size:20px; color:#333; } 

这样的代码就是内容依赖于容器，没有分离的代码，也就是说h3的样式依赖于.content容器，若是其余地方要用到相同的样式，可是它的容器却不是.content，那你可能就是要再写一遍.something h3。因此OOCSS推荐分离容器和内容，能够修改为：

.title{ font-size:20px; color:#333; } 

关于这一点，我我的建议要分状况来看，像前面这个例子，它适合样式和容器分离。可是好比下面这种状况：

.menu li{ font-size:12px; } 

这种ul，li列表的样式，我觉的就按照咱们原先的作法就能够，不必定非得给一个类给li来设定样式，即

.menu-item{ font-size:12px; } 

这样页面的li标签须要引用menu-item类。

固然采用哪种方式更好我也不却肯定，我本身比较喜欢.menu li的写法，你们自行思考。

这就是OOCSS的两个基本原则，这里只是简单介绍OOCSS，各位若是有兴趣的话请自行Google查找相关资料。

SMACSS

SMACSS是什么呢，它的全称是Scalable and Modular Architecture for CSS。简单说就是可扩展和模块化的CSS架构。

SMACSS将样式分红5种类型：Base，Layout，Module，State，Theme，咱们简单来讲说每一种类型分别指什么。

一、Base

基础样式表，定义了基本的样式，咱们平时写CSS好比reset.css就是属于基础样式表，另外我认为清除浮动，一些动画也能够归类为基础样式。

二、Layout布局样式，用于实现网页的基本布局，搭起整个网页的基本骨架。

三、Module网页中不一样的区域有这个不一样的功能，这些功能是相对独立的，咱们能够称其为模块。模块是独立的，可重用的组件，它们不依赖于布局组件，能够安全的删除修改而不影响其余模块。

四、State

状态样式，一般和js一块儿配合使用，表示某个组件或功能不一样的状态，好比菜单选中状态，按钮不可用状态等。

关于状态样式，我我的以为要分状况进行讨论：

（1）不一样组件的同一状态的样式是同样的，好比头部的导航菜单的选中状态样式和侧栏的菜单选中状态样式是同样的，我认为这部分状态样式能够归类为State

（2）不一样组件的统一状态的样式是不同的，即两个地方的菜单虽然都是选中状态，可是他们却又不一样的选中样式，这部分样式不该该被认为是State类型，而是应该放在其组件对应的Module中。

五、Theme皮肤样式，对于可更换皮肤的站点来讲，这个是颇有必要的，分离告终构和皮肤，根据不一样的皮肤应用不一样的样式文件。

BEM

BEM是Block，Element，Modifier的缩写。下面分别来介绍一下这三个概念：

（1）Block：在BEM的理论中，一个网页是由block组成的，好比头部是个block，内容是block，logo也是block，一个block可能由几个子block组成。

（2）Element：element是block的一部分，具备某种功能，element依赖于block，好比在logo中，img是logo的一个element，在菜单中，菜单项是菜单的一个element

（3）Modifier：modifier是用来修饰block或者element的，它表示block或者element在外观或行为上的改变

咱们经过BEM命名法写样式以下：

.block{}

.block-element{}

.block-modifier{}

.block-element-modifier{}

BEM将页面解析为block和element，而后根据不一样的状态使用modifier来设置样式。

我对BEM的思想理解可能不到位，对BEM的见解主要是由两点：

（1）页面CSS模块化，每一个block就是一个模块，模块间相互独立

（2）多级的class命名，避免选择器的嵌套结构

关于CSS方法论

上面提到的这些CSS方法论，你们看了就会发现，它们其实有不少思想是相同的，好比：

一、选择器的嵌套的优化

二、CSS代码模块化

三、抽象CSS代码

…

这些方法论，咱们学习的时候，最重要的是去理解其思想，不必定非得照搬它的实现形式，多种方法结合使用。

我本身总结的方法

谈了这么多，下面来讲说我本身总结的写CSS代码的一些关键点。

一、写代码以前：从PSD文件出发

当咱们拿到设计师给的PSD时，首先不要急于写CSS代码，首先对整个页面进行分析，主要关注点是下面几个：

（1）页面分红了几个模块，哪些模块是公用的，常见的好比头部和底部，还有一些菜单栏等等

（2）分析每个模块都有什么样式，提取出公用的样式，注意公用样式是全局公用（整个页面公用）仍是局部公用（模块内公用），公用样式包括公用的状态样式，好比公用的选中状态，禁用状态等等。

二、开始写代码

根据对PSD文件的分析，咱们就能够开始着手写代码，我比较推荐SMACSS将样式分红不一样类型的作法：

（1）第一步是搭好页面的骨架，也就是base样式，layout样式。

（2）第二步就是依次实现不一样的模块，在这里我推荐BEM的命名思想，可是能够嵌套一到两层的选择器结构

三、优化代码

我相信当咱们完成基本的页面效果后，仍是会存在着一些重复的或者不够简洁的代码，这时候就是要去优化这些代码，主要是在提取重复代码，尽量地精简代码。

关于CSS代码的优化，我相信你们有不少本身的见解，欢迎交流和讨论！

原文地址： http://luopq.com/2016/01/05/css-optimize/