文章整理了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行）
二、常用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
常用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
属性编写顺序
显示属性：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
文件命名
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 版权页
图片命名
导航命名：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
相对于网页外层重要部分css命名
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
常用文件命名
master.css,style.css主要的
module.css模块
base.css基本共用
layout.css布局，版面
themes.css主题
columns.css专栏
font.css文字、字体
forms.css表单
mend.css补丁
print.css打印
网友评论