在平时项目中，大家可能有这样的体会，项目规模越大，css代码就会越多，css代码如果没有进行优化和维护，就会复杂加错，向一个乱了的毛线团，找不到开始的位置，这对于以后的维护工作来说，是不利的，你不晓得修改了这行代码，会不会对哪一行产生影响。

CSS代码为什么要重构呢？

它主要是有两个目的：
1、提高代码性能
a、提高页面加载速度，也就是说减小css文件的大小，提高页面加载速度，尽可能的利用http缓存；
b、提高css代码性能，不同的css代码，浏览器对其解析的速度不同，如何提高浏览器解析css戴拿的速度也是我能要考虑的，例如css选择器是从右侧开始查找。

2、提高代码可维护性
a、可重用
一个网站风格基本保持一致，首页上可能有很多模块样式相同，内容不同，内容从后台调取，那么css样式和html结构就可以重复使用，那么html通过负值即可，css代码就可以很多html模块使用同一部分的css样式；
b、可拓展
如果有新的需求增加模块，我们应该保证新增代码不会影响旧的代码和页面，并尽量减少新增，能重用尽量重用；
c、可修改
如果“万恶”的产品要求修改样式或者删除，如果当初没有进行很好的规划，那么你肯能就不会在原来的基础上“动刀”，因为你怕会影响其他，那有些无用的代码就会一直存在，影响性能。

那么css代码如何重构呢？
这些方式肯能是你平时工作中就不自觉这样做的方法，也有一些你不注意的地方，那么我们就一起总结一下吧！

1、将CSS样式单独写在单独的CSS文件中，在head标签中进行调用
a、内容样式分离，利于维护
b、减少html页面体积，加快加载速度
c、css文件可以被缓存、重用，维护成本降低

2、不使用@import，这种形式会影响css文件的加载速度

3、避免使用复杂的选择器，层级越少越好
选择器最好不要嵌套三层以上，尽量不用标签选择器在最末尾

<style>
div h1 a{}/*no*/
.header .logo .link{}/*yes*/
</style>
<div class="header">
    <h1 class="logo">
        <a href="url" class="link">珠峰培训</a>
    </h1>
</div>

4、精简页面样式文件，去掉无用样式
很多页面的样式融合到一起，这样一个页面引用了很多无用样式，导致文件过大，加载速度慢，浏览器也会进行很多的匹配，影响渲染时间，我们应该合理的合并当前页面样式，而不是多有的css文件放到一起，在这里也不是绝对的，如果是小型项目，利用缓存我们可以将文件合并在一起，如果是未知的大项目，我们就要一一的分割；

5、利用css的继承性
例如文字有关的css属性都是可继承的属性，字体的大小、样式等。

提高代码的可维护性

什么意思呢，比如说一个项目非常庞大，那么就需要很多前端人员来共同运行，如果代码的维护性高，修改起来也相对容易，并且不会破坏其他样式。

1、命名
命名是css选择器的第一步，整个团队的命名风格一致，这样其他人接收的时候才会更加的高效，这里给大家一些参考：

1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
四、注意事项::
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。

2、备注
备注得当，每一个模块的意义别人一读就明了；

3、重复样式封装，一次定义多次调用
将相同的样式形成单独的类再进行引用，更加利于维护

<style>
.clear:after{
    display:block;
    content:"";
    clear:both;
}
</style>

4、书写的顺序（是指演示的书写顺序）

<style>
.header{
    位置属性{position top z-index display float}
    盒子模型{width height padding margin}
    文字{font line-height}
    背景{background border}
    其他{animation transition}
</style>

总结自己的习惯，尽量成系统的去解析页面，从psd开始就有一个基本思想，不要随心的去理解效果图，命名的时候要注意，选择器的长度也不要太长哦，能重复使用的代码尽量封装到一个类中，可以多次调用。