网站优化之优雅整洁的CSS代码
整洁优雅的代码读起来让人赏心悦目,同时在重构和维护的过程中也你能让人得心应手。
优雅的代码能够体现一个 程序员的素质以及架构考虑方面的技巧。
1 文件组织
全局样式,如body、p、a以及字体、背景色等,这里针对的是全局的html标签的样式的定义。
类样式,如.Pagetitle,.Warning,对于站点页面中多处出现的元素的抽象,如一个警告文本这样的。
<!--HTML--><p class="warning">出错信息提示</p>
布局样式,如#container、#header、#content等,主要是页面的主体布局框架的元素的一些样式,对于布局而言,由于较少变化,所以尽量使用ID来标识这些元素。如
<div id="container">
<div id="header">
<div id="navigation"></div>
</div>
<div id="content"></div>
</div>
#container { }
#container #header{ }
#container #header #navigation { }
页面样式,具体一个页面元素的样式。由于布局已经确定了,剩下到每个单独的页面了,每个单独的页面由于有自己的一些独特呈现的需要,所以需要为每个页面的指定一个样式
2 具体的一些操作细则
全局样式使用reset.Css,可以参考Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripol
使用缩略的css样式,一方面节约空间,同时可读性也好一些。
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
.header {
background: #fff url(image.gif) no-repeat top left
}
制作一个圆角边框
[caption id="" align="aligncenter" width="380" caption="css圆角边框"][/caption]
类名一定要有语义,一定要能够抽象适应未来的变化
建议改成warning或者其它什么的,如果那天需要变成了其它颜色呢?
让字体交给css来处理吧,如大小写这样的东西,将变化交给css去完成。
[caption id="" align="aligncenter" width="490" caption="css控制文本大小写 "][/caption]
参考文档:
1 http://www.smashingmagazine.com/2008/11/12/12-principles-for-keeping-your-code-clean/
2 http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/
超级有用的CSS文章和资源
工欲善其事必先利其器,借鉴一些别人在前端css方面的建议和工具,对于我们自己会有很大的帮助。
CSS在线编辑器
HMTL TIDY
53 CSS-Techniques You Couldn’t Live Without
20 Useful CSS Tips For Beginners
5 Ways to Instantly Write Better CSS
Using CSS to Do Anything: 50+ Creative Examples & Tutorials
101 CSS Tips, Tutorials and Examples
CSS Code Snippets : 15 Wicked Tricks
15 CSS Tricks That Must be Learned
8 CSS tips for better linking
8 Premium ...