如何提高CSS的可维护性

为了排版的正确，请查看我的原文：如何提高CSS的可维护性
为CSS正确的命名可以提高代码的可读性，便于后期查找修改。
下面记录一些常用的手段：

命名与备注

命名是提高代码可读性的第一步，也是最重要的一步。我接触css的时候命名的问题困扰了我很久，尤其是我这种对英语一窍不通的人来说，当时我就是胡乱命名的，后来看多了别人的代码，才知道这东西是可以统一化的。
下面是一些常规的命名（来自别人的blog，摘抄下来方便平时多看看）：

头：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开头加入注释导航等。这个方法我是在看国外一个WordPress模板的css的时候看到的，我就在某个项目中使用了一次，效果还是不错的。

/**
 * Table of Contents:
 * A 首页
     * 1.0 - Body
     * 2.0 - 头部
     * 3.0 - 导航区
     * 4.0 - 品牌区
     * 5.0 - 最新评论区
     * 6.0 - 右侧搜索区
     * 7.0 - 右侧热门商店
     * 8.0 - 热门折扣卷
     * 9.0 - Media Queries
     * 10.0- Footer
     * 11.0- Comments
     * 12.0- Coupon-info列表页面
     * 13.0- Coupon-info内容页面
*//* A 首页  *//* 1.0 Body */body {    background: #f3f3f3;
}ul,li {    margin: 0;    padding: 0;    list-style-type: none;
}.boder {    margin-top: 15px;    border: 1px solid #E2E2E2;    background: white;    margin-bottom: 15px;
}.max-clear {    clear: both;
}/* 2.0 头部区开始*/.logo {    float: left;
}.banner {    margin-top: 5px;    float: right;
}#main {    clear: both;
}/* 头部区结束*/

提取重复样式

这个方法我也经常见过，但每次真正做东西的时候，就忘记了这茬。经常见到的是在一个div里有多个类，如：

<div class="title black-border bold">Ruofei Blog</div><style type="text/css">.title{padding: 10px 20px;width: 10%;text-align: center;}.black-border{border: 1px #000 solid;}.bold{font-weight: bold;}</style>

效果如图：

其中title类是主要定义这个div的边距位置宽度，black-border类是专门定义一个黑色的像素的实线边框，bold类是加粗。将这三个类分离开后，以后需要用到加粗的熟悉时，直接在div中加上bold类，需要加黑色实线边框的时候直接加上black-border类即可，不需要再css样式中重复写这些属性，大大的减少了css的代码量。例如：

<div class="title black-border bold">Ruofei Blog</div><br/>[站外图片上传中……(3)]<style type="text/css">.title{padding: 10px 20px;padding: 10px 20px;width: 10%;text-align: center;}.black-border{border: 1px #000 solid;}.bold{font-weight: bold;}</style>

效果如下：

直接给img标签加了一个black-border类，就得到了一个和上面div一样的边框效果，而我并没有在css中单独为这个img标签定义边框属性。

我知道这个对大家来说是很正常的事情，但对我这种刚接触前端的小白来说，真心很神奇！

书写顺序

参考的文章中提到了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分离成一个类，后面即可重复调用，。

<div class="title black-border font-bold">Ruofei Blog</div><br/>[站外图片上传中……(4)]<style type="text/css">.title{padding: 10px 20px;padding: 10px 20px;width: 10%;text-align: center;}.black-border{border: 2px #000 solid;}.font-bold{font-family: "PT Mono", Consolas, Monaco, Menlo, monospace;font-weight: bold;}</style>

我对上面的那段代码修改了下，title类专门控制位置信息，black-border类控制边框样式，font-bold类控制字体信息。

但我写完后发现，按照这种方法分类确实可以，但还是得考虑css重复性的问题，比如我一个地方的文字需要加粗，但不需要这个字体，所以就不能使用font-bold类。

总结，还是得在动手前想清楚页面中，重复的内容是哪些，将重复的部分提取出来，单独写成一个类，尽管这个类可能只是控制一个文字的字体大小。

参考文章总结的方法

1、写代码之前：从PSD文件出发
当我们拿到设计师给的PSD时，首先不要急于写CSS代码，首先对整个页面进行分析，主要关注点是下面几个：
（1）页面分成了几个模块，哪些模块是公用的，常见的比如头部和底部，还有一些菜单栏等等
（2）分析每一个模块都有什么样式，提取出公用的样式，注意公用样式是全局公用（整个页面公用）还是局部公用（模块内公用），公用样式包括公用的状态样式，比如公用的选中状态，禁用状态等等。

2、开始写代码
根据对PSD文件的分析，我们就可以开始着手写代码，我比较推荐SMACSS将样式分成不同类型的做法：
（1）第一步是搭好页面的骨架，也就是base样式，layout样式。
（2）第二步就是依次实现不同的模块，在这里我推荐BEM的命名思想，但是可以嵌套一到两层的选择器结构

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

部分内容参考：CSS代码重构与优化之路

作者：若飞丶
链接：https://www.jianshu.com/p/acd78a8c5d69