20个编写现代CSS代码的建议

原文：http://tutorialzine.com/2016/08/20-protips-for-writing-modern-css/ （作者： Danny Markov ）

译文 https://segmentfault.com/a/1190000006834519 （作者： 王下邀月熊 ）

明白何谓Margin Collapse

不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习:

.square {
    width: 80px;
    height: 80px;
}
 
.red {
    background-color: #F44336;
    margin-bottom: 40px;
}
 
.blue {
    background-color: #2196F3;
    margin-top: 30px;
}

在上述例子中我们会发现，红色和蓝色方块的外边距并没有相加得到70px，而是只有红色的下外边距保留了下来。我们可以使用一些方法来避免这种行为，不过建议来说还是尽量统一使用margin-bottom属性，这样就显得和谐多了。

使用Flexbox进行布局

在传统的布局中我们习惯使用Floats或者inline-blocks，不过它们更适合于格式化文档，而不是整个网站。而Flexbox则是专门的用于进行布局的工具。Flexbox模型允许开发者使用很多便捷可扩展的属性来进行布局，估计你一旦用上就舍不得了:

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */display: -webkit-flex;
}

我们已经在Tutorialzine上提供了很多的关于Flexbox的介绍与小技巧，譬如5 Flexbox Techniques You Need to Know About。

使用CSS Reset

虽然这些年来随着浏览器的迅速发展与规范的统一，浏览器特性碎片化的情况有所改善，但是在不同的浏览器之间仍然存在着很多的行为差异。而解决这种问题的最好的办法就是使用某个CSS Reset来为所有的元素设置统一的样式，保证你能在相对统一干净的样式表的基础上开始工作。目前流行的Reset库有 normalize.css, minireset以及 ress ，它们都可以修正很多已知的浏览器之间的差异性。而如果你不打算用某个外在的库，那么建议可以使用如下的基本规则:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

上面的规则看起来没啥用，不过如果不同的浏览器在默认情况下为你设置了不同的外边距/内边距的默认值，还是会挺麻烦的。

一切应为Border-box

虽然很多初学者并不了解box-sizing这个属性，但是它确实相当的重要。而最好的理解它的方式就是看看它的两种取值:

• 默认值为content-box，即当我们设置某个元素的heght/width属性时，仅仅会作用于其内容尺寸。而所有的内边距与边都是在其之上的累加，譬如某个

  标签设置为宽100，内边距为10，那么最终元素会占用120(100 + 2*10)的像素。

• border-box:内边距与边是包含在了width/height之内，譬如设置了width:100px的

  无论其内边距或者边长设置为多少，其占有的大小都是100px。将元素设置为border-box会很方便你进行样式布局，这样的话你就可以在父元素设置高宽限制而不担心子元素的内边距或者边打破了这种限制。

  以背景图方式使用Images

  如果需要在响应式的环境下展示图片，有个简单的小技巧就是使用该图片作为某个

  的背景图而不是直接使用img标签。基于这种方式配合上background-size与background-position这两个属性，可以很方便地按比例缩放:

  img {
      width: 300px;
      height: 200px;
  }
  
  
  
  
      
   
  div {
      width: 300px;
      height: 200px;
      background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');
      background-position: center center;
      background-size: cover;
  }
   
  section{
      float: left;
      margin: 15px;
  }

  不过这种方式也是存在缺陷的，譬如你无法设置图片的懒加载、图片无法被搜索引擎或者其他类似的工具抓取到，有个不错的属性叫object-fit可以解决这个问题，不过该属性目前的浏览器支持并不是很完善。

  Better Table Borders

  HTML中使用Tables进行布局一直是个很头疼的问题，它们使用起来很简单，但是无法进行响应式操作，并且也不方便进行全局样式设置。譬如，如果你打算为Table的边与单元的边添加样式，可能得到的结果如下:

  table {
      width: 600px;
      border: 1px solid #505050;
      margin-bottom: 15px;
      color:#505050;
  }
   
  td{
      border: 1px solid #505050;
      padding: 10px;
  }

  
  

  这里存在的问题是出现了很多的重复的边，会导致视觉上不协调的情况，那么我们可以通过设置border-collapse:collapse来进行处理:

  
  

  注释格式优化

  CSS虽然谈不上一门编程语言但是其仍然需要添加注释以保障整体代码的可读性，只要添加些简单的注释不仅可以方便你更好地组织整个样式表还能够让你的同事或者未来的自己更好地理解。对于CSS中整块的注释或者使用在Media-Query中的注释，建议是使用如下形式：

  /*---------------
      #Header
  ---------------*/header { }header nav { }/*---------------
      #Slideshow
  ---------------*/.slideshow { }

  而设计的细节说明或者一些不重要的组件可以用如下单行注释的方式:

  /*   Footer Buttons   */
  .footer button { }
   
  .footer button:hover { }

  同时，不要忘了CSS中是没有//这种注释方式的:

  /*  Do  */p {
      padding: 15px;
      /*border: 1px solid #222;*/
  }/*  Don't  */p {
      padding: 15px;