CSS类库搭建的一些建议.doc

1. HTML元素默认样式的重置不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，不要使用全局Reset：* margin:0; padding:0; 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。/* 清除内外边距 */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 图片元素 */ border:medium none; margin: 0; padding: 0;/* 设置默认字体 */body,button, input, select, textarea font: 12px/1.5 宋体,tahoma, Srial, helvetica, sans-serif;h1, h2, h3, h4, h5, h6 font-size: 100%; emfont-style:normal;/* 重置列表元素 */ul, ol list-style: none; /* 重置超链接元素 */a text-decoration: none; color:#333;a:hover text-decoration: underline; color:#F40; /* 重置图片元素 */img border:0px;/* 重置表格元素 */table border-collapse: collapse; border-spacing: 0; 2. 良好的命名习惯这个很重要但又没有一个统一的规范。可以多参考一下 YUI CSS 和 meyer CSS 3. 代码缩写li font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5px;就可以缩写为：li font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px;参考常用CSS缩写语法总结或者下载CSS-Shorthand-Cheat-Sheet.pdf 。4. CSS代码 样式属性排序/* 样式属性按字母排序 */div background-color:#3399cc; color:#666; font:1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10;5. 代码压缩类库分行两个版本源码版 和 压缩版 项目中使用压缩版。类库代码对前端组以外的人完全透明。不具有修改权限.而且使加载速度 更快。源码版 应该 公布到 公司WEB组。方便前后端人员 的学习和灵活调用 推荐压缩工具YUI Compressor6. 摘录网上的一些 CSS 类库。以做参考/*初始化样式*/ bodyfont-family:宋体, Arial,Verdana, sans-serif, Helvetica; font-size:12px; color:#010000; dl,dd,ullist-style:none; a imgborder:0; div,form,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6padding:0;margin:0;border:0; input vertical-align:middle; body,html height:100%; /*字体样式定义规则，小写f加字体属性*/ .fU text-decoration:underline; .fN text-decoration:none; .fB font-weight:bold; .f12 font-size:12px; .f14 font-size:14px; /*公用空隙定义规则，小写space加空隙高度 */ .space3 height:3px; clear:both; font-size:1px;overflow:hidden; .space5 height:5px; clear:both; font-size:1px;overflow:hidden; .space6 height:6px; clear:both; font-size:1px;overflow:hidden; .space9 height:9px; clear:both; font-size:1px;overflow:hidden; .space10 height:10px; clear:both; font-size:1px;overflow:hidden; .space12 height:12px; clear:both; font-size:1px;overflow:hidden; .space15 height:15px; clear:both; font-size:1px;overflow:hidden; /*全局链接颜色 */ a:link color:#1f3a87; text-decoration:none; a:visited color:#83006f;text-decoration:none; a:hover color:#bc2931; text-decoration:underline; a:active color:#bc2931; /* 字体颜色属性 定义规则，小写c加颜色名称 */ .cRed,a.cRed:link,a.cRed:visitedcolor:#f00; .cBlue,a.cBlue:link,a.cBlue:visitedcolor:#00c; .cDRed,a.cDRed:link,a.cDRed:visitedcolor:#bc2931; .cGray,a.cGray:link,a.cGray:visitedcolor:#4F544D; .cDGray,a.cDGray:link,a.cDGray:visitedcolor:#666; .cWhite,a.cWhite:link,a.cWhite:visitedcolor:#fff; .cBlack,a.cBlack:link,a.cBlack:visitedcolor:#000; .cYellow,a.cYellow:link,a.cYellow:visitedcolor:#ff0; .cGreen,a.cGreen:link,a.cGreen:visitedcolor:#008000; /* 其他属性 */ .l float: left; .r float: right; .clear clear: both; font-size:1px; width:1px; height:0; visibility: hidden; .hiddendisplay: none; .unL,.unL atext-decoration: none; .unBborder:none;7. 关于 CSS类库 中该定义哪些类 参考 成熟CSS框架 （如YUI CSS 库） 公司员工 征集 自已的经验8. CSS类库 应该 分层 分组件 建立。如：reset 层 CSS 文件Font 层 CSS 文件Bnt 组件 CSS 文件A 组件 CSS文件布局 (layout)、排版 (typography)、组件 (widget)、重