Skip to main content

CSS 书写规范

· 6 min read
Zeffon Wu

在上文《CSS 方法论》中,介绍了四种常见的方法论,但是在实际开发是很难完全落实某一方法论的约定的。所以我在实际开发的需要中,根据 CSS 方法论中 BEM + SMACSS 这两种方法论的结合命名约定总结出自己的一套 CSS 书写规范。

该 CSS 书写规范只是提供大致的规范准则及理论知识,在实际项目中应考虑具体情况而作出调整。

规范规则

命名规范说明

  1. 所有的样式命名都是小写,且采用驼峰式命名
  2. 使用类选择器,不使用 ID 选择器
  3. 命名缩写除了能一看就明白的单词外如 nav、btn 等等,其它不常见的不建议缩写
  4. 数值中为 0 时的单位,如 0px、0em 等,统一缩写为 0
  5. 为了防止后代选择器污染,尽量采用后代选择器 > 方式
  6. 属性值可以简写应进行简写,如 padding、margin、background 等
  7. 前缀来区分布局、模块、状态和主题,"g-"用作全局通用、"m-"用作通用模块、"is-"用作状态、"theme-"用作主题
  8. 样式属性顺序:定位布局类属性,盒模型等自身属性,文本类及修饰类属性
  9. 样式命名方式:采用BEM的约定方式,块-块__元素,块-块__元素--修饰符

样式属性顺序

  1. 定位布局类属性:position、z-index、left、right、top、bottom、clip 等
  2. 模型自身属性:width、height、min-height、max-height、min-width、max-width 等
  3. 文本类及修饰类属性:color、font-size、text-align、text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow 等
  4. 背景相关的属性:background、border 等
  5. css3 中属性:animation、transition、transform、box-shadow、border-radius 等

    其实这种采用一些插件都可以实现属性顺序自动排序,如 vscode 中 csscomb 插件

CSS 布局样式命名

wrap ------------------ 用于最外层
header ---------------- 用于头部
main ------------------ 用于主体内容(中部)
main-left ------------- 左侧布局
main-right ------------ 右侧布局
nav ------------------- 网页菜单导航条
content --------------- 用于网页中部主体
footer ---------------- 用于底部

CSS 全局状态样式命名

is-select -------------------- 选中 is-open ---------------------- 打开 is-close
--------------------- 关闭 is-active -------------------- 激活 is-disable
------------------- 禁用 is-fixed --------------------- 固定

CSS 编程语言选择

CSS 编程语言统一选择 SCSS。

CSS 文件划分及功能分类

CSS 文件划分

一般会对 CSS 进行文件划分,根据文件的性质与用途,大概会分成:

  • 公共型样式
  • 特殊型样式
  • 皮肤型样式
  1. 公共型样式可命名为 global.csscommon.css 等名字,主要包括网站通用样式编写,例如:重置默认样式、网站通用布局、通用模块和元件、通用响应式系统等。
/* 重置样式 */ 省略css代码...
/* 网站通用布局 */ 省略css代码...
/* 通用模块 */ 省略css代码...
/* 通用元件 */ 省略css代码...
/* 通用响应式系统 */ 省略css代码...
  1. 特殊型样式主要是根据当前页面来决定的文件,只针对当前页面做出特殊处理的样式,例如只在首页中用到的样式可放置到 index.css 中,在登录页中用到的样式可放置到 login.css 中。

  2. 皮肤型样式是针对网站需要皮肤功能时,把颜色、背景等抽离出来放到文件中的形式,例如 theme-pink.css、theme-skyblue.css 等。

    CSS 文件的引入顺序如下:

<link href="assets/css/global.css" rel="stylesheet" type="text/css" />
<link href="assets/css/index.css" rel="stylesheet" type="text/css" />
<link href="assets/css/theme.css" rel="stylesheet" type="text/css" />

CSS 功能分类

上面提到了公共型样式,大概可分为如下几类:

  • 重置样式
  • 通用布局(g-)
  • 通用模块(m-)
  • 通用元件(u-)
  • 通用响应式系统
  1. 重置样式主要是去除默认样式和统一不同设备下的表现形态。

reset.css.txt

  1. 网站通用布局主要指的是对网站中出现的大块结构进行排版。如:PC 端中的菜单、内容的左右布局方案;移动端中的头部、列表、尾部的上中下布局方案等。
  2. 通用模块指的是网页中可以重复使用的较大的整体,比如导航、登录、注册、各种列表、评论、搜索等。
  3. 通用元件指的是不可再分的较为小巧的个体,通常被重复用于各种模块中,比如按钮、输入框、loading、图标等。
  4. 通用响应式系统指的是在不同设备下要实现响应式布局,当满足了某个断点设定后调用的相应变化样式,比如浮动添加、栅格生效、显示隐藏、版心宽度等。