CSS命名规范

标签: css 命名 规范 | 发表时间:2012-07-27 14:30 | 作者:dyllove98
出处:http://www.blogjava.net/
网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性。
id的命名: 
(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)

附:一些CSS框架的命名参考
主要的master.css 模块 module.css 基本共用base.css 
主题 themes.css 专栏 columns.css 打印print.css 
文字 font.css 表单 forms.css 补丁mend.css 
布局,版面 layout.css


dyllove98 2012-07-27 22:30 发表评论

相关 [css 命名 规范] 推荐:

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性. 容器: container 页头:header 内容:content/container. 页面主体:main 页尾:footer 导航:nav . 侧栏:sidebar 栏目:column 左右中:leftright center .

前端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 的方式.