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
...
- 为网站中用到的颜色取个好名字,同样的,我也是借鉴了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 - 添加圆角代码
@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;
} - 抽象公共样式,分离出单独页面样式文件,最终的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的方便,更重要的提高了前台的可维护性。
参考: