css的命名是个非常头疼的事情，特别是在团队合作中，统一的命名规范非常重要，由于各个浏览对css的支持程度不一样，特别是IE6，css的高级选择器无法使用，我们要在html中给标定义类名或者ID，让css去控制以达到设计的需求，如何命名是一个很大的命题，网上相关的文章也有很多，大家可以google之，在这里主要讲一些平时的经验及想法

css选择器的命名、语义化、形式化及结构化

形式化

html 、css、js分别代表结构、样式、行为，我们用css来控制标签的外在表现，但用外在表现给css选择器命名却是不可取的，我们经常会把要强调的内容加粗标红，有些人用class="red" 这种方式，这样的命名存在两个问题：

1、别人只能看到red代表的是红色，却不知道什么意义，不知道这段标签代表什么

2、如果有一天不用红色来突出了，改成蓝色了，这个命名连表现形式的意义都没有了。

结构化

html是结构化的代码，比如很多页面都分上中下，左中右，但同样的用结构化的命名同样也是不合适的，比如一个三栏结构的页面，用left, middle,right三个词命名左、中、右三个部分，但是有一天要求把左边的移到右边怎么办呢？

语义化

我在前面的文章中提到过，css的命名可以理解成对html语义化的一个补充，而事实也证明这一点，比如html5新标签的出现，如<nav></nav><header></header><footer></footer>等等，就是因为大多数人都用这几个名字去命名菜单，头部和底部，所以才有了新的标签的出现。上面提到的形式化问题，用红色的目的是让内容更明显，其意义不在于红色，而在于明显，所以如果我们用highlight来命名，无论放在哪个位置，用哪种形式来表现他，在语义上他都是突出的意思，结构化的问题同理，语义化最简单直白的解释就是人家一看就知道，这段标签意义是什么？如菜单nav、新闻news、分栏column、版权copyright等等，在任何一种情况下，只要标签的作用不变，都是适用的，语义化的命名也更有利于后期的维护，所有关于表现形式的改变只需要改变css，如果是用形式化和结构化的命名的话，则可能要改变html结构，这对于小页面来说可能很简单，但对于门户这些大型站点来说就是一个大问题了

团队的命名规范

只要在遵行语义化的前提下，我觉得怎么命名是团队的使用习惯的问题，以下是我的一些习惯，仅供参考

1、用英文命名，两样是菜单，有些人用nav有些直接就用caidan，当然都可以，应该说对中国人来说都是可以的，但学是推荐用英文命名

2、两个单词组合的用驼峰命名法，比如页面有一块内容叫新闻中心，命名为newsCenter,又比如说象体育新闻sportsNews

3、附属关系的用下划线，每个功能分区都有一个title,有些能够合并的模块开发的可以使用一样的命名，但有些是独立的，比如新闻中心的标题命名为title_newsCenter

团队的命名参考（比较混乱，想到什么写什么）

容器: wrapper

页头：header

内容：content

页面主体内容：main

页尾：footer

导航：nav

侧边栏：sidebar

分栏：column

新闻：news

热点：hot

排行：ranking

投票：vote

链接：links

面包屑导航：breadLinks

标题: title

摘要: summary

广告：ad

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

状态：status

按钮：btn

列表：list

提示:tips

当前的: current

图标: icon

图片：img_

服务：service

下载：download

想到再补充......

原谅地址：http://speckyboy.com/2011/09/25/15-free-html5-and-css-templates/

Html5模板是网页设计社区里最受欢迎的资源之一，它们不仅提供了建设现代网站快速且易于编辑的方案，而且是理解和研究html5语法非常好的方式

下面所有的模板都是免费且用html5编写的

Minimalism

Minimalism是一个简单的html5和css3模板，它把多栏布局和报纸分栏结合在一起

下载 示例

Single-Page Scrolling Portfolio Template

这是设计师，摄影师和平面设计师展示作品的完全模板，它以HTML5Boilerplate为基础

下载 示例

ElegantPress

Elegantpress 是一个可选列数的html5和css3模板，它把jQuery slider, lightbox, inbuilt web fonts, jQuery gallery, jQuery jportfolio，甚至是表单等多种形式放在一个页面里

下载 示例

Simple Style

一个简单，固定宽度，设计现代，有5个页面，使用google font api提供的字体

下载 示例

Vibrant & Professional

下载 示例

Nova

Nova是一个有5个页面，一个联系表单和页面滚动和内置twitter分享的html5模板

下载 示例

Shinra

页面简洁友好，包括多于5个的页面和一个php联系人表单

下载 示例

Touch The Future

下载 示例

Sanaroo

下载 示例

Beadysite

下载

CSS3 & HTML5 One-Page Website Template

下载 示例

iPhone Application Template

下载 示例

Backwards Compatible, One Page Portfolio

下载 示例

DownToBiz

下载 示例

OWMX-2

下载

VividPhoto

vividphoto 是一个使用html5,jqeury,css3且设计美观现代的图片模板，能满足摄影师的多种需求，兼容多种浏览器

下载 示例

HTML5 Template

下载 示例

HTML5 Admin Template

下载 示例

写这篇文章的起因在于其中一个群里的讨论，有一个人说公司要求所有页面不能出现table，他正在努力地用div在做表格，我当时表示非常惊讶，DIV已经被妖魔化成什么样子了。
我在amazon.cn搜索div + css有不下20本书的书名是学习div +css，也许就是因为这些无知作者的存在，div才会被妖魔化，如果我们一定要给这种布局方法定义一个名字的话，也许html + css是最合适的。而table为什么不能被用来布局，div为什么不能用来做表格的根本在于html的语义化，而html的版本不断升级也在不断推进语义化，html5里出现的新标签也说明这一点，如nav,footer,header等等。

一、div和table
table为什么会被用来布局，这个无从得知，也许是他简单，易用，特别是在DW中，直接一拖整个网站的框架出来了，然后再不停地往里填东西，到最后，大家终于发现这样不好，用table布局，一个套一个，代码多，意义不清，结构不明，不利于程序嵌套等等，然后div出现了，大家开始疯狂涌向div，如果你跟人说，我用table写页面，直接就被鄙视了，象文章开头说的事情，应该在早期经常出现吧。而div的出现，我觉得其实带有一定的偶然性，division这个单词其实是没有任何意义的，它只是错误的标签出现在一个错误的时间，所以我们在用div布局的时候，要用css去弥补它的无语义，比如基本在所有网站都会看到的，而随着html5的普及，这样的布局方式也会慢慢消失。

二、语义化是html的根本
检验html语义化的最好标准是看一下你的页面在没有css下是什么样子的，html的语义化就是让正确的标签做正确的事，如<h1>....<h6>是标题，<ul><ol>是列表，p是段落，<blockquote>是引用，他们本身有自己的属性和表现形式，没有css，我们仍然知道他们表示的是什么的，如果这些都变成div呢？你会看到一堆无意义的div的堆砌.table的语义在于表格，而不在于布局，它在显示数据方面具有其不可替代性，所以table不但不会消失，而且会一直存在，只是回归它原来的功能。

三、防止过度的div化

现阶段，div仍然是布局的首选，但我们也要认识到它的局限性，所以在布局的时候，要防止过度使用div,如果是一堆div的不断嵌套，那跟用table布局有什么区别呢

div布局的出现，其实已经有好几个年头，只是这样的问题可能还是大量存在，特别是对于刚入行的前端同行，而且对于这个问题，网上其实也有不少前辈发表过观点，大家可以google之。

前端的同学推荐看steve souders的《高性能网站建设指南》。

start render即浏览器渲染时间，在WebPagetest的帮助文档是这么说的

“The Start Render time is the time when something non-white is first displayed in the browser window (i.e. the point at which the user is no longer staring at a blank white window).

在google，网页呈现速度慢500毫秒将丢失20%的流量；在yahoo!,慢400毫秒将丢失5%-9%的流量；在amazon，慢100毫秒将丢失1%的交易量。。。

大多数人做的项目并没有机会给过亿的用户去使用，但是也充分说明了网页速度的重要性，也是用户体验的重要方面，没有用户可以忍受长时间面对一个空白页面，所以不断缩短start render的时间是每个前端人员为之努力的重要方向

要缩短start render的时间，首先要了解这个时间是怎么计算的。

start render的时间 = TTFB(Time To First Byte)：发起请求到服务器返回数据的时间 + TTDD(Time To Document Download)：从服务器加载HTML文档的时间 + TTHE(Time To Head End)：HTML文档头部解析完成所需要的时间

我们的优化也从这三方面着手

1.缩短 Time To First Byte的时间，一是要尽量缩短服务器处理请求的时间，包括减少DNS查询和socket的请求，二是可以使用flush方法

2.优化html文档

3.缩短头部解析的时间

1）减少javascript的外链数，放在head里的javascript的链接是不能并行下载的，就是说每一次只能下载一个脚本，所以javascript链接越多start render的时间就会越长。

2）精简css和javascript文件大小。

3）其他我不懂的方法