CSS样式可重用的写法小结

CSS重用是为了提高开发效率和提升页面性能，但是重用与灵活之间存在一个度平衡的问题，

以下是一些在日常开发中的经验

1、提取常用属性，定义全局性CSS,比如一般我们开发中都会使用到一个公共全局性CSS，如下

body {font-family:arial,B8BF53,serif;background:url(images/body_bg.gif) 0px 25px repeat-x #ededf0;font-size:12px; min-height:300px; }body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote{padding:0; margin:0;} table,td,tr,th{font-size:12px; padding:0;margin:0;}li{list-style-type:none;}table{ margin:0 auto;} 

我们把页面中相关元素都定义了一个全局属性，然后在需要的时候进行单个覆盖

如 我们需要定义单独定义某个h1标签的 外边距 之时

.h1_title{margin:10px}

html中引用样式 这样可以利用全局属性 还可以有单独的效果

<h1 class="h1_title"></h1>

2、定义一些十分灵活应用的样式，随时随地可以使用，比如颜色方面，比如链接方面，比如常用字号自字体。这些属性不必要在单独某个模块中去定义

.cWhite,.cWhite:visited,.cWhite a{color:#fff;}.

cYellow,.cYellow:visited{color:#ff0;}.

cGreen,.cGreen:visited{color:#008000;}

.cGray,.cGray:visited,.cGray a{color:#333;}

.cDGray,.cDGray:visited,.cDGray a{color:#727171;}

.cBlack,.cBlack:visited,.cBlack a{color:#000;}

.cBlue,.cBlue:visited,.cBlue a{color:#1E50A2;}

3、常用效果定义一些更微小的css模块 ，方便重用如

.reg_box{ margin-left:20px; background:url(images/reg_bg.jpg) left top no-repeat; width:464px; overflow:hidden;width:230px; height:23px; }

.reg_box .input1{line -height:23px;}

reg_box .input2{ margin:36px 0 0 150px;  border:none; }