##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-)
|语义| 命名 |简写|
|--|--|--|
|文档| doc |doc|
|头部| head |hd|
|主体| body |bd|
|尾部| foot |ft|
|主栏| main |mn|
|主栏子容器| mainc |mnc|
|侧栏| side |sd|
|侧栏子容器| sidec |sdc|
|盒容器| wrap/box wrap/|box|
模块(.m-)、元件(.u-)
|语义| 命名| 简写|
|--|--|--|
|导航| nav| nav|
|子导航| subnav| snav|
|面包屑| crumb| crm|
|菜单| menu| menu|
|选项卡| tab| tab|
|标题区| head/title| hd/tt|
|内容区| body/content| bd/ct|
|列表| list| lst|
|表格| table| tb|
|表单| form| fm|
|热点| hot| hot|
|排行| top| top|
|登录| login| log|
|标志| logo| logo|
|广告| advertise| ad|
|搜索| search| sch|
|幻灯| slide| sld|
|提示| tips| tips|
|帮助| help| help|
|新闻| news| news|
|下载| download| dld|
|注册| regist| reg|
|投票| vote| vote|
|版权| copyright| cprt|
|结果| result| rst|
|标题| title| tt|
|按钮| button| btn|
|输入| input| ipt|
功能(.f-)
|语义| 命名 |简写|
|--|--|--|
|浮动清除| clearboth |cb|
|向左浮动| floatleft |fl|
|向右浮动| floatright |fr|
|内联块级| inlineblock |ib|
|文本居中| textaligncenter |tac|
|文本居右| textalignright |tar|
|文本居左| textalignleft |tal|
|垂直居中| verticalalignmiddle |vam|
|溢出隐藏| overflowhidden |oh|
|完全消失| displaynone |dn|
|字体大小| fontsize |fs|
|字体粗细| fontweight |fw|
皮肤(.s-)
|语义| 命名| 简写|
|--|--|--|
|字体颜色| fontcolor| fc|
|背景| background| bg|
|背景颜色| backgroundcolor| bgc|
|背景图片| backgroundimage| bgi|
|背景定位| backgroundposition| bgp|
|边框颜色| bordercolor| bdc|
状态(.z-)
|语义| 命名| 简写|
|--|--|--|
|选中| selected| sel|
|当前| current| crt|
|显示| show| show|
|隐藏| hide| hide|
|打开| open| open|
|关闭| close| close|
|出错| error| err|
|不可用| disabled| dis|