收集于网络的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：提示。可以用作输入框旁边的文字，或是弹出的提示框。

CSS命名规则

Example Source Code [www.52css.com]
　　头：header

　　内容：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的命名

Example Source Code [www.52css.com]
(1)页面结构

　　容器: 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的命名

Example Source Code [www.52css.com]
(1)颜色:使用颜色的名称或者16进制代码,如(不建议以表现来命名)

　　.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 { }

其它相关注意事项

Example Source Code [www.52css.com]
　　1.一律小写;

　　2.尽量用英文;

　　3.不加中杠和下划线;

　　4.尽量不缩写，除非一看就明白的单词.

　　　　主要的 master.css

　　　　模块 module.css

　　　　基本共用 base.css

　　　　布局，版面 layout.css

　　　　主题 themes.css

　　　　专栏 columns.css

　　　　文字 font.css

　　　　表单 forms.css

　　　　补丁 mend.css

　　　　打印 print.css

页头：header

登录条：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 –>