CSS重构

　　最近在做一个新的小应用，前端基本上是我做的，码了大概600行的css，清楚并痛恨css管理的不易。主要有这么几个方面的问题：

　　1、该用"空格"还是该用">"，用>更严谨，不容易出现因为class重名导致的问题，但问题是不易修改。比如加在外面加一层container，那这一块的css都要加上这个container。用"空格"则相反，容易调整结构，但对于一些通用的class名称，比如name等，要么只用一个name，要么就给name都加上前缀。

　　2、圆角问题。有些地方圆角是4，而有些地方是8，这样你要么直接用round4，round8来命名，要么就直接把圆角的css写进container的css里边。不管哪一种，看起来都是特别别扭的。

　　3、一般习惯用同一个css文件，但一个css文件就会显得特别大，尤其是到后来的时候，这个css文件就会变得难以维护，因为你已经很难找到你该插入的位置了。　

　　所以，在坚持着写完这些css之后，就希望用Sass或者LESS对我的css进行重构。同时也是第一次使用，这也是对Sass之类的一个学习。

　　重构的第一步是决定用Sass还是用LESS，大致翻看了Sass和LESS的文档之后，以及其他人的一些比较^[1]之后，决定使用Sass，原因是它跟Ruby更近。在选定了Sass之后，就是到底用Sass还是用Scss的问题了。Sass采用Haml的语法，采用缩进代替{}，而Scss是css3的超集，兼容现有的css格式，并且跟LESS格式很像。我采用的是Scss。

　　下面就是从CSS到Scss的转换了。因为没有经验，我借鉴了bootstrap的结构。

scss

variables.scss

mixins.scss

global.scss

application.scss

...

1. 为网站中用到的颜色取个好名字，同样的，我也是借鉴了bootstrap的variaables.less
   

   // Links
   $linkColor:         #0b4aab;
   $linkColorHover:    darken($linkColor, 15);
   
   
   // Grays
   $black:             #000;
   $grayDark:          lighten($black, 25%);         //404040
   $gray:              lighten($black, 50%);         //808080
   $grayLight:         lighten($black, 80.5%);      //cdcdcd     //default for 75
   $grayLighter:       lighten($black, 93.5%);     //eee        //default for 90

2. 添加圆角代码
   

   @mixin round{
       border:1px solid #DDD;
       @include border-radius;
       @include box-shadow;
   }
   
   // Border Radius
   @mixin border-radius($radius: 4px) {
     -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
             border-radius: $radius;
   }
   
   // Drop shadows
   @mixin box-shadow($shadow: 0 1px 1px rgba(0,0,0,.25)) {
     -webkit-box-shadow: $shadow;
        -moz-box-shadow: $shadow;
             box-shadow: $shadow;
   }

3. 抽象公共样式，分离出单独页面样式文件，最终的main.scss只含有下面的代码
   

   @import "variables";
   //@import "mixins";
   @import "global";
   @import "application";
   @import "choose_courses";
   @import "course_index";
   @import "course_show";
   @import "friends";
   @import "session_new";
   @import "info";
   @import "activities"

下面说几点体会。

1、在单独的scss文件中也需要包含@import "variables"，否则找不到颜色变量

2、css的嵌套不宜太深，如果太深了，我觉得一般是html结构有问题。

3、巧用Sass Script能为你节省很多代码。比如:

		@each $item in "mine", "friends", "activities"{
			li.#{$item}{
				a{
					background: url("/images/#{$item}_normal.png") no-repeat left center; 
				}
				&.active a, a:hover{
					background: url("/images/#{$item}_active.png") no-repeat left center;
				}
			}
		}

　　　4、重构css的根本就在于优化html的结构，这也是前台工作最核心的地方，一个好的html的结构带来的不仅仅是css的清晰，js的方便，更重要的提高了前台的可维护性。

　　参考：

　　1、使用LESS或Sass重构CSS代码