|
|
写CSS的同学们往往会体会到，随着项目规模的增加，项目中的CSS代码也会越来越多，如果没有及时对
CSS代码进行维护，CSS代码会越来越多。CSS代码交错复杂，像一张庞大的蜘蛛网分布在网站的各个位
置，你不知道修改这行代码会有什么影响。所以，如果有修改或增加新功能时，开发人员往往不敢去删
除旧的冗余的代码，而保险地增加新代码，最终的坏处就是项目中的CSS会越来越多，最终陷入无底洞。
CSS代码重构的目的
我们写CSS代码时，不仅仅只是完成页面设计的效果，还应该让CSS代码易于管理，维护。我们对CSS代码
重构主要有两个目的：
提高代码性能
提高代码的可维护性
提高代码性能
提高CSS代码性能主要有两个点：
提高页面的加载性能提高页面的加载性能，简单说就是减小CSS文件的大小，提高页面的加载速度，尽可
以的利用http缓存。
提高CSS代码性能不同的CSS代码，浏览器对其解析的速度也是不一样的，如何提高浏览器解析CSS代码的
速度也是我们要考虑的。
提高代码的可维护性
提高CSS代码的可维护性，主要是体现在下面几点：
1.可重用性
一般来说，一个项目的整体设计风格是一致的，页面中肯定有几个风格一致，但有些许不同的模块。如何
在尽可能多地重用CSS代码，尽可能少地增加新代码，这是CSS代码中非常重要的一点。如果CSS代码的重
用性高，我们可能只需要写一些不一样的地方，对页面性能和可维护性、提高开发效率都有很大的帮助。
2.可扩展性
如果产品增加了某个功能，我们应该保证新增加的CSS代码，不会影响到旧的CSS代码和页面，并且尽可能
少地增加新代码，而重用旧代码。
3.可修改性
如果某个模块产品经理觉得要修改样式，或者要删掉它。如果没有规划好相应的CSS代码，过了一段时间之
后，开发人员可能已经不记得这段代码作用了几个地方，不敢修改或删除它，这样下去CSS代码也就越来越
多，影响了页面的性能，还造成了代码的复杂度。
CSS代码重构的基本方法
前面说到了CSS代码重构的目的。现在我们来说说，一些如何达到这些目的的一些基本方法，这些方法都是
易于理解，容易实施的一些手段，大家平时可能也不知不觉地在使用它。
提高CSS性能的手段
首先说说如何提高CSS性能。根据页面的加载性能和CSS代码性能，主要总结有下面几点：
1、尽量将样式写在单独的css文件里面，在head元素中引用
有时候为了图方便或者快速搞定功能，我们可能会直接将样式写在页面的style标签或者直接内联在元素上，
这样虽然简单方便，但是非常不利于日后的维护。将代码写成单独的css文件有几点好处：
（1）内容和样式分离，易于管理和维护；
（2）减少页面体积；
（3）css文件可以被缓存、重用，维护成本降低。
2、不使用@import
这条手段已经是众所周知，这里简单提一下，@import影响css文件的加载速度。
3、避免使用复杂的选择器，层级越少越好
有时候项目的模块越来越多，功能越来越复杂，我们写的CSS选择器会内套多层，越来越复杂。建议选择器
的嵌套，最好不要超过三层。比如：
.header .logo .text{}
可以优化成
.haeder .logo-text{}
简洁的选择器，不仅可以减少css文件大小，提高页面的加载性能，浏览器解析时也会更加高效，也会提高
开发人员的开发效率，降低了维护成本。
4、精简页面的样式文件，去掉不用的样式
很多时候，我们会把所有的样式文件合并成一个文件，但是这样有一个问题：很多其他页面的CSS，同时引
用到当前页面中，而当前页面并没有用到它们，这种情况会造成两个问题：
（1）样式文件偏大，影响加载速度。
（2）浏览器会进行多余的样式匹配，影响渲染时间。
正确的处理方法是，根据当前页面需要的css去合并，那些当前页面用到的CSS文件。
PS：合并成一个文件有一个优点：样式文件会被浏览器缓存，进入到其他页面样式文件不用再去下载。
这条规则应根据场景来区别对待。如果是大项目，应该合并成不同的样式文件；如果是简单的项目，建议
合并成一个文件即可；如果无法确认项目规模，建议分开成不同的样式文件，日后要合并也比较方便。
5、利用CSS继承减少代码量
我们知道有一部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式
，这个也是提高性能的行之有效的方法。
常见的可以继承的属性。比如：color，font-size，font-family等等
不可继承的。比如：position，display，float等
大家可以查看CSS参考手册
提高可维护性的方法
提高CSS代码的可维护性，简单的说就是要让开发人员易于理解CSS代码，容易去修改它，不会破坏原有
的功能。下面说说一些常用的手段。
1、命名与备注
命名是提高代码可读性的第一步，也是极其重要的一步。很多人都有这样的体会：命名是写代码中最让
程序员头疼的事情之一。尤其是对母语非英语的开发人员来说，要找一个合适贴切的名字并不容易。提
高自己命名的能力，可以多看看别人的代码。
下面是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
2、提取重复样式
这一个方法很容易理解，简单说就是提取相同的样式，成为一个单独的类再引用。这样不仅可以精简CS
S文件大小，而且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，尽可能的提取重复的东西。
3、书写顺序
这个书写顺序指的是各个样式的书写顺序。下面是推荐的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主要有两个原则：
1、结构和样式分离
我们平时一定遇到过这种情况，比如一个页面存在着多个不同功能的按钮，这些按钮的形状大小都差不多，
但是根据不同的功能会有不同的颜色，或背景来加以区分。如果不进行结构和样式分离，我们的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{
width:100px;
height:50px;
padding:5px 3px;
}
.primary{
background:red;
color:#fff;
}
.delete{
background:red;
color:#fff;
}
这样提取公用的样式出来，然后按钮同时引用btn和primary等。这种做法除了减少重复的代码，精简CSS
之外，还有一个好处是复用性。如果需要增加其他额外的按钮，只需要编写不同的样式，和btn配合使用
即可。
|
|
/1 
关于我们
发表于 2018-6-20 16:48:30
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
微信
收藏
置顶服务
换色服务
楼主
