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

1、 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