分类式定名法(在前端组件化下极为紧要)

结构（grid）（.g-）：将页面接洽为几个大块，通常有头部、主体、主栏、侧栏、尾部等！ 模块（module）（.m-）：一般为一个语义化的可以重复运用的较大的总体！比喻导航、登录、注册等 元件（unit）（.u-）：一般为一个弗成再分的较为玲珑的个别，一般被几回再三用于种种模块中！好比按钮、输 入框、loading等！ 机能（function）（.f-）：为方便一些经常运用花样的应用，我们将这些使用率较高的名堂剥离出来，按需使用，一般这些决定器存在固定格局闪现，好比铲除浮动等！弗成滥用！ 状态（.z-）：为外形类花色介入前缀，对立标识，方便辨认，她只能组合运用或作为长辈泛起（.u-ipt.z-dis{}，.m-list li.z-sel{}） javascript(.j-)：.j-将被专门使用于JS获取节点，请勿应用.j-定义款式 不要运用 " _ " 下划线来定名css 能良好的鉴别javascript变量名 输入的时候少按一个shift键 阅读器兼容性问题（好比应用_tips的决意器定名，在IE6是有效的） id采用驼峰式命名(不要乱花id) scss中的变量、函数、异化、placeholder接纳驼峰式命名 不异语义的不同类命名方式： 直接加数字或字母分辨即可（如：.m-list、.m-list2、.m-list3等，凡是列表模块，但是是完全纷歧样的模块）。别的举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。 定名方式(BEM)：类-体（例：g-head）、类-体-润饰符（例：u-btn-active） 小辈抉择器：体-润饰符便可（例：.m-page .cut{}）注：后辈决定器不要在页面组织中应用，因为沾染的兴许性较大；

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c53500.shtml