CSS规范 - 最佳实践

最佳选择器写法（模块）

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

/* 这是某个模块 */

.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