CSS 揭秘的小笔记

想清楚哪些是改动多，哪些是改动少的

.btn {
  font-size: 20px;
  line-height: 30px;
}

当某些值相互依赖时，应该把它们的相互关系用代码表述出来，以便于维护。

.btn {
  font-size: 20px;
  line-height: 1.5; // 行高是字号的1.5倍
}

代码量少 < 代码易维护

border-width: 10px 10px 10px 0;

// better

border-width: 10px;
border-left: 0;

合理的简写

合理的简写可以防止未来会出现的风险。

.bg-color {
  background: red;

  // better
  background-color: red;
}

意思是如果在另外的地方有对.bg-color声明了background-image，那bg-color这个元素就可能会被背景图片干扰，从而造成影响。