Skip to main content

CSS 书写规范

在上文《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.css 或 common.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. 通用响应式系统指的是在不同设备下要实现响应式布局，当满足了某个断点设定后调用的相应变化样式，比如浮动添加、栅格生效、显示隐藏、版心宽度等。