CSS命名规范

分类的命名方法：使用单个字母+"-"为前缀

布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。

对以上的解释详情参见：分类方法中的“CSS内部的分类及其顺序”。

注：在你样式中的选择器总是要以上面前五类开头，然后在里面使用后代选择器。

　　如果这五类不能满足你的需求，你可以另外定义一个或多个大类，但必须符合单个字母+"-"为前缀的命名规则，即 .x- 的格式。

　　特殊：.j-将被专用于JS获取节点，请勿使用.j-定义样式。

最佳选择器写法（模块）

/* 这是某个模块 */ .m-nav{}/* 模块容器 */ .m-nav li,.m-nav a{}/* 先共性  优化组合 */ .m-nav li{}/* 后个性  语义化标签选择器 */ .m-nav a{}/* 后个性中的共性 按结构顺序 */ .m-nav a.a1{}/* 后个性中的个性 */ .m-nav a.a2{}/* 后个性中的个性 */ .m-nav .z-crt a{}/* 交互状态变化 */ .m-nav .z-crt a.a1{} .m-nav .z-crt a.a2{} .m-nav .btn{}/* 典型后代选择器 */ .m-nav .btn-1{}/* 典型后代选择器扩展 */ .m-nav .btn-dis{}/* 典型后代选择器扩展（状态） */ .m-nav .btn.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */ .m-nav .m-sch{}/* 控制内部其他模块位置 */ .m-nav .u-sel{}/* 控制内部其他元件位置 */ .m-nav-1{}/* 模块扩展 */ .m-nav-1 li{} .m-nav-dis{}/* 模块扩展（状态） */ .m-nav.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */ 

统一语义理解和命名

布局（.g-）语义命名简写文档docdoc头部headhd主体bodybd尾部footft主栏mainmn主栏子容器maincmnc侧栏sidesd侧栏子容器sidecsdc盒容器wrap/boxwrap/box模块（.m-）、元件（.u-）语义命名简写导航navnav子导航subnavsnav面包屑crumbcrm菜单menumenu选项卡tabtab标题区head/titlehd/tt内容区body/contentbd/ct列表listlst表格tabletb表单formfm热点hothot排行toptop登录loginlog标志logologo广告advertisead搜索searchsch幻灯slidesld提示tipstips帮助helphelp新闻newsnews下载downloaddld注册registreg投票votevote版权copyrightcprt结果resultrst标题titlett按钮buttonbtn输入inputipt功能（.f-）语义命名简写浮动清除clearbothcb向左浮动floatleftfl向右浮动floatrightfr内联块级inlineblockib文本居中textaligncentertac文本居右textalignrighttar文本居左textalignlefttal垂直居中verticalalignmiddlevam溢出隐藏overflowhiddenoh完全消失displaynonedn字体大小fontsizefs字体粗细fontweightfw皮肤（.s-）语义命名简写字体颜色fontcolorfc背景backgroundbg背景颜色backgroundcolorbgc背景图片backgroundimagebgi背景定位backgroundpositionbgp边框颜色bordercolorbdc状态（.z-）语义命名简写选中selectedsel当前currentcrt显示showshow隐藏hidehide打开openopen关闭closeclose出错errorerr不可用disableddis声明：博主负责整理的，原文来自http://nec.netease.com