CSS命名规范和CSS书写规范.docx

/*=====主导航=====*/

#mainMenu {

width:

100%;

height:

30px;

background:

url（images/mainMenu_bg.jpg） repeat-x;

}

#mainMenu ul li {

float:

left;

line-height:

30px;

margin-right:

1px;

cursor:

pointer;

}

/*=====主导航结束=====*/

9、鼠标手势：

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:

pointer;”

二．注释书写规范

1、行间注释：

直接写于属性值后面，如：

.search{

border:

1px solid #fff;/*定义搜索输入框边框*/

background:

url（../images/icon.gif） no-report #333;/*定义搜索框的背景*/

}

2、整段注释：

分别在开始及结束地方加入注释，如：

/*=====搜索条=====*/

.search {

border:

1px solid #fff;

background:

url（../images/icon.gif） no-repeat #333;

}

/*=====搜索条结束=====*/

三．样式属性代码缩写

1、不同类有相同属性及属性值的缩写：

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。

如：

#mainMenu {

background:

url（../images/bg.gif）;

border:

1px solid #333;

width:

100%;

height:

30px;

overflow:

hidden;

}

#subMenu {

background:

url（../images/bg.gif）;

border:

1px solid #333;

width:

100%;

height:

20px;

overflow:

hidden;

}

两个不同类的属性值有重复之处，刚可以缩写为：

#mainMenu,#subMenu {

background:

url（../images/bg.gif）;

border:

1px solid #333;

width:

100%;

overflow:

hidden;

}

#mainMenu {height:

30px;}

#subMenu {height:

20px;}

2、同一属性的缩写：

同一属性根据它的属性值也可以进行简写，如：

.search {

background-color:

#333;

background-image:

url（../images/icon.gif）;

background-repeat:

 no-repeat;

background-position:

50% 50%;

}

.search {

background:

#333 url（../images/icon.gif） no-repeat 50% 50%;

}

3、内外侧边框的缩写：

在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：

.btn {

margin-top:

10px;

margin-right:

8px;

margin-bottom:

12px;

margin-left:

5px;

padding-top:

10px;

padding-right:

8px;

padding-bottom:

12px;

padding-left:

8px;

}

则可缩写为：

.btn {

Margin:

10px 8px 12px 5px;

Padding:

10px 8px 12px 5px;

}

而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：

.btn {

margin-top:

10px;

margin-right:

5px;

margin-bottom:

10px;

margin-left:

5px;

}

缩写为：

.btn {margin:

10px 5px;}

而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：

.btn {

margin-top:

10px;

margin-right:

10px;

margin-bottom:

10px;

margin-left:

10px;

}

缩写为：

.btn{margin:

10px;}

4、颜色值的缩写：

当RGB三个颜色值数值相同时，可缩写颜色值代码。

如：

.menu { color:

#ff3333;}

可缩写为:

.menu {color:

#f33;}

四．hack书写规范 

因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。

1、 IE6、IE7、Firefox之间的兼容写法：

写法一：

IE都能识别*;标准浏览器（如FF）不能识别*；

IE6能识别*，但不能识别 !

important,

IE7能识别*，也能识别!

important;

FF不能识别*，但能识别!

important;

根据上述表达，同一类/ID下的CSS 　hack可写为：

.searchInput {

background-color:

#333;/*三者皆可*/

*background-color:

#666　!

important; /*仅IE7*/

*background-color:

#999; /*仅IE6及IE6以下*/

}

一般三者的书写顺序为：

FF、IE7、IE6.

写法二：

IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：

.searchInput {

background-color:

#333;/*通用*/

_background-color:

#666;/*仅IE6可识别*/

}

写法三：

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

.searchInput {background-color:

#333;}

*html .searchInput {background-color:

#666;}/*仅IE6*/

*+html .searchInput {background-color:

#555;}/*仅IE7*/

屏蔽IE浏览器：

select是选择符，根据情况更换。

第二句是MAC上safari浏览器独有的。

*:

lang（zh） select {font:

12px  !

important;} /*FF的专用*/

select:

empty {font:

12px  !

important;} /*safari可见*/

IE6可识别：

这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

select { display /*IE6不识别*/:

none;}

IE的if条件hack写法：

所有的IE可识别：

–[if IE]> Only IE 

[end if]–>

只有IE5.0可以识别:

–[if IE 5.0]> Only IE 5.0 

[end if]–>

IE5.0包换IE5.5都可以识别:

–[if gt IE 5.0]> Only IE 5.0+ 

[end if]–>

仅IE6可识别:

–[if lt IE 6]> Only IE 6- 

[end if]–>

IE6以及IE6以下的IE5.x都可识别:

–[if gte IE 6]> Only IE 6/+ 

[end if]–>

仅IE7可识别:

–[if lte IE 7]> Only IE 7/- 

[end if]–>

2、清除浮动：

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

select:

after {

content:

”.”;

display:

block;

height:

0;

clear:

both;

visibility:

hidden;

}

SEO命名规范

搜索引擎优化（seo）有很多工作要做，其中对代码的优化是一个很关键的步骤。

为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则：

页头:

header

登录条:

loginBar

标志:

logo

侧栏:

sideBar

广告:

banner

导航:

nav

子导航:

subNav

菜单:

menu

子菜单:

subMenu

搜索:

search

滚动:

scroll

页面主体:

main

内容:

content

标签页:

tab

文章列表:

list

提示信息:

msg

小技巧:

tips

栏目标题:

title

友情链接:

friendLink

页脚:

footer

加入:

joinus

指南:

guild

服务:

service

热点:

hot

新闻:

news

下载:

download

注册:

regsiter

状态:

status

按钮:

btn

投票:

vote

合作伙伴:

partner

版权:

copyRight

CSSID的命名

外套:

wrap

主导航:

mainNav

子导航:

subnav

页脚:

footer

整个页面:

content

页眉:

header

页脚:

footer

商标:

label

标题:

title

主导航:

mainNav（globalNav）

顶导航:

topnav

边导航:

sidebar

左导航:

leftsideBar

右导航:

rightsideBar

旗志:

logo

标语:

banner

菜单内容1:

menu1Content

菜单容量:

menuContainer

子菜单:

submenu

边导航图标:

sidebarIcon

注释:

note

面包屑:

breadCrumb（即页面所处位置导航提示）

容器:

container

内容:

content

搜索:

search

登陆:

login

功能区:

shop（如购物车，收银台）

当前的current

样式文件命名

主要的:

master.css

布局版面:

layout.css

专栏:

columns.css

文字:

font.css

打印样式:

print.css

主题:

themes.css

文章出处：

标准之路（