CSS命名的语义化和html5为语义和体验而生

如果在一个页面中看到的基本全是div，那么说明你对语义化标签的使用还不是很明白：明明是一个标题，可以用标签来实现，却非要用无语义的

标签是否更语义？

大家都知道每年的CSS裸奔节吧？如果选用的标签几乎全是不带语义的，那么在去样式后网页中几乎看不到任何结构信息，可读性非常差；如果选用的都是语义适合的标签，去样式后网页依然具有非常好的可读性；各个浏览器有自己的默认样式，默认的样式给予了各个标签不同的显示，标签使用的正确与否能体现网站的可用性，这也是检验一个网站可用性的最简单的方法之一。

这个推荐大家去看W3C官网的标签的使用，用web developer禁掉它的CSS看看如何？

CSS命名的语义化

CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范，只有在团队的规范的基础之上进行更好的语义化命名才是王道。

在我的理解，一个语义化的CSS命名至少应遵守如下约定：

尽量规避拼音命名，用英文单词去命名

单词之间连接用三种方式：下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范，但个人建议不要同时使用2种以上的连接方法同时命名

单词后不要跟无意义的数字，如logo1234 (团队约定好的除外)

对于过长单词的连接命名可采取缩写形式，但应确保成员都能看懂

一些约定好的单词可以迅速的帮助大家命名：

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
登录条：loginbar
标志：logo
广告：banner
轮转：promo
页面主体：main
热点：hot
新闻：news  
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权copyright

这个太多了，这里就不一一列出了，遇到不会的单词大家再去补一下英文哈！