CSS命名规范

最常见的是以px为单位的固定布局，需要定义以px单位的页面通常是栅格布局
那么不了解栅格的朋友可以先看看，"网页的栅格系统设计"
首先保证页面的宽度一定是950px,分成24列，这个时候就要定义24种可能情况的宽度

蓝图的各种列宽定义:
....
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24 {width:950px;}

但span是行内元素,行内元素不应该定义宽度
因此采用grid-1,grid-2,...grid-24


我们还需要定义些常用到的margin和padding，于是有：
.ml-10{margin-left:10px}
.mr-10{margin-right:10px}
.mt-10{margin-top:10px}
.mb-10{margin-bottom:10px}
.pl-10{padding-left:10px}
.pr-10{padding-right:10px}
.pt-10{padding-top:10px}
.pb-10{padding-bottom:10px}

定义几种全局的高亮颜色.
常见的命名方式是.red或者.hightlight-red...，class中含有颜色的名字这种方式其实不好。
项目中如果需要添加换色的功能，需要用其它颜色的样式表reset之间的样式表，那之前定义的高亮颜色在其它颜色中就不一定适合，而class却还要用原来的，这样就不语义化了。

左浮动，有浮动， 居左，居右，居中
.f-l{float:left;}
.f-r{float:right;}
.f-n{float:none;}

各种样式的border
.b1s-1{border:1px solid #000;}
.b1d-1{border:1px dashed #000;}

还有清浮动的
.c-b{clear:both;}
.c-l{clear:left;}
.c-r{clear:right;}

居左 ，居中 ，居右，垂直居 顶，居中，居底对齐
.ta-l{text-align:left;}
.ta-c{text-align:center;}
.ta-r{text-align:right;}
 
.va-t{vertical-align:top;}
.va-m{vertical-align:middle;}
.va-b{vertical-align:bottom;}


=============================================

模块：module.css
基本共用：base.css
布局：layout.css
全局：global.css；
主题：themes.css
专栏：columns.css
文字：font.css
表单：forms.css
补丁：mend.css
打印：print.css

头：header　　
内容：content/container　　
尾：footer　　
导航：nav　　
侧栏：sidebar
栏目：column　　
页面外围控制整体布局宽度：wrapper　　
左右中：left right center　　
登录条：loginbar　　
标志：logo　　
广告：banner　　
页面主体：main　　
热点：hot　　
新闻：news
下载：download　　
子导航：subnav　　
菜单：menu　　
子菜单：submenu　　
搜索：search　　
友情链接：friendlink　　
页脚：footer　　
版权：copyright　　
滚动：scroll　　
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态态：status
投票：vote
合作伙伴：partner

页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center+导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary+功能
标志：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


==================================

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

#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}


内外侧边框的缩写：

在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;}


=================================

hack书写规范 :

写法一：

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.


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]–>


=====================================

侧  栏：　　sidebar
左边栏：　　sidebar-l
右边栏：　　sidebar-r


版    权：   copyright
摘    要：   summary
网站信息：   siteinfo
法律声明：   siteinfo-legal
合作伙伴：   partner


=======================================

label：使表单更有亲和力而且还能辅助表单排版，例如：
<label for="user-password">密　码</label>
<input type="password" name="password" id="user-password" />

fieldset & legend：
fildset套在表单外，legend用于描述表单内容



=======================================

images(存放图形文件)
flash（存放Flash文件）
style(存放CSS文件)
script（存放Javascript脚本）
link（存放友情链接）
media(存放多媒体文件)等。

=======================================

px一般使用中文宋体12pt

=========================================


当在设计web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：

自上而下小组：top-panel
横向：horizontal-nav
左面：left-side
中心-栏目：center-column
右面：right-col