CSS 开发规范

样式 CSS/Sass/Less

• 1.CSS 属性书写顺序

  1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

  2. 自身属性：width / height / margin / padding / border /background

  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word

  4. 其他属性（CSS3 属性）：content / cursor / border-radius / box-shadow / text-shadow / background

• 2.避免使用行类样式

• 3.提取重写 vant/element 组件的全局样式 如：Vant.scss/Element.scss

• 4.重复 CSS 代码利用 Sass/Less 中的@extend，CSS 代码复用

• 5.尽量不使用 !important 声明。

• 6.颜色缩写，#aaccaa=>#aca，

• 7.数值简写(省略整数部分的 0)，如：opacity: 0.8 => opacity: .8

• 8.每个样式属性后（必须）加 ";"

• 9.Class 命名中（禁止）出现大写字母，（必须）采用” - “对 class 中的字母分隔

• 10.小图片雪碧图 sprite 合并

• 11.链接的样式顺序 a:link -> a:visited -> a:hover -> a:active

CSS 风格

• 1.BEM 风格

网址：http://getbem.com/ (opens new window)

• 2.Bootstrap 风格

网址：https://getbootstrap.com/ (opens new window)

• 3.Semantic UI 风格

网址：https://semantic-ui.com/ (opens new window)

• 4.NEC 风格

网址：http://nec.netease.com/standard (opens new window)