高效整洁CSS代码五原则

一、CSS重置

html,body,div,h1,h2,h3,h4,h5,
h6,ul,ol,dl,li,dt,dd,p,blockquote,
pre,form,fieldset,table,th,td{margin:0;padding:0;}

这些就够了,不需要用*了,*增大下载时间

二、CSS属性的排序

按着英文字母的排序,这样帮助你节省花费在寻找一个特殊属性的时间

三、CSS样式的组织

你应该组织你的样式表以致相关的内容靠在一起,更简单的找到想要的。使用更有效的注解。举个例子,这是我如何构造我的层叠样式表:

/*****Reset*****/
移除元素的填充(padding)和边距(margin)。
/*****BasicElements*****/
定义基本元素的样式:body,h1-h6,ul,ol,a,p,等。
/*****GenericClasses*****/
定义简单的风格,好像浮动的某一侧,移除元素的下边距, 等当然,它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。
/*****BasicLayout*****/
定义基本的模板:header,footer等.帮助定义网页布局的基本元素
/*****Header*****/
定义所有Hearder元素
/*****Content*****/
定义所有内容框内的元素
/*****Footer*****/
定义所有Footer的元素
/*****Etc*****/

四、保持一致性

不要无意义的去讨论到底一个选择器的所有属性写在一行,还是每个属性写一行比较好。你自己觉得ok就好。

五、从正确的地方开始

在完成标记语言之前不要去尝试靠近你的样式表。
当我准备分割一张网页的时候,创建CSS文件之前,我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV,ID,或者类选择器。我将会添加一些一般的DIV,就好像hearder、content、footer.因为我知道这些东西是现实存在的。利用CSS子选择器指定子元素;不要只是机械的给元素添加类或者ID选择器。记住:没有一个良好的格式化文档(或者标记结构)CSS是无价值的。

本文由Seo先生博客发布,固定连接地址:https://seosir.cc/395.html?转载请注明。

讨论区