CSS技巧：五个方面促进你写出更加专业的CSS代码 |
|
每个人都 可以编写CSS代码，甚至你现在已经让它为你的 名目工作了 。然而CSS还 可以更好吗？用这五个方面改良你的CSS，会让你显得更加专业，也能使代码有好！ 一、重置 首先，很认真的告诉你，总是要重置某些分类 。无论你是 使用 Eric Meyer Reset、YUI Reset，或者你自己编写的重置代码， 惟独 使用就对了 。 它能很 方便的移除所有元素的填充(padding)和边距(margin)： Eric Meyer Reset和YUI Reset都是十分 壮大的，然而关于我而言，它们走的太远了 。我感觉你最后需求重置 所有， 而后再一次定义所有元素的属性 。这便是为何Eric Meyer推举更有效的 使用(重置 款式表)，而你不要只不过 使用他的重置 款式表，将它拖放到你的 名目中 。调整它(的重置 款式表)， 构建属于自己的重置 款式表 。噢，请 停留 使用： * { margin: 0; padding: 0; } 花更多的 工夫去制作它，当你移除了填充(padding)你认为单选按钮会 产生什么 变迁？表单元素有时 可以做些时尚的 事件，所以最有效的 模式便是将他们独立 。 二、排序 一个小的测试：这个例子便是要让你思量如何更快的找到右边距属性？ 你不能告诉我Example#2不能更快的找到右边距属性 。依据字母排序你的元素属性 。 统一的 缔造你的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*****/定义 其余的 取舍器 。通过注解和归类 类似元素的分组，将更快的找到你想要的 。四、 统一性 无论你决定 使用什么 模式去编写代码， 维持 统一 。我已经对所有放在1行VS多行的CSS编写编写 模式的 争吵感到乏味和疲乏 。这是不需求 辩论的 。每个人都有自己的观点，所以 取舍一种你喜爱的工作 模式，并在所有的 款式表中 维持 统一 。 就我个人而言，我将 使用两者 联合的 模式 。假如一个 取舍器超过了3个属性，我将截断它采纳多行的 模式编写 。 所以找到你喜爱的工作 模式 而后 维持 统一 。 五、从正确的地方开始 在 实现标记语言之前不要去尝试 凑近你的 款式表 。 当我 预备分割一张网页的时候， 缔造CSS文件之前，我需求预览而且标记body开标签到body的闭合标签中间的所有文档 。我不会增加额外的DIV ,ID,或者类 取舍器 。我将会增加一些普通的DIV，就 如同hearder、content、footer.由于我晓得这些东西是 事实存在的 。 通过先标记文档，你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译) 。 利用CSS子 取舍器指定子元素；不要只不过机械的给元素增加类或者ID 取舍器 。记住：没有一个良好的 格局化文档(或者标记 构造)CSS是无价格的 。 |
