选择符命名规则---抄袭自小麦
选择符的命名原则------抄袭自小麦
- 网页标准2January2010
其实这个主题还蛮无聊的。因为我想来想去，选择符的命名，其实并不是那么重要。况且，对于不同的人，有不同的习惯，我在这里也没法定出什么完美的标准来号召大家都使用。
不过，规划好选择符的命名，还是有几点好处的：
1. 节约时间。不得不承认，我本人经常把10%-20%左右的时间花在斟酌选择符命名上。当然，或许这只是我个人的强迫症问题。
2. 防止冲突。虽然概率很小，但还是会遇得到这种情况：某个选择符的名字，已然被用过了，导致样式冲突。这种情况通常发生在不同尺度的样式：比如登录框和登录页，某个模块里的下拉菜单和导航栏，等等。
3. 防止冗余。其实这点就比较关键啦。如果命名冲突，换个名字就是了。但如果是前后由不同的人来写样式，很可能为了避免冲突而另起炉灶。一方面浪费人力，另一方面久而久之会产生大量被废弃或覆盖的样式：打开firebug，某个样式被不同的人在不同的样式表里覆盖了N次。这就比较糟糕了。
所以，好的命名规划，一定程度上还是比较的。一些关键的命名原则有：
1. 通用的样式，一定要规范好命名。所谓通用的样式，主要有：
????a) 页面布局：比如头部顶部啦，左侧栏右侧栏啦，负责整个页面“骨架”的一些样式。
????b) 常用布局：比如列表，田字格布局（1排5个，一共5排），标签切换（tab），翻页这种经常被网页设计所用的模块布局样式。
??上面两种，在各处的样式定义可能完全不同，但由于经常用到这些布局结构，所以可以统一命名。
????c) 通用模块：这里指的是一些“固定样式”的模块，会在全站各处出现。比如登录框、搜索框、浮动工具箱等等。
????d) 小尺度的通用样式：比如菜单激活状态，文字高亮之类的。还例如某些同学喜欢用的清除浮动的样式。
把这几种类型的样式的命名规范好，就能避免很多问题。原因是因为它们通常会在很多页面里被反复使用到，所以是最容易出现冲突和冗余的地方。
2. 页面布局、常用布局以及通用模块的样式，命名要特别。
比如对于全站导航菜单，我比较喜欢用nav（navigation，即导航）来命名，而不是menu，或是main_menu之类的。原因是，可预见的是，在某些特定的页面内，会出现“菜单”这种元素，比如分类索引页，侧栏可能会出现分类的菜单列表。那如果menu被全站导航占用，到时候就容易出问题。
同样的问题也出在“登陆框”或是“搜索框”，如果简单的用login或是search，那你到“登录页”或“搜索页”的时候，就又头疼了。我比较习惯的是用login_box和search_box。
总之呢，一些“自然而然就能想到”的名词，尽量不要用在大尺度或全站通用的样式上，一开始把它们挤占了，就会导致后来的样式命名不得不另想花样，命名的混乱就由此开始。
3. 相反，小尺度的通用样式，命名要通俗简短。
其实小尺度的通用样式命名，就纯粹是一个“惯例”了。比如激活的菜单，有的人用on，有的人用now，有的人用active。你管不着别人的，只能作为一个惯例推广给团队里其他同事。但不要认为“惯例”就没约束性，如果坚持用同一个名字，到处都用，其实其他同学会潜移默化的也跟着用的。比如土豆网的视频截图模块，几年来一直被称作pack。这就是aether同学最初的发明。
下面稍微列了一下，可能用到的通用样式，后面附的英文是我个人的习惯，可以参考，也可以忽略。
页面布局：
??-页面头部：header
????-图标：logo
????-右上快捷区域：quicklinks
??-页面中部：page
????-侧栏：side column
????-主栏：main column
????-第三栏：extra column
????-区块：section
??????-区块顶部：heading
??????-区块中部：container
??????-区块底部：footing
??-页面底部：footer
????-版权说明：copyright常用布局：
??-田字格布局：show case
??-列表布局：list
??-标签切换：tab
??-排行榜：billboard
??-表单：post form
??-纯文字区域：text area
??-翻页：page navigation通用模块：
??-导航栏：navigation
??-登陆框：login box
??-搜索框：search box通用样式：
??-高亮：highlight
??-激活：active，或者on
??-清除浮动：fix，或者clear
??-图：pic
??-文：txt
自己可以根据具体情况来编写这个命名规范表。比如有些网站可能全站底部有个通用的工具栏（比如facebook），那就可以把tool box放到“通用模块”里。又比如，对于“田字格”布局，有些同学可能习惯每一行用一个框套起来，每一项再用一个框套起来，那就会衍生出“row”和“item”这样的样式，另外的做法是每一行末尾用一个空div隔开，可能需要用的是“line”或者直接就用“clear”。whatever，自己决定。
4. 选择符命名的常用方法有：
??a) 基于结构的命名：比如头部/底部，主栏/侧栏，菜单列表/菜单项，区块，按钮
??b) 基于功能的命名：登录框、搜索框、排行榜、翻页、提示（tip)，等等
??c) 基于内容的命名：今日焦点(focus)、用户排行榜（top users)、评论（comments）、搜索结果（search results），等等
??d) 基于样式的命名：列表、田字格、tab、高亮、标红或加粗，等等
??e) 基于状态或行为的命名：激活、拖拽、展开，等等
我没那么教条，不去从什么“样式和结构分离”的形而上原则来规定该用什么。只是谈谈，如果在未来发生需求变动，怎样的命名会让你尽量少做改动。
基本上呢，前两种——结构和功能——是最安全的。因为如果结构或功能发生巨大变化，你要做的工作就多着去了，也不在乎这个命名会改动多大了。
基于内容和样式命名，就比较危险。很可能只是将“今日焦点”改名为“最新话题”，而样式完全不变。或是新增的“分类索引”模块，设计上直接照搬“搜索结果”的排列样式。遇到这种情况，你的命名就尴尬啦。基于样式命名的危险，就更不用说了。
基于状态或行为来命名，通常发生在两种情况：1. 用作JS的钩子；2. 用作某种状态变化的样式。以我的经验，它们的问题往往不是“改动”，而是“不能改动”。一旦用了，就会一直用下去，除非相应的行为方式发生变化。对此我还没深思熟虑过，但值得提醒的就是，对它们的命名要慎重，而且，最关键的是，要将它们和其他的样式剥离开来。当然，这就不是“命名”的范畴，而是“架构”的范畴，这里就不多讲，以后再说。
最后还要特别强调的是：不管采用哪种方式命名，最忌讳的是同时基于两种方式。最常见的就是“左侧栏（left column)”，它同时基于样式和结构。还比如“顶部介绍（top intro）”，同时基于样式和内容；“频道下拉框（channel dropbox），同时基于内容和功能。这些命名，在遇到样式变动，或是新增同样式的模块时候，就会陷入尴尬。
5 最后讲一个比较棘手的问题：层叠（Cascading）。写CSS，经常会遇到层叠的情况：
????搜索
??????搜索关键字
??????搜索提示
??????搜索结果
?????? 搜索过滤选项
这个例子，其实还好解决：就按照各元素的内容或功能直接命名即可。之所以好解决，是因为这些元素大多是本模块（搜索）所特有的，不大可能重复。但另一种情况就比较麻烦了：表单。我举个例子：
????登录
??????用户名
??????密码
????注册
??????用户名
??????密码
类似的例子还有：blog的文章（标题、内容）和留言（标题、内容）。问题的关键在于，它们是不同的模块，包含同样内容或功能的元素。更要命的是，有时候，这些元素的样式是一致的，有时候，又有点小不同，有时候，又是迥然不同。
对于层叠的情况，有三种命名方式：
??a) 模块名和元素名绑成一个名字。比如.comment_title。
??b) 只用元素名，只对元素名定义样式。比如.keywords。
??c) 也是只用元素名，但是将选择符层叠定义，比如.login .username。
至于什么情况采用什么方式，完全在于经验。但关键要考虑的因素是：一，在其他模块中是否会出现同样的元素？二，它们在样式上有一致性吗？像“搜索关键字”这种元素，如果断定在其他模块不会有同样的元素，就大胆只用元素名吧。而“登录 用户名”和“注册 用户名”，可推断的是它们的样式有一致性，或许只是一些小不同（比如输入框宽度），那就用选择符层叠定义。而“文章标题”和“留言标题”，很明显它们在样式（甚至结构）上会有很大不同，那最好各取各的名字。
我个人呢，比较倾向于用a)，即模块名和元素名绑在一起。这样可能会造成一些冗余的样式定义，但即便冗余，也有一个好处：解耦。样式各管各的，不用互相牵扯。只有对于那些特别通用的模块，我才会用c)方式，比如.list .item这样。
呼，这个无聊的主题，居然也洋洋洒洒写了这么多。其中肯定有很多漏洞，毕竟我也不能预见到所有的情况。就当是一个自我总结，供参考吧