html 样式规则,分类方法 - CSS规范 - 规范 - NEC : 更好的CSS样式解决方案

重置(reset)和默认(base)(tags)：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！

统一处理：建议在这个位置统一调用背景图(这里指多个布局或模块或元件共用的图)和清除浮动(这里指通用性较高的布局、模块、元件内的清除)等统一设置处理的样式！

布局(grid)(.g-)：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！

模块(module)(.m-)：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！

元件(unit)(.u-)：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！

功能(function)(.f-)：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！

皮肤(skin)(.s-)：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色(图)、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！

状态(.z-)：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现(.u-ipt.z-dis{}，.m-list li.z-sel{})，具体详见命名规则的扩展相关项。

功能类和皮肤类样式为表现化的样式，请不要滥用！以上顺序可以按需求适当调整。

以上分类的命名方法详见命名规则

/* 重置 */

div,p,ul,ol,li{margin:0;padding:0;}

/* 默认 */

strong,em{font-style:normal;font-weight:bold;}

/* 统一调用背景图 */

.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}

/* 统一清除浮动 */

.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}

.g-bdc,.m-dimg ul,.u-tab{zoom:1;}

/* 布局 */

.g-sd{float:left;width:300px;}

/* 模块 */

.m-logo{width:200px;height:50px;}

/* 元件 */

.u-btn{height:20px;border:1px solid #333;}

/* 功能 */

.f-tac{text-align:center;}

/* 皮肤 */

.s-fc,a.s-fc:hover{color:#fff;}