淘宝在CSS优化，命名规范方面还是比较值得称赞的。
淘宝本身的css规范是由YUI CSS二次开发的的来的，但是相对于原有YUI CSS有了很大的改善，包括变量名上面都有自己的特性，阅读起来比较人性化。
保留ID关键字：
page 页面
header 页面头部
content 页面主内容块
footer 页面脚部
site-nav 页面额外导航链接
links 相关服务链接
//下面是与淘宝网关系比较紧密的ID关键字
product 产品导航块
main-promo 主要推荐slice
mail 淘宝商城
category 商品分类（淘宝页面主要构成）
help 帮助导航块
announce 公告
recom 推荐
info 资讯
expressway 充值邮递（等）
抽象成class的关键字：
login_info 登录信息
quick-link 快速链接
col-main 主列
main-wrap 主列辅助块
foot-nav 脚部导航
ali-group 阿里巴巴连接组
server-num 服务标示号
从上面的保留的关键字可以看出一个比较良好的命名规则：
常见的唯一性的关键字声明为ID。 例如page， content（这个有点歧义），footer，product，category等
常见范类性如 col-*，hd，bd，rc-* 之类定义成二次定义使用class，也就是说这些class只有在大于等于2层选择器下面才可以使用。
例如 #mall .hd 才可以对hd使用。
通用范类关键字尽量定义少相关属性，如box，tab-holder 等。
在附加范类属性上，taobao使用的是命名扩展方式进行定义。如box-skin-blue就是对box 的一个属性追加而添加的
遵循上面的规则，基本可以完成淘宝首页的大部分class的命名定义了。
我们来看看taobao.com的页面基本结构：
<body> <div id="page"> <div id="header"> <!-- 头部 --> </div> <div id="content"> <!-- 内容块 --> </div> <div id="footer"> <!-- 尾部 --> </div> </div> </body>
其中主内容块采用了“圣杯”的设计：
<div class="layout"> <div class="col-main"> <div class="main-wrap"><!-- 主要内容块 --></div> </div> <div class="col-sub"> <!-- 右边附属块 --> </div> </div>
细节规划：
1、所有背景、边线的附加设计都是用了 <s></s> <b></b> <i></i> 标记
2、class粒度上，能够保持比较少的仅仅用于属性性质的class定义