简单易行的css库（结合sass更好）

在我写这个之前，其实我是总结一些网站的做法与一些开源的东西，看到别人网站上的reset,base什么的感觉有累赘，我以前接的项目base更是独立一个css文件比构架的样式还多，其实没几个需要的（虽然考虑到了各种兼容，各种偏门），生活也如此，多了反而不好。
css属性类还是有点便利的，每个人习惯不同，但是肯定每个人都会简单独立一下样式，但不够大胆吧，类似于bootstra一样写类就好，当然有利有弊，你自己衡量必要性，这里你可以大胆的拿去，拿去修改属于自己的小库
在sass尽量使用英文备注这样编译后额去除多余。
/reset/
@charset "UTF-8"; /重置越简单越好并不是每个标签都能用上，“避免overwrite（样式重写）”/
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;padding:0;}
body{color:#333;font: 14px/1.4 "Microsoft Yahei","幼圆";}
input{outline:0 none;}
img,input{border:none;}
ul, ol{list-style:none;}
i{font-style:normal;}
button,input[type="button"],input[type='submit']{cursor:pointer}
a{color:#000;text-decoration: none;cursor:pointer;}
a:hover{color:skyblue;}
/ position /
.rel{position:relative;}
.abs{position:absolute;}
.fix{position:fixed;}
/ float /
.fl{float:left;}
.fr{float:right;}
/ display /
.dpn{display:none;}
.dpi{display:inline;}
.dpb{display:block;}
.dpib{display:inline-block;}
.vh{visibility: hidden} / 这个值在需要元素透明但又留空间时很有用/
/widthpercent/
.wp20{width:20%;} /流布局，手机端之类使用
.wp30{width:30%;}
.wp40{width:40%;}
.wp50{width:50%;}
.wp60{width:60%;}
.wp70{width:70%;}
.wp80{width:80%;}
.wp100{width:100%;}
/ padding /
.p0{padding:0;}
.p5{padding:5px;}
.pt5{padding-top:5px;}
.pr5{padding-right:5px;}
.pb5{padding-bottom:5px;}
.pl5{padding-left:5px;}
.p10{padding:10px;}
.pl10{padding-left:10px;}
.pt10{padding-top:10px;}
.pr10{padding-right:10px;}
.pb10{padding-bottom:10px;}
.p15{padding:15px;}
.pl15{padding-left:15px;}
.pt15{padding-top:15px;}
.pr15{padding-right:15px;}
.pb15{padding-bottom:15px;}
.p20{padding:20px;}
.pl20{padding-left:20px;}
.pt20{padding-top:20px;}
.pr20{padding-right:20px;}
.pb20{padding-bottom:20px;}
.p30{padding:30px;}
.pl30{padding-left:30px;}
.pt30{padding-top:30px;}
.pr30{padding-right:30px;}
.pb30{padding-bottom:30px;}
/ margin /
.m0{margin:0;}
.mt5{margin-top:5px;}
.mr5{margin-right:5px;}
.mb5{margin-bottom:5px;}
.ml5{margin-left:5px;}
.mt10{margin-top:10px;}
.mr10{margin-right:10px;}
.mb10{margin-bottom:10px;}
.ml10{margin-left:10px;}
.mt15{margin-top:15px;}
.mr15{margin-right:15px;}
.mb15{margin-bottom:15px;}
.ml15{margin-left:15px;}
.mt20{margin-top:20px;}
.mr20{margin-right:20px;}
.mb20{margin-bottom:20px;}
.ml20{margin-left:20px;}
.mt30{margin-top:30px;}
.mr30{margin-right:30px;}
.mb30{margin-bottom:30px;}
.ml30{margin-left:30px;}
/margin负值/ / 使用负值很有必要内容块总是需要一些偏移的 /
.mtn5{margin-top:-5px;}
.mtn10{margin-top:-10px;}
/border/
.bdc{border:1px solid #ccc;}
.bred{border:1px solid #ec584e;}
/bg-color/
.bgwh{background-color:#fff;}
.bgfb{background-color:#fbfbfb;}
.bgf5{background-color:#f5f5f5;}
.bgf0{background-color:#f0f0f0;}
.bgeb{background-color:#ebebeb;}
.bge0{background-color:#e0e0e0;}
.bgred{background-color:#ec584e;}
.bge9{background-color:#eae9ee;}
/color /
.c0{color:#000;}
.cf{color:#fff;}
.c3{color:#333;}
.c6{color:#666;}
.c9{color:#999;}
.cc{color:#ccc;}
.c42{color:#424242;}
.c22{color:#222;}
/ line-height /
.lh14{line-height:14px;}
.lh16{line-height:16px;}
.lh18{line-height:18px;}
.lh20{line-height:20px;}
.lh22{line-height:22px;}
.lh24{line-height:24px;}
/ font-size / / 常用字体 /
.fs10{font-size:10px;}
.fs12{font-size:12px;}
.fs14{font-size:14px;}
.fs16{font-size:16px;}
.fs18{font-size:18px;}
.fs20{font-size:20px;}
.fs24{font-size:24px;}
/ font-style /
.n{font-weight:normal; font-style:normal;} / 使用i,b这些标签的时候需要必要样式清除 /
/ text-align /
.tac{text-align:center;} / 文本的排列方式 /
.tar{text-align:right;}
.tal{text-align:left;}
/清除浮动/
.clearfix {zoom: 1;} /清除浮动/
.clearfix:after{content: ".";display: block;height: 0; clear: both;visibility: hidden;}
/wrap/
.comwidth{width:1080px;margin:0 auto;} /网页适用宽度/
/居中/
.ma{margin-right: auto;margin-left: auto;} /居中最常用的排版方式/
.vam{vertical-align: middle;} / 使用img,单选框时这些标签需要与文本居中使用 /
/换行/
.wbb{word-break: break-all; word-wrap:break-word;} / 这个很重要，如果是网址英文类的内容会撑破结构/

/ 单行文字溢出虚点显示/
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} /单行的话用这个，多行有个webkit私有属性-webkit-line-clamp,但兼容不好，可有js简单控制
function ell(id,len){
var obj = document.getElementById(id);
var nowLeng = obj.innerHTML.length;
if(nowLeng > len){
var nowWord = obj.innerHTML.substr(0,len)+'...';
obj.innerHTML = nowWord;
}
}
/
/字间隔/
.ls3{letter-spacing: 3px;} / 间隔还是有必要的/
/黑色透明背景/
.bgOp{opacity: .5;background: #000;-moz-opacity: .50;filter: alpha(opacity=50)}

// HTML5 「block」的元素，当然也可用html5.js*/
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display: block;margin:0;padding:0;}

像一个页面的话基本上基本上不用写多少样式，直接用类拼起来<span class="dpb wp80 pt10 pb10 m0a c9 bgf fs16 "></span>
任何时候都遵循，定位，浮动，盒子模型（width，height，padding，margin，）排列（line-height,text-align）颜色背景依次，这样你的样式就会比较清晰容易修改