位置：首页>> 网络编程>> 网页设计>> 五个小窍门帮你写出更好的CSS代码（2）

五个小窍门帮你写出更好的CSS代码（2）

作者：ximicc　来源：ximicc博客　发布时间：2009-06-09 12:42:00　

标签：样式,css,代码

3.花点时间对CSS结构进行组织

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

/*****Reset*****/
移除元素的填充（padding）和边距（margin）；

/*****Basic Elements*****/
定义基本元素的样式: body, h1-h6, ul, ol, a, p 等；

/*****Generic Classes*****/
定义简单的风格，好像浮动的某一侧, 移除元素的下边距, 等当然，它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的；

/*****Basic Layout*****/
定义基本的模板: header, footer等. 帮助定义网页布局的基本元素；

/*****Header*****/
定义所有Hearder元素；

/*****Content*****/
定义所有内容框内的元素；

/*****Footer*****/
定义所有Footer的元素；

/*****Etc*****/
定义其他的选择器。

通过注解和归类相似元素的分组，将更快的找到你想要的。

4.至少为自己保持某些一致性

无论你决定使用什么方式去编写代码，保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点，所以选择一种你喜欢的工作方式，并在所有的样式表中保持一致。

就我个人而言，我将使用两者结合的方式。如果一个选择器超过了3个属性，我将截断它采用多行的方式编写。

div#header { float: left; width: 100％; }

div#header div.column {
    border-right: 1px solid #ccc;
    float: rightright;
    margin-right: 50px;
    padding: 10px;
    width: 300px;
}

div#header h1 { float: left; position: relative; width: 250px; }

所以找到你喜欢的工作方式然后保持一致。

5.从正确的地方开始

在完成标记语言之前不要去尝试靠近你的样式表。

当我准备分割一张网页的时候，创建CSS文件之前，我需要预览并且标记Body开标签到Body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV，就好像hearder、content、footer，因为我知道这些东西是现实存在的。

利用CSS子选择器指定子元素；不要只是机械的给元素添加类或者ID选择器。记住：没有一个良好的格式化文档（或者标记结构）CSS是无价值的。

第一页上一页 1

投稿

五个小窍门帮你写出更好的CSS代码（2）

猜你喜欢