5个常见的CSS错误,你一定要注意避免
共 2204字,需浏览 5分钟
·
2021-06-19 12:04
英文 | https://javascript.plainenglish.io/5-common-css-mistakes-that-you-need-to-avoid-53e51ed98d04
翻译 | 杨小二
1、不使用相对单位
/* wrong */
element{
font-size: 18px;
margin: 10px;
line-height: 15px;
}
比较好的做法:
/* right */
element{
font-size: 1.2rem;
margin: 0.5rem;
line-height: 1.3em;
}
2、没有重置CSS
每个 Web 浏览器都有自己的默认样式。因此,当网页不包含 CSS 时,浏览器会为文本、填充、边距等添加一些基本的默认样式。
每个浏览器都有独特的默认样式,这就是为什么通过添加 CSS 重置样式来重置这些浏览器默认样式的原因。但是,许多开发人员并没有这样做。
我们通过添加 CSS 重置样式可以避免出现这个错误。
你可以通过使用通用选择器(*)重置边距、填充、框大小和文本字体来做到这一点。
像这样:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "your preferd font here";
}
3、 重复代码
许多开发人员在谈到 CSS 时都会重复自己的代码。这是一种不好的做法,因为你需要减少代码以使其具有高性能且易于管理。
因此,请始终寻找减少 CSS 并避免重复代码的方法。
下面是一个例子:
不好的做法:
/* wrong */
.container {
background-color: #000;
border-radius: 0.5rem;
}
.sidebar {
background-color: #000;
border-radius: 0.5rem;
}
好的做法:
/* right */
.container, .sidebar {
background-color: #000;
border-radius: 0.5rem;
}
4、不使用缩写
同样在 CSS 中,你可以使用缩写来编写更少的 CSS 代码。但是,许多开发人员不使用这些简写,或者他们甚至不知道它们。
这里有些例子:
不使用缩写(不友好的方式):
element{
background-image: url(file.png);
background-repeat: no-repeat;
background-position: center;
}
使用缩写(比较好方法):
element{
background: url(file.png) no-repeat center;
}
这是另一个例子:
/* without shorthand */
element{
font-family: Helvetica;
font-size: 1rem;
font-weight: bold;
}
/* using a shorthand */
element{
font: bold 1rem Helvetica;
}
如你所见,缩写减少了 CSS 代码,这就是为什么,我推荐你尽可能多地使用它们的原因。
5、使用颜色名称
不要使用诸如red、blue等这样的颜色名称。相反,我建议你使用十六进制的颜色值来表示颜色。
为什么?因为当你使用颜色名称时,例如,red颜色在所有浏览器中看起来会完全不相同。你通过使用颜色名称red的话,那么就意味着你允许浏览器显示它认为是红色的颜色。
这就是为什么我建议使用十六进制颜色来表示,它可以更具体地选择你的颜色以在所有浏览器中看起来相同。
不好的方法:
/* wrong */
element{
color: blue;
}
好的办法:
/* correct */
element{
color: #2596be;
}
结论
如你所见,以上5点就是作为 Web 开发人员需要避免的一些 CSS 错误。我也犯了一些这样的错误。这就是为什么我想和你分享它们的原因,希望那些新的开发者不要再犯我之前犯过的一些错误。
最后,感谢你阅读这篇文章,希望你觉得它对你有用。
学习更多技能
请点击下方公众号