CSS的命名规范

CSS命名规范

常用的CSS命名规则： Jwgcms模板
头：headerJwgcms模板
内容：content/containerJwgcms模板
尾：footerJwgcms模板
导航：navJwgcms模板
侧栏：sidebarJwgcms模板
栏目：columnJwgcms模板
页面外围控制整体布局宽度：wrapperJwgcms模板
左右中：left right centerJwgcms模板
登录条：loginbarJwgcms模板
标志：logoJwgcms模板
广告：bannerJwgcms模板
页面主体：mainJwgcms模板
热点：hotJwgcms模板
新闻：newsJwgcms模板
下载：downloadJwgcms模板
子导航：subnavJwgcms模板
菜单：menuJwgcms模板
子菜单：submenuJwgcms模板
搜索：searchJwgcms模板
友情链接：friendlinkJwgcms模板
页脚：footerJwgcms模板
版权：copyrightJwgcms模板
滚动：scrollJwgcms模板
内容：contentJwgcms模板
标签页：tabJwgcms模板
文章列表：listJwgcms模板
提示信息：msgJwgcms模板
小技巧：tipsJwgcms模板
栏目标题：titleJwgcms模板
加入：joinusJwgcms模板
指南：guildJwgcms模板
服务：serviceJwgcms模板
注册：regsiterJwgcms模板
状态：statusJwgcms模板
投票：voteJwgcms模板
合作伙伴：partner

Jwgcms模板
(二)注释的写法:Jwgcms模板
/* Footer */Jwgcms模板
内容区 Jwgcms模板
/* End Footer */

(三)id的命名:

(1)页面结构Jwgcms模板
容器: containerJwgcms模板
页头：headerJwgcms模板
内容：content/containerJwgcms模板
页面主体：mainJwgcms模板
页尾：footerJwgcms模板
导航：navJwgcms模板
侧栏：sidebarJwgcms模板
栏目：columnJwgcms模板
页面外围控制整体布局宽度：wrapperJwgcms模板
左右中：left right center

(2)导航Jwgcms模板
导航：navJwgcms模板
主导航：mainbavJwgcms模板
子导航：subnavJwgcms模板
顶导航：topnavJwgcms模板
边导航：sidebarJwgcms模板
左导航：leftsidebarJwgcms模板
右导航：rightsidebar

菜单：menuJwgcms模板
子菜单：submenuJwgcms模板
标题: titleJwgcms模板
摘要: summary

(3)功能Jwgcms模板
标志：logoJwgcms模板
广告：bannerJwgcms模板
登陆：loginJwgcms模板
登录条：loginbarJwgcms模板
注册：regsiterJwgcms模板
搜索：searchJwgcms模板
功能区：shop

标题：titleJwgcms模板
加入：joinusJwgcms模板
状态：statusJwgcms模板
按钮：btnJwgcms模板
滚动：scroll

标签页：tabJwgcms模板
文章列表：listJwgcms模板
提示信息：msgJwgcms模板
当前的: currentJwgcms模板
小技巧：tipsJwgcms模板
图标: iconJwgcms模板
注释：note

指南：guildJwgcms模板
服务：serviceJwgcms模板
热点：hotJwgcms模板
新闻：newsJwgcms模板
下载：downloadJwgcms模板
投票：voteJwgcms模板
合作伙伴：partnerJwgcms模板
友情链接：linkJwgcms模板
版权：copyright

Jwgcms模板
(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如Jwgcms模板
.red { color: red; }Jwgcms模板
.f60 { color: #f60; }Jwgcms模板
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如Jwgcms模板
.font12px { font-size: 12px; }Jwgcms模板
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如Jwgcms模板
.left { float:left; }Jwgcms模板
.bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如Jwgcms模板
.barnews {   }Jwgcms模板
.barproduct {   }Jwgcms模板
注意事项::Jwgcms模板
1.一律小写； Jwgcms模板
2.尽量用英文； Jwgcms模板
3.不加中杠和下划线；Jwgcms模板
4.尽量不缩写，除非一看就明白的单词.

注：禾火木风对此有不同的看法。我比较习惯第一个单词小写而第二个单词首字母大写，比较清晰，如sideBar、titleBar等，也有人喜欢这样形式的,side_bar

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