CSS 开发规范文档

说明：本文档为前端CSS规范

一、代码风格

  1. 采用 UTF-8 编码，在 CSS 头部引用 @charset "utf-8";
  2. 使用2个空格即1个tab字符作为一个缩进层级，不允许使用4个空格或2个tab字符
  3. 每行不得超过120个字符，除非单行不可分割
  4. 选择器嵌套层级不大于3级，位置靠后的限定条件应尽可能精确。
  5. 尽量不要使用@import，与相比，@import速度较慢，增加了额外的页面请求，并可能导致其他无法预料的问题。
  6. Media Query不得单独编排，必须与相关的规则一起定义。

二、样式属性顺序

  1. 布局位置（position，top，right，z-index，display，float等）
  2. 尺寸大小（宽度，高度，填充，边距）
  3. 文字系列（字体，行高，字母间距，颜色文字对齐等）
  4. 视觉效果（background，border等）
  5. 其他（动画，转换等）

三、缩写属性和属性值

  1. CSS有些属性是可以缩写的，比如填充，边缘，字体，背景，边框等等，缩写代码可以提高用户的阅读体验
  2. 当数值为小数时，小数点前面的“0”可以去除
  3. “0像素”后面的单位可以去除
  4. 16进制的颜色代码重叠的字符可以缩写的尽量缩写

四、规则声明块样式规范

  1. 当规则声明块中有多个样式声明时，每条样式独占一行。
  2. 列表属性并排书写时，用逗号分隔，逗号后必须跟一个空格
  3. 选择器与左大括号 { 之间必须加一个空格
  4. 属性名与冒号之间不允许包含空格，冒号与属性值之间必须包含空格
  5. 在每条样式后面都以分号 ; 结尾。
  6. 规则声明块的右大括号 } 独占一行。
  7. 所有最外层引号使用单引号 ' ' 。
  8. 当一个属性有多个属性值时，以逗号, 分隔属性值，每个逗号后添加一个空格，当单个属性值过长时，每个属性值独占一行。
  9. 每个规则声明间用空行分隔。

五、命名规范

  1. 一律小写
  2. 尽量用英文
  3. 命名短且语义化要好
  4. 名字长的单词可以选择使用烤串命名法，中间加横线来为选择器命名
  5. 不建议使用下划线来命名，存在浏览器兼容性问题，其次是JavaScript的变量命名也是用下划线，容易造成混淆。
  6. 不要滥用id标识，id在JS中是唯一的，不能多次使用，应该按需使用
  7. 统一语义理解和命名

命名整理：

  • 页面结构
命名 语义
doc 文档
page 页面
wrap、wrapper、box 盒容器
head、header 头部（页头区域，用于头部）
nav 导航条
main 网站中的主要区域（表示最重要的一块位置），用于中部主体内容
container 一个整体容器
content 内容，网站中最重要的内容区域，用于网页中部主体
column 栏目
sidebar 侧栏
foot、footer 页尾、页脚
  • 模块 、元件
命名 语义
banner 标语、广告条、顶部广告条
login 登录（例如登录表单：form-login）
loginbar 登录条
register 注册
tool、toolbar 工具条
search 搜索
searchbar 搜索条
searchlnput 搜索输入框
shop 功能区，表示现在的
icon 小图标
label、branding 商标
homepage 首页
subpage 二级页面子页面
hot 热门热点
list 文章列表（例如新闻列表：list-news）
news 新闻
scroll 滚动
tag 标签
sitemap 网站地图
msg 或 message 提示信息
current 当前的
joinus 加入
status 状态
btn 按钮（例如搜索按钮可写成：btn-search）
tips 小技巧
note 注释
guild 指南
arr、arrow 标记箭头
service 服务
breadcrumb、crumb 面包屑 (即页面所处位置导航提示）
download 下载
vote 投票
siteinfo 网站信息
partner 合作伙伴
link、friendlink 友情链接
copyright 版权信息
siteinfo-credits 信誉
siteinfo-legal 法律信息
nav 导航
subnav 子导航
menu 菜单
tab 选项卡
head、title 标题区
table 表格
form 表单
input 输入
top 排行
logo 标志
ad、advertising 广告
slide 幻灯片
tips 提示
help 帮助
faq 常见问题
  • 功能
命名 语义
clear-both 浮动清除
float-left 向左浮动
float-right 向右浮动
inline-block 内联块级
textalign-center 文本居中
textalign-right 文本居右
textalign-left 文本居左
verticalalign-middle 垂直居中
overflow-hidden 溢出隐藏
display-none 完全消失
font-size 字体大小
font-weight 字体粗细
  • 皮肤
命名 语义
font-color 字体颜色
background 背景
background-color 背景颜色
background-image 背景图片
background-position 背景定位
border-color 边框颜色
  • 状态
命名 语义
selected 选中
current 当前
show 显示
hide 隐藏
open 打开
close 关闭
error 出错
disabled 不可用
  • 样式
类别 命名、语义
对齐样式命名 left（左边内容）、center（中间内容）、right（右边内容）等；
颜色英文命名 red（红色）、green（绿色）、yellow（黄色），又或者border-red（红色边框）等；
颜色代码命名 f00（红色）、ff0（黄色）、f90（橙色）等；
文字大小命名 font12px（字体12像素）、font16px（字体16像素）等；
页面线条命名 line-x （横线）、line-y （纵线）或 line-red（红线）、line-black（黑线）
图片图标命名 pic-1.jpg、pic-2.jpg 或 ico-1.gif、ico-2.gif
页面广告命名 ad-01、ad-02
背景框架命名 nav-bg（代表导航条的背景图片位置）、tool-bg（代表工具栏的背景图片位置）
  • 导航
命名 语义
nav、navbar、navigation、nav-wrapper 导航条或导航包，代表横向导航
topnav 顶部导航
mainbav 主导航
subnav 子导航
sidebar 边导航
leftsidebar 或 sidebar-a 左导航
rightsidebar 或 sidebar-b 右导航
title 标题
summary 摘要
menu 菜单，区域包含一般的链接和菜单
submenu 子菜单
drop 下拉
dorpmenu 下拉菜单
links 链接菜单

六、注释规范

  1. 单行注释：
/* 注释内容 */
  • 星号与具体的注释内容之间使用一个空格分隔；
  • 注释通常位于一段CSS代码上部，用于说明此部分CSS代码的功效；
    示例：
/* 评论 */
.comment {...}

/* 相册 */
.photo {...}

/* 分享 */
.share {...}

/* 投票 */
.vote {...}
  1. 多行注释
/**
 * 蚂蚁部落CSS教程
 */
  • CSS多行注释与单行注释采用相同的语法结构，只是将"*/"换行。
  • 为了代码的美观，通常星号要一列对齐，且星号与内中之间有空格。
  1. CSS文件注释
/**
 * @name: 文件名或模块名
 * @description: 文件或模块描述
 * @author: authorName(mailName@tcsoft.com)
 *          authorName2(mailName2@tcsoft.com)
 * @update: 2019-10-18 10:10
 */

七、css样式表命名

分类 表名
主要的 master.css
布局、版面 layout.css
全局公用样式 global.css
基本共用 base.css
文字 font.css
打印 print.css
模块 module.css
表单 forms.css
主题 themes.css
专栏 column
单独首页 index.css
通用头部 head.css
补丁，私有化修补 mend.css
更新日志
JS开发规范