70个专家的CSS编码经验谈一：CSS编码流程

为什么80%的码农都做不了架构师？>>>   

一、 CSS编码的(准备工作)流程

关键词(Keyword)：CSS,CSS工作流程,CSS经验

原文为：" 70 Expert Ideas For Better CSS Coding "

CSS并不是一直都那么容易处理的。CSS完全依赖于你的使用技巧和经验，尤其是当你无法确定哪些样式选择器已经应用到你的文档元素时，CSS编码就会变成一个噩梦。其实，一种降低代码复杂性的简单方法，就是使用不太常用的CSS属性来创建适用性比较强且语义正确的标记。

我们将在以下内容中列出，专家已经使用过的最有用的CSS技巧、小提示、观点、方法、技术和解决方案。这里还将包括一些你在日常的项目开发中经常用到的，但是你需要的时候又比较难以找到的一些基本技巧。

这里所列出来的是超过70个专家在CSS方面的观点，可以改善你的CSS编码效率。如果你愿意，可以(点击)查阅每段结尾提到的参考资料或相关文章列表。

英文原文感谢的言辞这里省略，Jackson在这里还是非常感谢这些共享经验的专家们。

1.1 工作流程：起步阶段

当你迎来了一个设计, 应该从一个空白内容页开始。
“（这个空白内容页应该）包括你的页头、导航条、内容示例和页脚。然后开始添加你的HTML标记, 最后添加你的CSS样式,这样工作起来会更好更合理。” [CSSing]
Jackson的ps:：这是开始页面建立的初始流程，就不用多解释了。

使用一个主样式表。
“我看到一个非常常见的错误在于，很多初学者和中级学者在使用CSS样式表的时候, 没有将浏览器默认的样式去掉。这将导致你的设计在不同的浏览器中会出现不一致的效果。

并最终导致设计师们埋怨浏览器（的兼容性）。这是个错误的埋怨。因此，当你对一个网站做任何编辑工作之前，你应该重置（主）样式表。”（你可以到以下作者博客查看重设方法） [Master Stylesheet: The Most Useful CSS Technique(主样式表: 最有用的CSS技术)], [Ryan Parr] 图1CSS主样式表技巧示例

Jackson的ps：这个技巧很多朋友肯定会忘记设置，你会发现当你没有做重设，会致使你的CSS代码特别是需要精确到像素的属性值在各个浏览器中失效，然后出现位置不精确的问题。我们真得多多注意！而且在原文中Ryan Parr还提到我们需要将一些排版的规则整理成全局的类样式，这样就可以重复使用而不需要到处定义，还是看看原文吧。

图1CSS主样式表技巧示例 

务必重置你的CSS样式
你可以通过设置某个属性的默认值来忽略该属性需要指定的属性值。有些人喜欢通过 Global white space reset全局（样式）重设，在样式表的开头将所有（页面标签）元素的margin和padding属性值都清零。（你可以到以下作者博客查看重设方法）[Roger Johansson]

Jackson的ps：如果你想布局DIV的可以紧贴住浏览器呈现出来，这条技巧非常有用。

保存（收藏）一些有用的CSS类库
这非常有利于(页面样式的)调试，但是应该避免在发布版本中使用(区分开标签和语义描述)。你现在能够使用多个类名了(就象这样 <p class="floatLeft alignLeft width75">...</p>)，因此你可以利用它们来调试你的(页面)标签。（你可以到以下作者博客查看相关内容出处）[Richard K. Miller] 图2CSS类库表示例

Jackson的ps：这条技巧的意思是，我们可以使用一些有布局语义的类名独立命名每一个属性，当你调用的时候可以将这些有语义的类名重复使用。

图2CSS类库表示例

(以下为更多的参考文章)Eric Meyer's Global Reset(Eric Meyer写的全局重置)，Christian Montoya's initial CSS file(Christian Montoya写的初始化CSS文件)，Mike Rundle's initial CSS file(Mike Rundle写的初始化CSS文件)，Ping Mag's initial CSS file(Ping Mag写的初始化CSS文件)。

Jackson尽量翻译得与原来意思一致，基本上我都会从专家原文去揣摩一些原文的意思，再结合原文的代码和自己的经验翻译出来的。肯定会有错漏的地方，希望各位朋友指正，让大家共同进步，谢谢！下次将介绍，70个专家的CSS编码经验谈二：(如何)组织好你的CSS代码。

本文转载自OECP社区http://www.oecp.cn/hi/jackson/blog/316

转载于:https://my.oschina.net/oecp/blog/28270