css命名规范整理

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

一、文件规范

1、文件均归档至约定的目录中。

所有的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

主要的 master.css

模块 module.css

基本共用 base.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

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

- 外联方式：（类型声明type=”text/css”可以省略）

- 内联方式： （类型声明type=”text/css”可以省略）

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

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

- 文件名必须由小写字母、数字、中划线组成

- 文件必须用UTF-8编码，使用UTF-8（非BOM），在HTML中指定UTF-8编码，在CSS中则不需要特别指定因为默认就是UTF-8。

- 单个CSS文件避免过大（建议少于300行）

二、注释规范

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

- /*

- * @description: 中文说明

- * @author: name

- * @update: name (2013-04-13 18:32)

- */

复制代码2、模块注释

- /* module: module1 by 张三 */

- …

- /* module: module2 by 张三 */

复制代码模块注释必须单独写在一行

3、 单行注释与多行注释

/* this is a short comment

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

* this is comment line 1.

* this is comment line 2.

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

4、特殊注释

/* TODO: xxxx by name 2013-04-13 18:32 *//* BUGFIX: xxxx by name

2012-04-13 18:32 */用于标注修改、待办等信息

5、区块注释

- /* Header */

- /* Footer */

- /* 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.常用css命名

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guide

服务：service

注册：register

状态：status

投票：vote

合作伙伴：partner

3.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必须写成多行形式 ;

- 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐 ;

- 属性名冒号之前不加空格，冒号之后加空格;

- 属性值之后添加分号;

2、属性编写顺序

- 显示属性：display/list-style/position/float/clear …

- 自身属性（盒模型）：width/height/margin/padding/border

- 背景：background

- 行高：line-height

-文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

- 其他：cursor/z-index/zoom/overflow

- CSS3属性：transform/transition/animation/box-shadow/border-radius

- 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- /

std的顺序进行添加，标准属性写在最后。

- 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active

3、规则书写规范

- 使用单引号，不允许使用双引号;

- 每个声明结束都应该带一个分号，不管是不是最后一个声明;

- 除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写;

- 除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置;

- 每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性;

4、代码性能优化

- 合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。

- 选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。

- 注意选择器的性能，不要使用低性能的选择器。

- 禁止在css中使用*选择符。

- 除非必须，否则，一般有class或id的，不需要再写上元素对应的tag。

- 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px。

- 如果是16进制表示颜色，则颜色取值应该大写。

- 如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC 。

- 如果没有边框时，不要写成border:0，应该写成border:none 。

- 尽量避免使用AlphaImageLoader 。

- 在保持代码解耦的前提下，尽量合并重复的样式。

- background、font等可以缩写的属性，尽量使用缩写形式 。

5、CSS Hack的使用

请不用动不动就使用浏览器检测和CSS Hacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！

6、字体规则

- 为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋体(SimSun) 微软雅黑(Microsoft Yahei，几个单词中间有空格组成的必须加引号)

- 字体粗细采用具体数值，粗体bold写为700，正常normal写为400

-font-size必须以px或pt为单位，推荐用px（注：pt为打印版字体大小设置），不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值

- 为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，font-family不允许在业务代码中随意设置

五、其他规范

- 不要轻易改动全站级CSS和通用CSS库。改动后，要经过全面测试。

- 避免使用filter

- 避免在CSS中使用expression

- 避免过小的背景图片平铺。

- 尽量不要在CSS中使用!important

- 绝对不要在CSS中使用”*”选择符

-层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。

- 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按照模块、业务、页面来划分均可。

六、测试规范

1、了解浏览器特效支持为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持。

2、 设定浏览器支持标准

- A级－交互和视觉完全符全设计的要求

- B级－视觉上允许有所差异，但不破坏页面的整体效果

- C级－可忽略设计上的细节，但不防碍使用

3、常用样式测试工具

W3C CSS validator：http://jigsaw.w3.org/css-validator/

CSS Lint：http://csslint.net/

CSS Usage：https://addons.mozilla.org/en-us/firefox/addon/css-usage/

原文链接：http://www.86y.org/art_detail.aspx?id=740

附录：

1.文件命名

head.asp 头文件

foot.asp 底文件

index.asp 首页文件

sort.html 分类嵌套文件

article_channel.asp 文章_频道页

article_list.asp 文章_列表页

article_detail.asp 文章_显示页

注明：如果有多个文章频道，则用article01， article02，article03等等

exhibit_channel.asp 展会信息_频道页

exhibit_list.asp 展会信息_列表页

exhibit_detail.asp 展会信息_显示页

product_channel.asp 产品中心_频道页

product_list.asp 产品中心_列表页

prodect_detail.asp 产品中心_显示页

corporation_channel.asp 会员_频道页

corporation_list.asp 会员_列表页

corporation_detail.asp 会员_显示页

information_channel.asp 商机信息_频道页

information_list.asp 商机信息_列表页

information_detail.asp 商机信息_显示页

job_channel.asp 招聘_频道页

job_list.asp 招聘_列表页

job_detail.asp 招聘_显示页

hr_channel.asp 求职_频道页

hr_list.asp 求职_列表页

hr_detail.asp 求职_显示页

job_hr_channel.asp 人才中心_频道页

job_hr_lisr.asp 人才中心_列表页

job_hr_detail.asp 人才中心显示页

copyright.asp 版权页

2.图片命名

导航命名：menu.gif 如：menubg .gif（导航的背景图）

会员登录：login.gif 如：loginbg.gif （会员登陆的背景图）

搜索命名：search.gif 如：search_bg.gif （搜索的背景图）

小 图 标：ico_数字.gif 如：ico_001.gif

线的命名：line_X_颜色.gif 如：line_X_red.gif（红色横向虚线）说明：line只命名虚线

line_Y_red.gif（红色纵向虚线）

广告命名：ad_数字.gif 如：ad001.gif

其它栏目的图片：以栏目名的第一个字母.gif

如：xwzx_bg.gif （新闻中心背景） cpzx_l.gif （产品中心的左边图）

产品与栏目热点图片： pic_数字.gif 如：pic_001.gif

说明：上、下、左、右 可以缩写为T、B、L、R

3.相对于网页外层重要部分css命名

外套 wrap ------------------用于最外层

头部 header ----------------用于头部

主要内容 main ------------用于主体内容（中部）

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

4.网页公共命名

#wrapper页面外围控制整体布局宽度

#container或#content容器,用于最外层

#layout布局

#head, #header页头部分

#foot, #footer页脚部分

#nav主导航

#subnav二级导航

#menu菜单

#submenu子菜单

#sideBar侧栏

#sidebar_a, #sidebar_b左边栏或右边栏

#main页面主体

#tag标签

#msg #message提示信息

#tips小技巧

#vote投票

#friendlink友情连接

#title标题

#summary摘要

#loginbar登录条

#searchInput搜索输入框

#hot热门热点

#search搜索

#search_output搜索输出和搜索结果相似

#searchBar搜索条

#search_results搜索结果

#copyright版权信息

#branding商标

#logo网站LOGO标志

#siteinfo网站信息

#siteinfoLegal法律声明

#siteinfoCredits信誉

#joinus加入我们

#partner合作伙伴

#service服务

#regsiter注册

arr/arrow箭头

#guild指南

#sitemap网站地图

#list列表

#homepage首页

#subpage二级页面子页面

#tool, #toolbar工具条

#drop下拉

#dorpmenu下拉菜单

#status状态

#scroll滚动

.tab标签页

.left .right .center居左、中、右

.news新闻

.download下载

.banner广告条(顶部广告条)

5.电子贸易相关

.products产品

.products_prices产品价格

.products_description产品描述

.products_review产品评论

.editor_review编辑评论

.news_release最新产品

.publisher生产商

.screenshot缩略图

.faqs常见问题

.keyword关键词

.blog博客

.forum论坛

6.常用文件命名

master.css,style.css主要的

module.css模块

base.css基本共用

layout.css布局，版面

themes.css主题

columns.css专栏

font.css文字、字体

forms.css表单

mend.css补丁

print.css打印

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,045评论 25赞 707
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4赞 60
  • 加班时跑步15分钟，我收获了什么
    昨晚加班有点累。离开公司之前，我决定换上衣服去健身房出点汗。 刚换好衣服，手机响了，供应商来电话了。跑步的十五分钟...
    旦卉阅读 519评论 4赞 1
  • 致
    北方有佳人， 绝世而独立。 一顾倾人城， 再顾倾人国。
    华中论帅NO1阅读 226评论 2赞 3