CSS命名规范
- - BlogJava-首页技术区网上整理的比较好的css命名规则，为css代码的规范化做参考，增加代码的可读性. 容器: container 页头：header 内容：content/container. 页面主体：main 页尾：footer 导航：nav . 侧栏：sidebar 栏目：column 左右中：leftright center .
CSS命名规范
标签：
css
命名
规范
| 发表时间：2012-07-27 22:30 | 作者：dyllove98
出处：http://www.blogjava.net/
网上整理的比较好的css命名规则，为css代码的规范化做参考，增加代码的可读性。
id的命名:
(1)页面结构
容器: container 页头：header 内容：content/container
页面主体：main 页尾：footer 导航：nav
侧栏：sidebar 栏目：column 左右中：leftright center
页面外围控制整体布局宽度：wrapper
(1)页面结构
容器: container 页头：header 内容：content/container
页面主体：main 页尾：footer 导航：nav
侧栏：sidebar 栏目：column 左右中：leftright center
页面外围控制整体布局宽度：wrapper
(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.不使用大写形式的类名和id名;
2.尽可能使用描述性的英文单词的组合作为类名和id名;
3.id名及类名的多个英文单词之间使用“_”短横线分隔;
4.按区域进行描述编号 例：main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)
导航：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.不使用大写形式的类名和id名;
2.尽可能使用描述性的英文单词的组合作为类名和id名;
3.id名及类名的多个英文单词之间使用“_”短横线分隔;
4.按区域进行描述编号 例：main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)
附：一些CSS框架的命名参考
主要的master.css 模块 module.css 基本共用base.css
主题 themes.css 专栏 columns.css 打印print.css
文字 font.css 表单 forms.css 补丁mend.css
布局，版面 layout.css
主题 themes.css 专栏 columns.css 打印print.css
文字 font.css 表单 forms.css 补丁mend.css
布局，版面 layout.css
相关 [css 命名 规范] 推荐：
前端CSS规范整理
- - 标点符1、文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解：. 所有的CSS分为两大类：通用类和业务类. 通用的CSS文件，放在如下目录中：. 基本样式库 /css/core. 通用UI元素样式库 /css/lib. JS组件相关样式库 /css/ui. 业务类的CSS是指和具体产品相关的文件，放在如下目录中：.
(转)豆瓣css开发规范
- Hu DongHai - 小豪~麦穗的部落格今天无意间看到了豆瓣的一些前端开发规范，攻城师作战指南. 里面的Javascript代码风格规范 差不多就是基本的javascript规范，主要还是分享一下 css部分的规范. 因为规范是在google docs上，需要穿过篱笆，所以我就直接帖过来了，一起学习一下哈. ——————————————–华丽的分割线————————————————.
优秀的 HTML 和 CSS 代码规范
- - SHTION官方网站HTML 和 CSS 代码规范究竟是怎么样的. 做网站时， HTML 和 CSS 代码有什么要求. HTML 和 CSS 代码的写法是否影响网站的SEO. 写好 HTML 和 CSS 代码需要注意些什么. 一般大型WEB站点开发设计人员，要求使用者具有一定的 HTML、CSS基础知识，对原代码具有较强的控制能力.
Css选择器命名规则
- ninickck - 前端观察操作系统版本：Windows 7. 浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev. 受影响的浏览器：所有浏览器.. 经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式...
翻译：谷歌HTML、CSS和JavaScript风格规范
- - 张鑫旭-鑫空间-鑫生活本文地址： http://www.zhangxinxu.com/wordpress/?p=2511. 原文地址： http://…style-guides/. 原文作者： Craig Buckler. 注：本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范，而是一种带有总结性质的简单称述.
大型网站css样式命名和应用原则
- - 教育技术前沿探索原则1：首页DIV最小块级单位须设置高度；子页可能添加资料的DIV块不应设置高度;. 原则2：css 样式继承关系必须控制在三层以内；. 原则3： 对于浮动所产生的IE6BUG,在全局样式里面应定义.clear{clear:both;height;0px; overflow: hidden;}. 原则 4：所有页面文件的编码格式统一为：UTF-8;.
Java编程风格与命名规范整理
- - BlogJava-首页技术区基本命名规范
包命名. 包名按照域名的范围从大到小逐步列出，恰好和Internet上的域名命名规则相反. ”连接的标识符构成，通常第一个标识符为符合网络域名的两个或者三个英文小写字母. 类的名字必须由大写字母开头而单词中的其他字母均为小写；如果类名称由多个单词组成，则每个单词的首字母均应为大写例如TestPage；如果类名称中包含单词缩写，则这个所写词的每个字母均应大写，如：XMLExample,还有一点命名技巧就是由于类是设计用来代表对象的，所以在命名类时应尽量选择名词.
CSS图形
- GLORY - 酷壳 - CoolShell.cn下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码. 经测试，IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.
用 Compass 寫 CSS
- Jay - Blog.XDite.net最近在開發一個新產品，整體來說應該是接近寫完了，不過越接近完工，抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass，說這東西超神奇，超好用，還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了，只是文件實在看起來太他媽的眼花繚亂，因為專案進度一直在跑，不太敢貿然換掉寫 CSS 的方式.