增加css样式制作的效率与可维护性

浏览数：32 / 时间：2015年06月09日

背景

使用基类的好处是不需要重复编写大量的冗余代码，减少程序员的工作量。更多程序员喜欢在开发过程中总结base.css文件代码，但是这样会让的代码更加凌乱，命名没有规范化。

使用基类不仅便于开发，更多的是同一类命名，让程序员只要看到该命名方式就知道这个类的用途。例如ml10取的是margin-left首字母，后面的数字属于该属性的值。tc是text-align:center的意思，取的是text首字母和center的首字母。

下面写一个产品展示效果：

总宽度为1000px;

 1 <style type="text/css">
 2 
 3 .plst{width:1100px;}
 4 
 5 </style>
 6 
 7 <ul class="plst oh">
 8 
 9 　　<li class="fl w200 mr10 mb10">a产品</li>
10 
11 　　<li class="fl w200 mr10 mb10">b产品</li>
12 
13 　　<li class="fl w200 mr10 mb10">c产品</li>
14 
15 　　<li class="fl w200 mr10 mb10">d产品</li>
16 
17 </ul>

View Code

这样写的好处就是整站统一，只要熟悉base.css文件类的开发人员都可一眼看出你大概的效果如何。让你的团队人员不再看着你的类名发愁。

类似效果：

base.css代码如下：

  1 /*css reset*/
  2 body,div,d,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0px;padding:0px;}
  3 table{border-collapse:collapse;border-spacing:0;}
  4 a{ text-decoration:none}
  5 fieldset,img{border:0}
  6 address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
  7 ol,ul{list-style:none}
  8 caption,th{text-align:left}
  9 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
 10 q:before,q:after{content:‘‘}
 11 abbr,acronym{border:0}
 12 
 13 /*文字排版*/
 14 .f12{font-size:12px;}
 15 .f13{font-size:13px;}
 16 .f14{font-size:14px;}
 17 .f16{font-size:16px;}
 18 .f20{font-size:20px;}
 19 .fb{font-weight:bold}
 20 .fn{font-weight:normal}
 21 .t2{text-indent:2em}
 22 .lh100{line-height:100%}
 23 .lh150{line-height:150%}
 24 .lh180{line-height:180%}
 25 .lh200{line-height:200%;}
 26 .unl{ text-decoration:none}
 27 
 28 /*定位*/
 29 .tl{ text-align:left}
 30 .tc{ text-align:center}
 31 .tr{ text-align:right}
 32 .bc{ margin-left:auto;margin-right:auto}
 33 .fl{float:left;display:inline}
 34 .fr{float:right;display:inline}
 35 .cb{clear:both}
 36 .cl{clear:left}
 37 .cr{clear:right}
 38 .di{display:inline-block}
 39 .db{display:block}
 40 .vm{vertical-align:middle}
 41 .pr{position:relative}
 42 .pa{position:absolute}
 43 .abs-right{position:absolute;right:0;}
 44 .zoom{zoom:1}
 45 .hidden{visibility:hidden}
 46 .none{display:none}
 47 
 48 .oh{ overflow:hidden}
 49 
 50 /*长度高度*/
 51 .w10{width:10px}
 52 .w20{width:20px}
 53 .w30{width:30px}
 54 .w40{width:40px}
 55 .w50{width:50px}
 56 .w60{width:60px}
 57 .w70{width:70px}
 58 .w80{width:80px}
 59 .w90{width:90px}
 60 .w100{width:100px}
 61 .w200{width:200px}
 62 .w300{width:300px}
 63 .w400{width:400px}
 64 .w500{width:500px}
 65 .w600{width:600px}
 66 .w700{width:700px}
 67 .w800{width:800px}
 68 .w{width:100%}
 69 .h50{height:50px}
 70 .h80{height:80px}
 71 .h100{height:100px}
 72 .h200{height:200px}
 73 .h{height:100%}
 74 
 75 /*边距*/
 76 .m10{margin:10px;}
 77 .m15{margin:15px;}
 78 .m30{margin:30px;}
 79 .mt5{margin-top:5px;}
 80 .mt10{margin-top:10px;}
 81 .mt15{margin-top:15px;}
 82 .mt20{margin-top:20px;}
 83 .mt30{margin-top:30px;}
 84 .mt50{margin-top:50px;}
 85 .mt100{margin-top:100px;}
 86 .mb5{margin-bottom:5px;}
 87 .mb10{margin-bottom:10px;}
 88 .mb15{margin-bottom:15px;}
 89 .mb20{margin-bottom:20px;}
 90 .mb30{margin-bottom:30px;}
 91 .mb50{margin-bottom:50px;}
 92 .mb100{margin-bottom:100px;}
 93 .ml5{margin-left:5px;}
 94 .ml10{margin-left:10px;}
 95 .ml15{margin-left:15px;}
 96 .ml20{margin-left:20px;}
 97 .ml30{margin-left:30px;}
 98 .ml50{margin-left:50px;}
 99 .ml100{margin-left:100px;}
100 .mr5{margin-right:5px;}
101 .mr10{margin-right:10px;}
102 .mr15{margin-right:15px;}
103 .mr20{margin-right:20px;}
104 .mr30{margin-right:30px;}
105 .mr50{margin-right:50px;}
106 .mr100{margin-right:100px;}
107 .p10{padding:10px;}
108 .p15{padding:15px;}
109 .p30{padding:30px;}
110 .pt5{padding-top:5px;}
111 .pt10{padding-top:10px;}
112 .pt15{padding-top:15px;}
113 .pt20{padding-top:20px;}
114 .pt30{padding-top:30px;}
115 .pt50{padding-top:50px;}
116 .pt100{padding-top:100px;}
117 .pb5{padding-bottom:5px;}
118 .pb10{padding-bottom:10px;}
119 .pb15{padding-bottom:15px;}
120 .pb20{padding-bottom:20px;}
121 .pb30{padding-bottom:30px;}
122 .pb50{padding-bottom:50px;}
123 .pb100{padding-bottom:100px;}
124 .pl5{padding-left:5px;}
125 .pl10{padding-left:10px;}
126 .pl15{padding-left:15px;}
127 .pl20{padding-left:20px;}
128 .pl30{padding-left:30px;}
129 .pl50{padding-left:50px;}
130 .pl100{padding-left:100px;}
131 .pr5{padding-right:5px;}
132 .pr10{padding-right:10px;}
133 .pr15{padding-right:15px;}
134 .pr20{padding-right:20px;}
135 .pr30{padding-right:30px;}
136 .pr50{padding-right:50px;}
137 .pr100{padding-right:100px;}