CSS 开发规范文档
说明:本文档为前端CSS规范
一、代码风格
- 采用 UTF-8 编码,在 CSS 头部引用 @charset "utf-8";
- 使用2个空格即1个tab字符作为一个缩进层级,不允许使用4个空格或2个tab字符
- 每行不得超过120个字符,除非单行不可分割
- 选择器嵌套层级不大于3级,位置靠后的限定条件应尽可能精确。
- 尽量不要使用@import,与相比,@import速度较慢,增加了额外的页面请求,并可能导致其他无法预料的问题。
- Media Query不得单独编排,必须与相关的规则一起定义。
二、样式属性顺序
- 布局位置(position,top,right,z-index,display,float等)
- 尺寸大小(宽度,高度,填充,边距)
- 文字系列(字体,行高,字母间距,颜色文字对齐等)
- 视觉效果(background,border等)
- 其他(动画,转换等)
三、缩写属性和属性值
- CSS有些属性是可以缩写的,比如填充,边缘,字体,背景,边框等等,缩写代码可以提高用户的阅读体验
- 当数值为小数时,小数点前面的“0”可以去除
- “0像素”后面的单位可以去除
- 16进制的颜色代码重叠的字符可以缩写的尽量缩写
四、规则声明块样式规范
- 当规则声明块中有多个样式声明时,每条样式独占一行。
- 列表属性并排书写时,用逗号分隔,逗号后必须跟一个空格
- 选择器与左大括号 { 之间必须加一个空格
- 属性名与冒号之间不允许包含空格,冒号与属性值之间必须包含空格
- 在每条样式后面都以分号 ; 结尾。
- 规则声明块的右大括号 } 独占一行。
- 所有最外层引号使用单引号 ' ' 。
- 当一个属性有多个属性值时,以逗号, 分隔属性值,每个逗号后添加一个空格,当单个属性值过长时,每个属性值独占一行。
- 每个规则声明间用空行分隔。
五、命名规范
- 一律小写
- 尽量用英文
- 命名短且语义化要好
- 名字长的单词可以选择使用烤串命名法,中间加横线来为选择器命名
- 不建议使用下划线来命名,存在浏览器兼容性问题,其次是JavaScript的变量命名也是用下划线,容易造成混淆。
- 不要滥用id标识,id在JS中是唯一的,不能多次使用,应该按需使用
- 统一语义理解和命名
命名整理:
命名 |
语义 |
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 |
链接菜单 |
六、注释规范
- 单行注释:
/* 注释内容 */
- 星号与具体的注释内容之间使用一个空格分隔;
- 注释通常位于一段CSS代码上部,用于说明此部分CSS代码的功效;
示例:
/* 评论 */
.comment {...}
/* 相册 */
.photo {...}
/* 分享 */
.share {...}
/* 投票 */
.vote {...}
- 多行注释
/**
* 蚂蚁部落CSS教程
*/
- CSS多行注释与单行注释采用相同的语法结构,只是将"*/"换行。
- 为了代码的美观,通常星号要一列对齐,且星号与内中之间有空格。
- 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 |