CSS & LESS & SCSS代码规范

CSS && LESS && SCSS( end of * is required)

1. 属性格式

• 每个样式属性后加 “;” (*)
• 选择器与花括号 { 之间要有空格 (*)
• 属性名的 : 后要有空格(*)
• 属性名的 : 前禁止加空格(*)
• 大区块功能样式必须添加注释，小区快适量添加注释
• 期望显示在最上层的元素，z-index 指定为 999999(*)
• 非特殊场景尽量少使用!important
• 尽量不要使用ID选择器(*)
• 类名中使用中划线，不要使用驼峰式和下划线大小写,class 的命名不要使用标签名(*)
• 将规则声明的右大括号 } 放在新行上 (*)
• 2个空格做为一个缩进层级(*)
• 在规则声明中使用多个选择器时，为每个选择器指定一行(*)
• 小数点前面的’0’去除(不强制)
• 属性值为0时不加单位(*)
• 使用语义化、通用的命名方式
• 颜色用十六进制表示，十六进制值应该全部小写和尽量简写
• 不要使用全局选择器(*)
• 尽量使用直接子选择器代替后代选择器
• url() 函数中的路径不加引号(*)
• 需要在 Windows 平台显示的中文内容，其字号应不小于12px(*)
• font-weight 属性使用数值方式描述(*)
• line-height 在定义文本段落时，应使用数值,当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致
• 属性选择器中的值必须用双引号包围
• ~、>、+ 选择器的两边各保留一个空格 (*)
• 对于超长的样式，在样式值的空格处或,后换行
• (padding、margin、width、height)的值以px为单位时,值用2的倍数（偶数）,border则不用

2. 属性简写

• 以下属性，在可以使用缩写的情况下，尽量使用属性缩写,如果只需定义其中的一两个属性，而不是全部，尽量分开来写。
• padding
• margin
• font
• background
• border
• border-radius

3. LESS/SCSS规范

• 嵌套不超过三层(*)
• @import语句引用需要写在一对引号内，.less 后缀不得省略。引号使用 "(*)
• less中的函数使用驼峰命名 (*)
• 重要注释使用多行注释/* */,因为单行注释//编译后不显示

4. 属性书写顺序(布局定位属性–>自身属性–>文本属性–>其他属性)

1. 布局方式，包括 : 定位，浮动，flex

position / top / right / bottom / left
z-index
display:flex /flex-flow ...
float / left / right

2. 盒模型+大小，包括：宽，高，内外边距，边框

width / height
padding / margin / border

3. 文本排版 ，包括：文字，行高，对齐方式，word

font / font-size / font-family / font-weight / font-style
line-height
letter-spacing
text-align / word-wrap / ...

4. 视觉外观，包括：颜色，背景等

color / background / list-style

5. 其他，包括：动画，过渡等

transform / animation / transition / …

5. 图片命名

• 图标：以 ico 作为命名空间，样式：.ico-close 图片： ico-close(*)
• logo：以 logo 作为命名空间，样式：.logo-up 图片： logo-up(*)
• 内容图像：以 img作为命名空间，样式：.img-flower 图片：img-flower(*)

6.css类名命名规则

1. 公共样式以"ce"开头，如"cm-header","cm-footer"等(cm是我公司的名称缩写)
2. 类名多单词连接符尽量用“-”,不要使用“_”

7. 常用的CSS样式命名

1.结构

• 页头：header
• 页面主体：main
• 页尾：footer
• 内容：content
• 容器：container
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 标签页：tab
• 提示信息：msg
• 小提示：tips
• 页面外围控制：wrapper
• 左右中：left right center

2.导航

• 导航：nav
• 主导航：main-nav
• 子导航：sub-nav
• 顶导航：top-nav
• 边导航：sidebar
• 左导航：left-sidebar
• 右导航：right-sidebar
• 菜单：menu
• 子菜单：sub-menu
• 标题：title
• 摘要：summary

3.功能

• 标志：logo
• 广告：banner
• 登录：login
• 登录条：login-bar
• 注册：register
• 搜索：search
• 功能区：shop
• 标题：title
• 新闻：news
• 下载：download
• 友情链接：friendly-link
• 指南：guild
• 滚动：scroll
• 版权：copyright
• 投票：vote
• 热点：hot
• 状态：status
• 服务：service
• 按钮：btn
• 列表：list
• 当前的：current
• 注释：note
• 图标：icon

8. 常用的CSS文件命名

主要 master.css, style.css, main.css
布局 layout.css
专栏 columns.css
文字 font.css
打印 print.css
主题 themes.css
附加 attach.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
表单 forms.css
补丁 mend.css