CSS架构之初始化

CSS架构

一种技术成熟的标志，我认为就是模式的诞生，CSS也是如此。学过两天Web的朋友都用过或至少听说过CSS。CSS是Cascade Style Sheets的缩写，翻译过来叫层叠样式表，CSS诞生的时间很早，但因为各家浏览器对它的兼容和支持不一致，加之早期可用的样式也比较单一，所以不太能引起设计师们的注意，到我开始学网页的时候，CSS还是个挺前卫的概念，当时用table布局还很流行。关于table还是div的问题，有时间再谈。

后来CSS和浏览器，以及设计师们的观念都在发展，行业中又陆续出现了CMS、Ajax等先进应用，Web也开始借鉴软件工程的的概念，结构、表现和行为分离，CSS就是表现，就好比人的五官相貌、穿着打扮一样，而所谓CSS架构，就好比是时下流行的那么一种审美观，春春、黑镜框、非主流等等，好处显而易见，按照大多数人认可的标准去实现，第一把握，第二便捷。曾在Head First设计模式里看到一句话，设计模式就是经验的重用。重用是重复使用，不是拿什么东西当宝的意思。

CSS由于本身能力有限，发展也比较缓慢，所以框架或模式不想软件行业那么多，常见的有960gs、blueprint等，今天简单介绍一下CSS重置，叫初始化也行。选了《CSS权威指南》作者，著名CSS专家Eric Meyer的建议。

CSS Reset

就像体育比赛一样，无论是田径，都要有一个初始状态，运动员在同一条起跑线上，同一时间起跑，浏览器也是如此，对CSS很多属性的解析方式都不同，为了消除歧义，我们就需要在一开始统一口径。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


标签初始化

Eric给的建议不长，我们一坨一坨的看，你可能用过或见过 * { margin: 0; padding: 0; }的写法，意思差不多，因为上面几乎包含的所有标签，这样写的目的是提高执行的效率，如果你接触过SQL数据库的话，就很容易理解了。此外边框、字体和垂直对齐都是为了消除不同浏览器之间的歧义。

HTML5新标签支持

下面是HTML5新增标签的初始化，只有一句display: block; HTML5新增了许多语义化标签，但旧版本浏览器不认识，所以在使用之前需要指定一个最基本的属性，那就是元素类型，块级元素还是内联元素，浏览器对于其支持的元素都有自定义的样式，比如li前面带原点、p上下有边距等等，div也有，就是display: block;

注: 非IE浏览器支持为未定义标签应用样式，IE只有最新的IE9支持，所以这条对于IE8及以前版本是无效的，但IE每个版本都支持为JS创建的陌生元素应用样式，所以你可以使用JS动态创建新标签来实现IE的HTML5标签支持。

无单位line-height

body这里给了一个line-height: 1; 并没有写错，line-height接受无单位值，1就表示1倍高，和1em有区别。1em也是相对的计算值，并且会一次性传递给所有后代，body给了1em的行高的话，那么所有body的后代的行高都是1em，而无单位的1，则是根据后代的font-size来计算，该多少就是多少。

移除列表头

list-style: none;没什么好说的了，移除列表头的小圆点或数字，但并不是说不用，而是默认全部移除，然后在你需要的时候再添加，因为大部分情况下，这个默认的样式并不是很受欢迎。

去除引号

blockquote和q用于表示引用的内容，quotes用于设置包含引用内容的引号，也就是说，应用了quotes样式的<blockquote>可以自动添加引号，会不会觉得有点奇怪呢？所以这里建议去掉。

:before和:after是伪类，允许开发人员用CSS在元素两头添加内容，这个样式尚存争议，因为有的人坚持CSS只负责表现而不应该改变内容，我也赞成这种说法，这里设置两次，分别是”和none；想必也是为了浏览器兼容问题。

重置表格

<table>的cellspacing和cellpadding可以用css来表示，就是上面那两种写法，但colspan和rowspan没有对应的CSS，因为这两个属性是合并表格，会改变文档结构，应该由HTML来实现而不是CSS。

总结

CSS在设计时有很大的自由度，所以也就有很大的个人风格，你可能纠结于两种相对的实现方式而不知道哪一种才是最佳实践，当然会有前辈专家总结的经验好过你自己的摸索，但并不是绝对的，多建立自己的风格，多掌握一些设计理念和技巧，而不是摘录现成的代码，否则的话你永远都是个新手。