建议大家用的css命名规则

猫性男孩

相信大家对css样式命名都多少感到困难，特别是想起一个有意义的名，更难。本文作者整理了样式的命名规则，希望能更实用些。

AD：2013大数据全球技术峰会低价抢票中

每个人的CSS命名规则都不一样，给后期维护人员带来麻烦。如果大家都统一的话，就提高了工作效率，方便自己，也方便他人。下面为你介绍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

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner  

二、注释的写法

/* Footer */

内容区

/* End Footer */

三、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

四、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.一律小写; 2.尽量用英文; 3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的 master.css 模块 module.css 基本共用 base.css 布局，版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css

悦鹜

关键是好多都不懂或一知半解的，怎么能用好啊

猫性男孩

悦鹜 发表于 2013-3-29 15:12
关键是好多都不懂或一知半解的，怎么能用好啊

这些是大多数公用的标签的命名，只不过让 你看起来更专业些，对于程序开发来说，如果要找某个标签也方便些，如果你事先和程序员协商好，那命名只要你们的开发团队看清楚就好，没有过分的要求

光明使者

悦鹜 发表于 2013-3-29 15:12
关键是好多都不懂或一知半解的，怎么能用好啊

这就一标准罢了....