CSS规范 - 最佳实践

最佳选择器写法(模块)
/* 这是某个模块 */
.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

关于我们|MIT开源协议|意见反馈|加入我们|NEJ:更好的JS解决方案

Copyright © 1997-2013 NetEase. All Rights Reserved.