精通css（1）-规范

之前学过css，但没有深入研究，现在在做一些web的东西，有时遇到布局的问题要弄很久，所以本着严肃认真的态度，还是要把css好好再学一遍！

传说，在css没有出现之前，html的结构是非常混乱的，因为它将文档表现部分与内容结合在一起，看起来非常糟糕，所幸的是css的出现解决了这一问题。

既然css的出现带来了更好的代码结构，那我们在书写的时候就不得不考虑一下规范问题，让结构更加清晰。下面是一些通用规范：

1.让标记更有意义

有意义的标记更容易让人理解，包括语义化的标签，通俗易懂的变量命名等，这在团队开发时尤为重要。

2.ID和类名

类应用于概念上相似的元素，ID应用于不同的唯一元素。所以，不到万不得已的情况下，最好不要用id，除非它在页面真的只出现一次。

另外，给id和class命名时，要尽可能保持名称与表现方式无关。例如现在有一个红色的警告框，很显然我们可以给他一个class="warning"，而不是class="red-box"。

还有啊，类用起来的确让人感觉很爽，但要适度，不要使用过度或滥用，不然对身体不好的。

3.div和span

很多人以为div是木有语义的，其实它是有的，叫做部分（division）。它可以将文档分为几个有意义的区域。但是当有现有元素能实现区域分割功能时，应当避免使用div以减少标记。比如下面的写法

<div class="nav">
<ul>
<li>
...
</li
</ul>
</div>

完全可以删除div：

<ul class="nav">
<ul>
<li>
...
</li>
</ul>

使用span也是一样的，只不过它是内联元素而已。

4.微格式

由于HTML缺少相应的元素，很难突出显示人、地点、时间等类型的信息，于是就有人开发了一套命名标准来解决这个问题。这些命名基于vCard和iCalendar等现有的数据格式，现在成为微格式。

微格式让我们以一种特定的方式标记数据，让其他程序和服务可以访问它。许多大型网站已经支持微格式了，但与LZ没关系，避而不谈，需要时去百度。

5.规划和维护样式表

站点越大越复杂，css就越难管理，养成一个好的习惯是十分重要的。这里有两种策略：

一个是创建多个不同类别的样式表。这样的确容易分类，但多个文件会导致从服务器发送更多的数据包，这些包会影响下载时间。从性能上来考虑的话最好不要用太多样式表。

还有一个就是写在一个或两个文件里，一个用来排版，一个用装饰。然后在文件中务必做好注释。如果css文件特别长，可以在注释头中加入标志：

/*@group typography*/

大家也可以自定义注释规则，总之方便查看和编码就行。也可以规定一个代码结构，比如像下面：

/*-----------@group 一般样式-----------*/
/*主体样式*/
/*reset样式*/
/*链接样式*/
/*标题样式*/
/*其他样式*/
/*-----------@group 辅助样式-----------*/
/*表单*/
/*通知和error*/
/*一致的条目*/
/*-----------@group 页面结构样式-----------*/
/*标题，页脚，导航*/
/*布局*/
/*其他页面结构样式*/
/*-----------@group 页面组件-----------*/
/*各个页面样式*/

一旦养成一个好的代码习惯，对今后写代码或看以前的代码都是非常有利的。

6.其他

规范这东西一时半会总结不玩，等以后慢慢添加吧，再说，这也不是重点哈哈。