保持你的HTML代码整洁又规范的12条原则

 

友好的 class 和 id 名称 例如 “mainNav，” “subNav，” “sidebar，” “footer，” “metaData，” ，它们描述了所包含的内容。 不好的 class 和 id 名称则描述设计， 比如 “bigBoldHeader，” “leftSidebar，” and “roundedBox.”

注： Chris 所强调的是按内容还是按设计来进行命名。个人补充一点： ID和Class名称使用大写还是小写，或单词首字母大写。首先，完全的大写单词是不利于阅读的，排除。至于完全使用小写还是单词首字母大写，就看个人的习惯了。重要的一点是，不管使用哪种规则，应该保持一致。不要一会儿纯小写，一会儿又首字母大写，会很混乱。

另外，我个人比较迷糊的是，对比较长的名称，是加下划线“_”， 还是连字符”-”，亦或不用。或者是我想的太复杂了吧。用哪种都好，保持一致就OK。

8. 把字型排版留给CSS

在菜单的设计中，我们一般都使用大写字母。这很简单啊，把菜单项写成大写的不就行了？但为了将来的可扩展性，我们不应该这么做。在代码中，我们应该仍然使用标准的单词大小写写法，或完全写成小写。而之后，我们可以通过CSS来改变文字的字型，比如通过text- transform:uppercase; 把字母转换为大写，通过text-transform:capitalize;把转换为单词首字母大写。 

9. 给 《body》指定Class或id

有的时候，网页中的同一个区块，但在不同页面的时候，我们会对其进行不同的样式化。很多时候，我们会为这个相同的区块取一个新的名称，比如为新样式的DIV区块添加一个“mainContent-500.”的ID属性，为比较窄的侧边栏添加为《class=”narrowSidebar”& gt;。

这并不是一个良好的长期解决方案。正如我们第7条指出的，我们需要友好且保持一致的命名惯例。而不是增加一些花俏的新ID或CLASS名称。 

 

为需要样式化某个区块的不同页面指定一个独立的body ID或CLASS将会非常有用。因为页面的所有内容都包含在body标签之中。指定Body名称后，你可以通过CSS Hook来完全重新定义某一个元素的样式。举个例子，原先的页面中，我们对sidebar进行了背景定义.sidebar{background：#FF0;”}而在新的《body class=”aboutpage”》中，我们要把sidebar的 背景弄成黑色，那很简单，使用boy.aboutpage .sidebar{background：#000;} 即可。