css揭秘的小笔记
GzhiYi · 2021-08-13
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这个元素就可能会被背景图片干扰,从而造成影响。

如果你对这页内容有疑问,欢迎联系我!
邮箱
GitHub
统计访问量