Bootstrap CSS 编码规范之简写形式的属性声明

时间:2021-11-14 08:18:19

简写形式的属性声明

在需要显式地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下:

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

大部分情况下,我们不需要为简写形式的属性指定所有的值。如,HTML 的 heading 元素只需要设置上、下边距(margin)的值。因此,在必要的时候,只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖,从而引起意外的副作用。

 
  1. /* Bad example */
  2. .element {
  3.   margin: 0 0 10px;
  4.   background: red;
  5.   background: url("image.jpg");
  6.   border-radius: 3px 3px 0 0;
  7. }
  8. /* Good example */
  9. .element {
  10.   margin-bottom: 10px;
  11.   background-color: red;
  12.   background-image: url("image.jpg");
  13.   border-top-left-radius: 3px;
  14.   border-top-right-radius: 3px;
  15. }

    版权声明:本文出自 歪脖网 的《Bootstrap教程》,欢迎在线阅读,并提出宝贵意见。