Welcome, Old Sport!

优化CSS代码的艺术与科学

by ilikecss ON 2011/08/17 5749

使用CSS的乐趣之一就是你想要的任何方式,基本上都可以编写代码。肯定有一些你必须遵循(如使用括号)的基本规则,但在大多数情况下,你可以格式化你的CSS代码。您可以使用这个巨大的灵活性,以改善他们在工作时的效率。

以下是一则普通的样式

selector-01 {
	background-color: #333;
	border: 3px solid #EEE;
	color: #CCC;
}
selector-02 {
	clear: both;
	float: left;
	width: 50px;
}
selector-03 {
	padding: 10px;
	margin: 10px;
	z-index: 99;
}

这种写法优点是方便预览,但缺点是”长”而且空格太多造成不必要的容量。

下面请参照CSS大师Chris Coyier效率和简洁的单行格式:

selector-01 { background-color: #333; border: 3px solid #EEE; color: #CCC; }
selector-02 { clear: both; float: left; width: 50px; }
selector-03 { padding: 10px; margin: 10px; z-index: 99; }

之前15行的代码一下子减少为3行,单行书写的好处是大型网站的CSS书写不会太长,减少大小。缺点是如果你没有写注释,那将会是天花乱坠而且有的行目太长了。

添加视觉质感

要让单行式样在视觉上更加美观?最常见的方法就是多添加注释。

/* == HEADER == */
#header { background: url(images/header-bg.jpg) repeat-x; }
#header .inside { height: 136px; }
#header h1 { margin: 0; }
#header h1 a { display: block; width: 466px; height: 145px; text-indent: -9999px; position: absolute; top: 0px; left: -18px; background: url(images/logo.png) no-repeat; }
.description { position: absolute; left: 455px; top: 51px; color: #dfe0e1; }

/* == CONTENT == */
#main-content { width: 650px; float: left; clear: none; margin: -35px 0 0 0; }
.post { background: rgba(255,255,255,0.1); padding: 15px; position: relative; margin: 0 0 10px 0; }
body.single .post { margin: 0 0 25px 0; }
.post-inside { border: 1px solid white; background: url(images/post-footer.png) repeat-x bottom left; padding-bottom: 16px; }

/* == DETAILS == */
.meta { background: #143855; color: white; border-top: 1px solid white; padding: 3px 15px; }
.entry { background: white; padding: 15px; }
.entry h3 { padding: 5px 0; margin: 30px 0 15px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }

哪怕只是一个注释在不同群体之间的空白行也会更容易使阅读和编辑。

CSS代码优化更是一门艺术而不是科学..

在花费较多时间在CSS样式表上的网页设计师们,优化代码是一种生活方式,每个作者的代码本身具有独特风格。代码优化更是一门艺术而不是科学,一些具有某些癖好的设计师将CSS发挥到了极致。

再来一则小例子

html { background-color: #b5b5ab; margin: 0; padding: 0; }
body { background: transparent url(images/bg1.png) repeat 0 0; color: #4c4c42; font: 16px/1.4 'Lucida Grande', Helvetica, Arial, sans-serif; margin: 0; padding: 0 0 5px 0; }
#wrap { background-color: #969688; margin: 0 auto; padding: 0; position: relative; width: 960px; }

以上代码在书写上已经足够了,当有数百条样式需要书写时未免有些乏味枯燥,因此我们可以再书写成一种格式:

html { 
	background-color: #b5b5ab;
	margin: 0; padding: 0; 
	}
body {
	background: transparent url(images/bg1.png) repeat 0 0;
	font: 16px/1.4 'Lucida Grande', Helvetica, Arial, sans-serif;
	margin: 0; padding: 0 0 5px 0; color: #4c4c42; 
	}
#wrap { 
	background-color: #969688;
	margin: 0 auto; padding: 0; width: 960px;
	position: relative;
	}

以上的样式有什么区别看出来了吗?按种类区分单行话。还可以进一步优化:

html { background-color: #b5b5ab; margin: 0; padding: 0; }
body {
	background: transparent url(images/bg1.png) repeat 0 0;
	font: 16px/1.4 'Lucida Grande', Helvetica, Arial, sans-serif;
	margin: 0; padding: 0 0 5px 0; color: #4c4c42; 
	}
	#wrap { 
		background-color: #969688; position: relative;
		margin: 0 auto; padding: 0; width: 960px;
		}

将分类后的样式再次划分层次,和我们写Div时一样,这样在整个布局里又有了层次感,有些代码里有特别的样式,我们也加以分层:

#content {
	margin: 50px 0 0 15px; padding: 0;
	background-color: #eee; color: #333;
	float: left; clear: none; width: 600px;
	border: 1px solid #E7E9F6; 
		-webkit-border-radius: 10px;
		-khtml-border-radius: 10px;	
		-moz-border-radius: 10px;
	border-radius: 10px;
	}

这里的CSS样式结构分层是:

  • margin and padding
  • background-color and color
  • float, clear, and width

总结

有无数的方式优化CSS代码,但在优化时别忘了其科学性,作为一名设计师因该有属于自己的一套层叠式样式表。

3条评论
  1. #1

    墨枫说道:

    很不错的优化思想,看来我也得弄一套出来~~~~

  2. #2

    lz什么的最好了说道:

    一直在第一和第二之间徘徊。。。

    • 我之前一直是第一种的,很规矩的做法,但现在我开始写单行了,的确行数少不少呢




TOP