html css 命名规范,css书写规范-CSS代码命名规则

在抄写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