全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；

2、CSS样式命名规范
本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：

头部样式用header，头部左边，可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。

下面列出一些常用的命名单词方便大家使用：（以后大家工作过程中慢慢把自己积累的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的情况了。）

容 器：container/box
头 部：header
主 导 航：mainNav
子 导 航：subNav
顶 导 航：topNav
网站标志：logo
大 广 告：banner
页面中部：mainBody
底 部：footer
菜 单：menu
菜单内容：menuContent
子 菜 单：subMenu
子菜单内容：subMenuContent
搜 索：search
搜索关键字：keyword
搜索范围：range
标签文字：tagTitle
标签内容：tagContent
当前标签：tagCurrent/currentTag
标　 题：title
内 容：content
列 表：list
当前位置：currentPath
侧 边 栏：sidebar
图 标：icon
注 释：note
登 录：login
注 册：register
列 定 义：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)

二、id和class的使用及区别
我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：

ID方法：#test{color:#333333}，在页面中调用
内容

CLASS方法：.test{color:#333333}，在页面中调用
内容

id一个页面只可以使用一次，class可以多次引用。

我在页面中用了多个相同id在IE中显示也正常，id和class好象没什么区别，用多个相同id有什么影响吗？

页面存在多个相同的ID影响就是不能通过W3的校验。

在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。

id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；

class是一个样式，可以套在任何结构和内容上，就象一件衣服；

概念上说就是不一样的：

id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

也就是说建议大家在写XHML+CSS时如果是维一的结构定位的就用id，否则就用class吧（这样让出非结构定位的div块的id让程序员自己定义使用）

web标准希望大家用严格的习惯来写代码。

三.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。常用的css缩写的主要规则：

颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：

#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸
通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：

margin:1em 0 2em 0.5em;

边框(border)
边框的属性如下：

border-width:1px;

border-style:solid;

border-color:#000;

可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)
背景的属性如下：

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent

image: none

repeat: repeat

attachment: scroll

position: 0% 0%

字体(fonts)
字体的属性如下：

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:”Lucida Grande”,sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)
取消默认的圆点和序号可以这样写list-style:none;

list的属性如下:

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif);

更多属性写法请参考《CSS样式手册》，在线手册地址：http://www.86w3.com/css/

四、明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

五、区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

六、取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#id1{}可以写成#id1{}

这样可以节省一些字节。

七、默认值
通常padding和margin的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* {

padding:0;

margin:0

}

或者是针对某元素来定义：

ul,li,div,span {

padding:0;

margin:0

}
(ps:转载)

/* css reset*/
body,ul,ol,li,dl,dt,dd,form,input,textarea,p,table,tr,td{margin:0;padding:0;}
body{font:12px/1.5 ‘Microsoft YaHei’,Arial;}
ol,ul{list-style:none;}
input,textarea,select{font:12px/1.5 ‘Microsoft YaHei’,Arial;resize:none;}
a{text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
img{border:none;vertical-align:middle;}
.clear:before,.clear:after{content:””;display:table;}
.clear:after{clear:both;}
.clear{zoom:1;}

/* public css */
.ma{margin:auto;}
.fl{float:left;}
.fr{float:right;}
.tc{text-align:center;}
.tl{text-align:left;}
.tr{text-align:right;}
.pr{position:relative;}
.pa{position:absolute;}

.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.fc3{color:#333;}
.red{clor:#f00;}
.blue{color:#060;}
.fbd{font-weight:bold;}

.m5{margin:5px;}
.m10{margin:10px;}
.m20{margin:20px;}
.p5{padding:5px;}
.p10{padding:10px;}
.p20{padding:20px;}

一种 动态 样式 语言.

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

Less CSS 是一个使用广泛的 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。

LESS可以这样来写CSS:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {

box-shadow: @style @c;

-webkit-box-shadow: @style @c;

-moz-box-shadow: @style @c;

}

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {

.box-shadow(@style, rgba(0, 0, 0, @alpha));

}

.box {

color: saturate(@base, 5%);

border-color: lighten(@base, 30%);

div { .box-shadow(0 0 5px, 30%) }

}

在引入less.js前先要把你的样式文件引入 :

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

// LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}

/* 生成的 CSS */

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
// LESS

.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

/* 生成的 CSS */

#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

// LESS

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

/* 生成的 CSS */

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

// LESS

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

/* 生成的 CSS */

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}