在抄写css款式的时候老是无意中就写乱了，无论是定名笼统是名堂的缮写措施，这里做一个CSS缮写尺度总结，提醒自身在钞写css的时候、CSS定名时辰，ID和class定名的时刻当心，各人可以参照哈。
1. 花色属性递次
单个花样划定下的属性在钞缮时，应按性能发展分组，组之间需要有一个空行。
同时要以Positioning Model > Box Model > Typographic > Visual 的轨范抄写，前进代码的可读性。
Positioning Model 构造方式、地位，干系属性搜聚：position, top, z-index, display, float等
Box Model 盒模子，关系属性采集：width, height, padding, margin，border,overflow
Typographic 文本排版，关系属性包孕：font, line-height, text-align
Visual 视觉外面，关系属性包含：color, background, list-style, transform, animation
2. 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{}）注：前辈选择器不要在页面结构中应用，因为沾染的可能性较大；
3. 最好写法
/* 这是某个模块 */ .
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时运用） */
4. 匹敌语义了解与命名
构造(.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
版权 vcopyright cprt
终归 result rst
题目 title tt
按钮 button btn
输入 input ipt
苦守（.f-）
语义 定名 简写
肃除浮动 clearboth cb
左浮动 floatleft fl
内联 inlineblock ib
文本居中 textaligncenter tac
垂直居中 verticalalignmiddle vam
溢出潜藏 overflowhidden oh
纯粹失落 displaynone dn
字体大小 fontsize fz
字体粗细 fontweight fs
皮肤（.s-）
语义 定名 简写
字体色调 fontcolor fc
后援色采 bac千克roundcolor bgc
边框色调 bordercolor bdc
外形(.z-)
语义 命名 简写
选中 selected sel
今朝 current crt
显示 show show
潜藏 hide hide
打开 open open
开启 close vclose
出错 error err
不成用 disabled dis
5. 留意事故
齐整大写，中划线
尽量不消缩写
不要随便应用id
去掉小数点背面的0： 0.9rem => .9rem
使用简写：margin： 0 1rem 3rem
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h52628.shtml
