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

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

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

标签：样式,css,代码

当然，每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！

1.合理的使用重置

首先，很认真的告诉你，总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset 或者你自己编写的重置代码，只要使用就对了。

它能很简单的移除所有元素的填充（padding）和边距（margin）：

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; }

Eric Meyer Reset 和 YUI Reset 都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用重置样式表，而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它的重置样式表，建立属于自己的重置样式表。

噢，请停止使用：

* { margin: 0; padding: 0; }

花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。

2.属性繁多时进行排序

一个小的测试，这个例子就是要让你思考如何更快的找到右边距属性：

Example#1

div#header h1 {
    z-index: 101;
    color: #000;
    position: relative;
    line-height: 24px;
    margin-right: 48px;
    border-bottom: 1px solid #dedede;
    font-size: 18px;
}

Example#2

div#header h1 {
    border-bottom: 1px solid #dedede;
    color: #000;
    font-size: 18px;
    line-height: 24px;
    margin-right: 48px;
    position: relative;
    z-index: 101;
}

你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS，将帮助你节省花费在寻找一个特殊属性的时间。

我知道一些人用这样的方法去组织代码，其他人又用另一种方法去组织，但是在我的公司，我们协商一致做出决定，所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表，我每一次都会退缩。

2 下一页

投稿

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

猜你喜欢