CSS学起难型项目中变难理特CSS书写风格稍团队更加难沟通总结实现高效整洁CSS代码原：
1 Reset非全局Reset
浏览器元素默认属性Reset重置浏览器元素默认属性达浏览器兼容需注意请全局Reset：
*{ margin0 padding0 }
仅仅缓慢低效率方法会导致必元素重置外边距边距建议参考YUI ResetEric Meyer做法
** 清外边距 **
body h1 h2 h3 h4 h5 h6 hr p
blockquote * structural elements 结构元素 *
dl dt dd ul ol li * list elements 列表元素 *
pre * text formatting elements 文格式元素 *
form fieldset legend button input textarea * form elements 表单元素 *
th td * table elements 表格元素 *
img* img elements 图片元素 *{
bordermedium none
margin 0
padding 0
}
** 设置默认字体 **
bodybutton input select textarea {
font 12px15 ＇宋体＇tahoma Srial helvetica sansserif }
h1 h2 h3 h4 h5 h6 { fontsize 100 }
em{fontstylenormal}
** 重置列表元素 **
ul ol { liststyle none }
** 重置超链接元素 **
a { textdecoration none color#333}
ahover { textdecoration underline color#F40 }
** 重置图片元素 **
img{ border0px}
** 重置表格元素 **
table { bordercollapse collapse borderspacing 0 }
2 良命名惯
疑乱七八糟者语义命名代码谁会抓狂样代码：
aaabb{margin2pxcolorred}
想初学者会实际项目中命名class没想样代码样问题：

My name is Wiky

问题果需原红色字体改成蓝色修改样式会变成：
red{colorbule}
样命名会费解样命名leftBar侧边栏果需修改成右侧边栏会麻烦请元素特性（颜色位置等）命名classid您选择意义命名：#navigation{}sidebar{}postwrap{}
样修改定义classid样式影响HTML元素间联系
外种情况固定样式定义会修改命名时担忧刚刚说种情况
alignleft{floatleftmarginright20px}
alignright{floatrighttextalignrightmarginleft20px}
clear{clearbothtextindent9999px}
样段落

段落

果需段落原先左齐修改右齐需修改classNamealignright
3 代码缩写
CSS代码缩写提高写代码速度精简代码量CSS里面少缩写属性包括marginpaddingborderfontbackground颜色值等果您学会代码缩写原样代码：
li{
fontfamilyArial Helvetica sansserif
fontsize 12em
lineheight 14em
paddingtop5px
paddingbottom10px
paddingleft5px
}
缩写：
li{
font 12em14em Arial Helvetica sansserif
padding5px 0 10px 5px
}
 4 利CSS继承
果页面中父元素子元素相样式相样式定义父元素继承CSS样式样维护代码减少代码量样代码：
#container li{ fontfamilyGeorgia serif }
#container p{ fontfamilyGeorgia serif }
#container h1{fontfamilyGeorgia serif }
简写成：
#container{ fontfamilyGeorgia serif }
5 重选择器
合CSS选择器果样式话样做代码简洁节省时间空间：
h1{ fontfamilyArial Helvetica sansserif fontweightnormal }
h2{ fontfamilyArial Helvetica sansserif fontweightnormal }
h3{ fontfamilyArial Helvetica sansserif fontweightnormal }
合
h1 h2 h3{ fontfamilyArial Helvetica sansserif fontweightnormal }
6 适代码注释
代码注释更容易读懂代码合理组织代码注释结构更加清晰选择做样式表开始添加目录
* 
1 Reset 
2 Header 
3 Content 
4 SideBar 
5 Footer 
*
代码结构目然容易查找修改代码
代码容应适加划分甚必方代码加注释说明样利团队开发
*** Header *** 
#header{ height145px positionrelative } 
#header h1{ width324px margin45px 0 0 20px floatleft height72px} 

*** Content *** 
#content{ background#fff width650px floatleft minheight600px overflowhidden} 
#content h1{color#F00}* 设置字体颜色 * 
#content posts{ overflowhidden } 
#content recent{ marginbottom20px borderbottom1px solid #f3f3f3 positionrelative overflowhidden }
 

*** Footer *** 
#footer{ clearboth padding50px 5px 0 overflowhidden} 
#footer h4{ color#b99d7f fontfamilyArial Helvetica sansserif fontsize11em }
7 CSS代码排序
果代码中属性字母排序查找修改时候更加快速
*** 样式属性字母排序 *** 
div{ 
backgroundcolor#3399cc 
color#666 
font12em14em Arial Helvetica sansserif 
height300px 
margin10px 5px 
padding5px 0 10px 5px 
width30 
zindex10 
}
8 保持CSS读性
书写读CSS会更容易查找修改样式两种情况种读性更高想言明
*** 样式属性写行 *** 
div{ 
backgroundcolor#3399cc 
color#666 
font 12em14em Arial Helvetica sansserif 
height300px 
margin10px 5px 
padding5px 0 10px 5px 
width30 
zindex10 
} 

*** 样式属性写行 *** 
div{ backgroundcolor#3399cc color#666 font 12em14em Arial Helvetica sansserif height300px margin10px 5px padding5px 0 10px 5px width30 zindex10 }
样式属性较少选择器会写行：
*** 选择器属性少写行 *** 
div{ backgroundcolor#3399cc color#666}
规非硬性规定您采种写法建议始终保持代码致属性分行写属性少3写行
9 选择更优样式属性值
CSS中属性采属性值然达效果差性存着差异
区border0border设0px然页面见border默认值理解浏览器然borderwidthbordercolor进行渲染已占存值
bordernoneborder设none没浏览器解析none时作出渲染动作会消耗存值建议bordernone
样displaynone隐藏象浏览器作渲染占存visibilityhidden会
10 代@import
首先@import属XHTML标签Web标准部分较早期浏览器兼容高网站性某负面影响
11 外部样式表
原始终设计实践单更易维护修改更重外部文件提高页面速度CSS文件浏览器中产生缓存置HTML文档中CSS会次请求中HTML文档重新载实际应中没必CSS代码置HTML文档中：