背景
使用基类的好处是不需要重复编写大量的冗余代码，减少程序员的工作量。更多程序员喜欢在开发过程中总结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>
这样写的好处就是整站统一，只要熟悉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;}