从腾讯layoutLeft/layoutRight 小谈CSS样式命名

零、说在前面的话

在firebug里看腾讯首页，有这样的层：

<div class="layout mt12">  <div class="layoutLeft"></div>  <div class="layoutRight"></div></div>

要是哪天产品经理或策划说：小李子，这个左边的放在右边是不是更好点？还有这个上下结构能不能再高点？

虽然有时候可以不动结构能够实现页面布局的调整，但最后Left并不是真正意义上的Left了，Right也不是先前的Right了，.mt12{margin-top:12px;}就更离谱了！

如果修改和调整要动页面的结构，是否失去了结构和样式分离的意义？！所以不推荐这样的命名方式和处理方式，扩展和维护性相对不方便。

<div class="layout">  <div class="box module-type">    <div class="hd"><strong>导航标题</strong><span>更多 >></span> </div>    <div class="bd">      <div class="module-name">        <div class="main-wrap"></div>        <div class="col-main"></div>        <div class="col-sub"></div>        <div class="col-extra"></div>      </div>    </div>  </div></div>

之类的命名感觉就好多了，可扩展、可控性更高，通过模块类别module-type的hd、bd可以全局统一界面元素，通过模块名称module-name重写基类样式。

一、命名规则

1. css的命名总规则为:内容优先,表现为辅. 首先根据内容来命名, 比如 main-nav. 如果根据内容找不到合适的命名, 可以再结合表现来定, 比如 skin-blue

2. css名称一律小写(英文字母、数字), 多个单词用连字符'-'连接, 比如 recommend-presents.

3. 语义化,用英文单词命名 . 除了产品名称和特色词汇, 其它任何情况下都严禁使用拼音.

4. 不影响语义情况下, 可适当采用英文单词缩写, 如col, nav, hd, bd, ft等, 但切忌自造缩写.

5. 仅在JavaScript代码中当作hook用的id或class, 命名规则为J_UpperCamelCase(大骆驼拼写法), 其中字母'J'代表JavaScript, 也是钩子(hook)的象形.

6. （后补：一般优秀的设计稿不会出现难命名的情况，因为各模块形散神聚，有个性，更有共性，有主，也有次，不会太脏乱差）

7. （后补：命名时不要用表示‘颜色、大小、方位’…之类的形容词，要是一个地方用了red命名，后期要改成blue，还得动html文件）

样式里用 ‘-’ ， 脚本里用‘_’ ，不要问为什么，脚本里用 ‘-’ 我个人出现过问题。另，‘-’ 能分开后表两单词，‘_’ 不会分开词组。

二、XHTML、CSS分离

第一步,内容处理为结构,纯HTML的编写　
第二步,结构处理为表现,纯CSS的编写　
第三步,给表现加上行为.

1. 结构和表现分离,不设置样式,页面精确地显示内容,内容在合理的位置和有相应的重要级别感官(如标题、导航)、宽度和高度,但是没有特定的圆角和颜色;
2. 结构和内容分离,确保布局不会因为内容的问题溢出或者错乱.
3. 分清公共级(全局)、栏目级(局部公共)、页面级等的样式作用域.

就像一个人：脱掉花花绿绿的衣物，ta还是人，有眼睛、有鼻子、有嘴巴；吃再多东西不会撑破肚子(max-width/max-height)，只会撑死…撑死了，还是有眼睛、有鼻子、有嘴巴…(理性看待这个例子，俗)…

三、顺带常用CSS命名

(网上扒的，仅供参考)

头部:header   hd

内容:content/container   bd

尾部:footer
侧栏:sidebar
主体:main
子:sub
菜单:menu
子菜单:menu-sub
主菜单:menu-main
导航:nav
子导航:sub-nav
主导航:main-nav
栏目:col
子栏目:col-sub
主栏目:col-main
区块:area
子区块:area-sub
主区块:area-main
描述:description
详情:detail
页面外围控制整体布局宽度:wrapper/box
左右中:left right center
登录条:login-bar
标志:logo
广告:banner
热点:hot
新闻:news
过滤:filter
分类:category
搜索:search
搜索列表:search-list
搜索框架:search-form
搜索结果:search-result
模式:mode
分页:pagination
下载:download
友情链接:friend-link
合作伙伴:partner
版权:copyright
滚动:scroll
标签:tab
文章列表:list
提示信息:msg
注释:note
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
站点导航:site-nav
当前的: current
滚动:scroll
评论:comment
图标: icon
h1-h6 表示标题. 其中 h1 用于表示当前页面最重要的内容的标题;

模块 module.css
基本共用 base.css
全局 global.css
布局版面 layout.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
主题 theme.css



参考博文：ClassName的长命名 VS. 短命名