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配合使用即可。

（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查找相关资料。

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!