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行）

二、常用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打印