CSS选择器命名规则

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

布局（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{}）注：长辈抉择器不要在页面机关中运用，因为沾染的概略性较大；