收集于网络的Web Standard规范化CSS+XHTML命名参考
坦率的说，我写CSS时，有至少1/4的时间是在纠结选择符该如何命名。随意的命名，会让你陷入尴尬。
举个例子，我们需要在一段文字里将某些词标红。所以为此建了一个.red { color: red; }。结果产品经理觉得，红色太刺眼了，改成橘色比较好吧。这下头大啦，难道写成.red { color: orange; }么？要不然就是把HTML里的每个class="red"改成class="orange"？
在过去几年时间里，我经常遇到这样的尴尬。因此作为一些经验之谈，我整理出以下的几个命名原则：
原则一：CSS选择符命名应该体现结构而不是样式。
这句话听起来很奇怪。这样不是违反了结构和样式分离的原则么？恰恰相反，其实正是遵循分离原则。要知道，CSS选择符名真正的用处是在HTML代码里修饰标签。所以它其实应该被看作结构的一部分。因此选择符的名字不可以跟样式有关。
我开头将的那个例子，就是违反这一原则典型。正确的写法，应该是.highlight { color: red; }，或者索性就用em { color: red; font-style:normal; }。
同理，我尽量避免用带有left、right、颜色、bold等字眼的名字，总而言之，那些可以被作为CSS属性值的名字，都尽量少用作名字。
有时候，我们会遇到另一种情况。有一个很常见的布局：标题放在区块的左上方，而右上方是一个“查看更多”的链接。所以我们会用这样的代码
<h2> <span><a href="#">查看更多</a></span> 精彩贴图 </h2>
自然，会有相应的样式：
h2 span {float:right;}
但是这样做其实很危险。如果我们要求给标题后再加一个副标题（比如“超过1000万精美图片”之类的恶俗标语），就没法再用span了。用strong或是em，其实感觉怪怪的。
原则二：不要轻易将特殊样式直接赋给常用的HTML标签
上面那个例子的问题就在于，轻易的将样式应用在span这种常用的标签上了。h2 span这种选择符，意味着你认为h2里所有的span都要使用右浮动。但是这样的判断显然是很武断的。
另一个例子是，喜欢用ul.top10 li这种选择符。这样用并非不可，但请先确保这个排行榜里只是纯文字。倘若有一天产品经理发现，似乎应该把前三个的信息写得更详细，就意味着你可能需要用到下面这种结构：
<ul class="top"> <li> <div class="product"> <h6>产品名称</h6> <ul> <li>型号：XXX</li> ... </ul> <div> </li> </ul>
这下又傻眼了吧。只能用.top20 .product li {}去覆盖掉之前的样式。
我比较倾向的写法，是如 ul.top20 li.item这样写。（当然，CSS2准备了更多更精准的后代选择器，就犯不着这个了。等待IE8吧~~）
原则三：设计好一系列的“全局保留字”，以避免命名冲突
一些常用的单词，就不要用作特殊样式的名字。比如，我们会经常用到如下的选择符：
.tab li.current
或者
.nav li.current
以表示当前激活的标签或选项。很多样式都会用到“current”这个单词，为了避免彼此的样式冲突，有一个很简单的办法，就是人为商定，单纯的.current样式不作任何定义。换句话说，current这个名字只能出现在精确的后代选择符中。
类似的还有：
“.active”：和current差不多，有人也喜欢用这个
“.first”：经常在如“ 选项 | 选项 | 选项”的结构中用到
“.last”：在田字格布局中可能会用到
“.hover”：有时候需要用这个样式结合JS实现一些效果
“.text”、“.button”、“.submit”等：在属性选择器普及前，input标签的样式都靠它们了。
原则四：英文要正确
哎，这只能怪计算机是美国人发明的了。有时候会看到一些奇怪的选择符名。我解释一些常用单词的含义：
header，footer：
这两个的意思是指“头部”和“底部”，更确切点讲是“页头”和“页尾”。
heading，footing：
heading的意思是“标题、题目”，<h1>的h就是heading的缩写。
footing的意思是“注脚”。
所以呢，我的看法是，整个页面的顶部和底部用header和footer，而区块的标题和底部用heading和footing。
caption：
这个词的意思也是“标题”，但是它特指“图片的文字说明”。所以记得用在图片底部的文字。
primary，secondary：
这两个词是“首要”“次要”。它们往往是指同级别的事物，只是重要性不同。比如提交按钮和取消按钮。
main，sub：
这两个词才是上下级关系。如“主菜单”和“子菜单”。
top，middle，bottom：
这里主要是“中”这个词。“上中下”里的“中”是用middle。参见text-align属性。
left，center，right：
“左中右”的“中”是center。参见vertical-align。
此外，还有一些常用的词语：
rating：打分
rank：“第几位”
showcase：展示橱窗，可以用作一行五个这种排布。
category：分类
thumbnail：缩略图
snapshot：截图。这个单词的意思是“快照”，所以一般指原大小。
breadcrumbs、pathway：这两个都可以用来指这个东西：“首页 > 二级页面 > 内容页”
quicklinks：这个可以用作页面右上角的“ 登录 | 帮助 | 客服 ”，也可以指页面底部的“ 关于我们 | 网站地图 ”
tip：提示。可以用作输入框旁边的文字，或是弹出的提示框。
内容：content/containe
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
XHTML文件中id的命名
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
XHTML文件中class的命名
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
其它相关注意事项
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
登录条：loginBar
标志：logo
侧栏：sideBar
广告：banner
导航：nav
子导航：subNav
菜单：menu
子菜单：subMenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：register
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendLink
页脚：footer
版权：copyRight
1.css ID 的命名
外 套： wrap
主导航： mainNav
子导航： subnav
页 脚： footer
整个页面： content
页 眉： header
页 脚： footer
商 标： label
标 题： title
主导航： mainNav（globalNav）
顶导航： topnav
边导航： sidebar
左导航： leftsideBar
右导航： rightsideBar
旗 志： logo
标 语： banner
菜单内容1： menu1Content
菜单容量： menuContainer
子菜单： submenu
边导航图标：sidebarIcon
注释： note
面包屑： breadCrumb(即页面所处位置导航提示）
容器： container
内容： content
搜索： search
登陆： login
功能区： shop(如购物车，收银台)
当前的 current
2.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>
