1、基础样式重置：

  1. html,body,img{
  2.     height:100%
  3. }
  5. html,body,ul,li,div,a,p,
  6. img,input,button,
  7. h1,h2,h3,h4,h5
  8. {padding: 0;margin: 0;}
  10. ul{
  11.  font-size:0; 
  12.  padding-inline-start:0;
  13. }
  14. li{
  15.   list-style: none;
  16. }
  17. html{
  18.  font-size:16px;
  19. }
  20. //原本是打算rem布局宽度,em字体布局; 不过，单纯使用rem也是可以的;
  21. //综合性来说，是需要 rem与px为主; 百分比为辅助,em处理字体,vmin,vmax,vw,vh(兼容性)等;
  22. //flex布局优先,Grid布局其次;
  23. body,li{
  24.  font-size:16px;
  25. }
  28. a{
  29.   text-decoration: none;
  30. }
  32. a,button{
  33.   color: #fff;
  34. }
  36. img{
  37.   weight:100%;
  38. }
  40. input,button{
  41.   outline: none;
  42.   background: none;
  43.   border: none;
  44. }
  46. button{
  47.   cursor: pointer;
  48. }

2、类样式复用：

//视图
.view{
  width: 1200px;  //min-weight ~ max-weight
  margin: 0 auto;
}

//清除浮动
.cfix{
  content: '';
  display: table;
  height: 0;
  width: 0;
  clear: both;
}

//Flex布局
.fx{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

//文本排列
.t-center{ text-align: center; }
.t-right{ text-align: right; }
.t-left{ text-align: left; }

//文本溢出(注意:溢出需要在一个宽度的前提下)
//单行溢出
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//多行溢出

3、其他效果处理

//:hover + transition
//鼠标Hover之后的时间过度效果
div:{
  transition: all .4s ease;
    &:hover{
    //somecode...
  }
}