前端 CSS 规范大全

文章整理了Web前端开发中的各种CSS规范，包括文件规范、注释规范、命名规范、书写规范、测试规范等。 

一、文件规范 

1、文件均归档至约定的目录中（具体要求以豆瓣的CSS规范为例进行讲解）： 

所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 

• 基本样式库 /css/core
• 通用UI元素样式库 /css/lib
• JS组件相关样式库 /css/ui

业务类的CSS是指和具体产品相关的文件，放在如下目录中： 

• 读书 /css/book/
• 电影 /css/movie/
• 音乐 /css/music/
• 社区 /css/sns/
• 小站 /css/site/
• 同城 /css/location/
• 电台 /css/radio/

外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。另外一对具体的CSS进行文档化的整理。如： 

• util-01 reset /css/core/reset.css
• util-02 通用模块容器 /css/core/mod.css
• ui-01. 喜欢按钮 /css/core/fav_btn.css
• ui-02. 视频/相册列表项 /css/core/media_item.css
• ui-03. 评星 /css/core/rating.css
• ui-04. 通用按钮 /css/core/common_button.css
• ui-05. 分页 /css/core/pagination.css
• ui-06. 推荐按钮 /css/core/rec_btn.css
• ui-07. 老版对话框 /css/core/old_dialog.css
• ui-08. 老版Tab /css/core/old_tab.css
• ui-09. 老版成员列表 /css/core/old_userlist.css
• ui-10. 老版信息区 /css/core/notify.css
• ui-11. 社区用户导航 /css/core/profile_nav.css
• ui-12. 当前大社区导航 /css/core/site_nav.css
• ui-13. 加载中 /css/lib/loading.css

2、文件引入可通过外联或内联方式引入 

link和style标签都应该放入head中，原则上，不允许在html上直接写样式。避免在CSS中使用@import，嵌套不要超过一层。 

• 外联方式：<link rel=”stylesheet” href=”…” />（类型声明type=”text/css”可以省略）
• 内联方式：<style>…</style> （类型声明type=”text/css”可以省略）

3、文件名、文件编码及文件大小 

• 文件名必须由小写字母、数字、中划线组成
• 文件必须用UTF-8编码，使用UTF-8（非BOM），在HTML中指定UTF-8编码，在CSS中则不需要特别指定因为默认就是UTF-8。
• 单个CSS文件避免过大（建议少于300行）

二、注释规范 

1、文件顶部注释（推荐使用） 

Css代码 

1. /*  
2. * @description: 中文说明  
3. * @author: name  
4. * @update: name (2013-04-13 18:32)  
5. */  

2、模块注释 

模块注释必须单独写在一行 

Css代码 

1. /* module: module1 by 张三 */  
2. …  
3. /* module: module2 by 张三 */  

3、单行注释与多行注释 

单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过40个汉字，或者80个英文字符。 

Css代码 

1. /* this is a short comment */  

多行注释必须写在单独行内 

Css代码 

1. /*  
2. * this is comment line 1.  
3. * this is comment line 2.  
4. */  

4、特殊注释 

用于标注修改、待办等信息 

Css代码 

1. /* TODO: xxxx by name 2013-04-13 18:32 */  
2. /* BUGFIX: xxxx by name 2012-04-13 18:32 */  

5、区块注释 

对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。 

Css代码 

1. /* Header */  
2. /* Footer */  
3. /* Gallery */  

三、命名规范 

使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。 

• /* 不推荐: 无意义 */ #yee-1901 {}
• /* 不推荐: 与样式相关 */ .button-green {}.clear {}
• /* 推荐: 特殊性 */ #gallery {}#login {}.video {}
• /* 推荐: 通用性 */ .aux {}.alt {}

常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。 

ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。 

• /* 不推荐 */ #navigation {}.atr {}
• /* 推荐 */ #nav {}.author {}

类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。 

• /* 不推荐 */ul#example {}div.error {}
• /* 推荐 */#example {}.error {}

命名时需要注意的点： 

• 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
• 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
• 命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
• 不允许通过1、2、3等序号进行命名
• 避免class与id重名
• id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
• class用于标识某一个类型的对象，命名必须言简意赅。
• 尽可能提高代码模块的复用，样式尽量用组合的方式
• 规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。

1、常用id的命名： 

(1) 页面结构 

• 容器: container
• 页头：header
• 内容：content/container
• 页面主体：main
• 页尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 页面外围控制整体布局宽度：wrapper
• 左右中：left right center

(2) 导航 

• 导航：nav
• 主导航：mainbav
• 子导航：subnav
• 顶导航：topnav
• 边导航：sidebar
• 左导航：leftsidebar
• 右导航：rightsidebar
• 菜单：menu
• 子菜单：submenu
• 标题: title
• 摘要: summary

(3) 功能 

• 标志：logo
• 广告：banner
• 登陆：login
• 登录条：loginbar
• 注册：regsiter
• 搜索：search
• 功能区：shop
• 标题：title
• 加入：joinus
• 状态：status
• 按钮：btn
• 滚动：scroll
• 标签页：tab
• 文章列表：list
• 提示信息：msg
• 当前的: current
• 小技巧：tips
• 图标: icon
• 注释：note
• 指南：guild
• 服务：service
• 热点：hot
• 新闻：news
• 下载：download
• 投票：vote
• 合作伙伴：partner
• 友情链接：link
• 版权：copyright

2、常用class的命名： 

(1) 颜色:使用颜色的名称或者16进制代码，如 

• .red { color: red; }
• .f60 { color: #f60; }
• .ff8600 { color: #ff8600; }

(2) 字体大小,直接使用”font+字体大小”作为名称，如 

• .font12px { font-size: 12px; }
• .font9pt {font-size: 9pt; }

(3) 对齐样式,使用对齐目标的英文名称，如 

• .left { float:left; }
• .bottom { float:bottom; }

(4) 标题栏样式,使用”类别+功能”的方式命名，如 

• .barnews { }
• .barproduct { }

四、书写规范 

1、排版规范 

(1) 使用4个空格，而不使用tab或者混用空格+tab作为缩进； 
(2) 规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一； 

单行形式书写风格的排版约束： 

• 如果是在html中写内联的css，则必须写成单行；
• 每一条规则的大括号 { 前后加空格 ；
• 每一条规则结束的大括号 } 前加空格；
• 属性名冒号之前不加空格，冒号之后加空格；
• 每一个属性值后必须添加分号; 并且分号后空格；
• 多个selector共用一个样式集，则多个selector必须写成多行形式 ；

多行形式书写风格的排版约束： 

• 每一条规则的大括号 { 前添加空格；
• 多个selector共用一个样式集，则多个selector必须写成

  【前端 CSS 规范大全】相关文章

  1. 前端 CSS 规范大全

  2. 前端编码风格规范之 HTML 规范

  3. 前端编码风格规范之 JavaScript 规范

  4. WEB前端开发规范文档

  5. 最节约时间的Web开发工具网址大全

  6. html5游戏开发引擎大全

  7. Sublime Text 包管理工具及扩展大全

  8. 学习JavaScript必备！基础工具清单大全

  9. CSS书写规范及顺序

  10. HTML5规范尘埃落定，5个开发工具推荐

  本文来源：https://www.51html5.com/a930.html

  点击展开全部