06
2010
02

CSS编写和命名规范

在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。特制定以下CSS编写和命名规范文档作为本公司以后CSS编写和命名规范。

 

第一节 CSS样式文件的命名

建立样式表文件时,分类编写样式到下列样式表文件中,并统一放在【CSS】文件夹里:

主要

main.css

文字样式

font.css

表格

table.css

主题

themes.css

打印

print.css

补丁

mend.css

 

第二节 CSS选择符的命名

所有选择符必须有小写英文字母或“_”下划线组成;样式名必须是表示该样式的大概含义;参考后面的样式命名参考

当定义的样式名比较复杂时用下划线把层次分开;

比如:dcrm_logo{ …}   dcrm_logo_ico{…}

 第三节 图片的命名与书写

图片的命名原则小写英文字母名称放在头尾两部分,用“_”下划线隔开,头部表示此图片的大类性质例如广告、标志、菜单、按钮等等;尾部表示图片的概念。

 

广告

banner

标志

logo

链接的小图片

button

装饰图

pic

标题的图片

title

 

 

banner_sohu.gif banner_sina.gif menu_about_us.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg

 

第四节 CSS注释书写规范 4.1 提示和标签信息注释

这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。

.search{

border:1px solid #fff;   /*Border Color*/ }

注意:注释内容和前面样式语句间有3个空格,后面1个空格

 

4.2 修改样式注释(时间和相关人员)

/*__Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: hour

--------------------------------------------------------------------------------------------*/

4.3 文档结构

/*__Header

--------------------------------------------------------------------------------------------*/

.search{

       border:1px solid #fff;   /*Border Color*/ }

 

/*__Menu

--------------------------------------------------------------------------------------------*/

.menul_ul{

       border:1px solid #fff;   /*Border Color*/ }

 

注意:相对独立的2段内容之间空1

 

第五节 CSS布局编码标准和建议 5.1 建立样式表索引 

样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息,它一般是一段格式化的CSS注释文本写在 main.css中。给出该CSS文件作者的相关信息;定义站点的布局,记录文件版本号(利于多作者协作及将来更新) 

/*---------------------------------------------------------------------------------------------

*Filename:                        main.css

*Description:                      Global CSS

*Version:                         1.0.0(2009-12-28)YYYY-MM-DD

*Website:                         http://www.testsoft.com

==STRUCTURE:=================================== == ==== =====

*Page width:                       980px

*Number of columns:                2

--------------------------------------------------------------------------------------------*/

5.2 命名锚点 的使用

命名锚点是用来规划整个CSS文件结构的(就好像书签一样),从而使整个CSS文件获得良好的组织。命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统,所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点,并在整个文档中查找,从而获取该CSS节。

*==STRUCTURE:===============================================

$__header              Header Definitions

$__menu                Global Site

$__content             Everything within the content

-----------------------------------------------------------------------------------------------*/

/*__header

-----------------------------------------------------------------------------------------------*/

{...Header CSS Definitions...}

/*__menu

----------------------------------------------------------------------------------------------*/

{...Header CSS Definitions...}

5.3 建立良好的CSS编码顺序

最后定义的 CSS 样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式,比如下面这个例子:

p { color: red; background: yellow;}

p { color: green;}

以上的段落最终将呈现绿色的字体,并带有黄色的背景,这是因为最后定义的 color:green 将之前定义的 red 覆盖掉了,至于黄色背景为何没有消失,那是因为第二个 p 的定义中并没有与之冲突的定义,因此它还是有效的。

5.4 合适的缩写

CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。CSS缩写会使CSS文档更加干净、简洁;缩写语法参考相关章节。

5.5 CSS图像拼合(CSS Sprites技术

CSS Sprites技术:将用到的所有背景图片合并为一张图片,使用css背景属性,来控制图片的显示位置和方式。CSS Sprites技术的应用可以大大减少HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

 

5.6 CSS组合和嵌套

CSS组合

你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。

h2 { color: red; }    

.w3cbbs { color: red; }      

.w3cbbs_52css { color: red; }

则你可以这样写h2,.w3cbbs,.w3cbbs_52css { color: red; }

CSS嵌套

CSS结构好的话,没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。

#top { background-color: #ccc; padding: 1em;}

#top h1 { color: #ff0; }

#top p { color: red; font-weight: bold; }

 

第六节 常用CSS选择符命名参考

导航

nav

页头

header

主导航

mainnav

页面主体

main

顶导航

topnav

内容

content

子导航

subnav

页脚

footer

菜单

menu

版权

copyright

子菜单

submenu

登陆

login

标志

logo

侧栏

sidebar

广告

banner

搜索

search

滚动

scroll

标签页

tab

小技巧

tips

合作伙伴

partner

加入

joinus

标题

title

注册

regsiter

指南

guild

新闻

news

下载

download

按钮

button

状态

status

服务

service

投票

vote

注释

note

友情链接

friendlink

提示信息

msg

 

 

 

注意:命名方式使用类别_功能的方式.bar_news{}   .bar_product{})。

« 上一篇 下一篇 »