当我们非常专注于编写代码时，我们常常会不自觉地编写一些无效的CSS代码。我称之为“潜意识错误”。在造成这种错误之后，我们常常会问自己：“我为什么会写这么低级的错误？”不过这些错误比较容易解决，也不需要花很多时间，改正即可。跟随这篇文章，看看我经常写哪些有趣的CSS错误。FontSize我经常把font-size和font-weight弄错，如下：.title{font-size:bold;}Opacity不知道为什么，有时候我会忘记写百分比：.title{opacity:50;}关于opacity，我经常犯如下错误：.title{/*这个点不好找，你看错在哪里了吗？😨*/opaciy:0.5;是不是FontWeightlight或者更轻😲?.title{font-weight:light;}Padding当你认为属性是padding，但实际上使用padding-top🔨:.section{padding-top:10px20px;}Talent时会发生这种情况,优秀的🙀。CSSGrid对于CSSGrid有时我会下意识地写grid-column而不是grid-template-columns😖:.section{grid-columns:1fr1fr1fr;}CSSvariables对于CSS变量的使用，我经常忘记写var😌:.title{color:--brand-color;}的正确写法如下：.title{color:var(--brand-color)}BoxShadow😧我经常用它重置box-shadow0来重置：.title{/*Illegal*/box-shadow:0;}正确的写法如下：.title{box-shadow:none;}VisibilityHidden元素可以使用visibility,但我会经常这样写😝:.title{visibility:none;}的正确写法如下：.title{visibility:hidden;}width有时为了width😮而脑抽，写像这样：.title{widows:100px;}offsetproperty对于css的offset属性，我会经常这样写：.elem{left:14;}少了什么，大家可以自己体会一下🐶。CSScalc()如果你的代码没有高亮功能，你也可能写成😉:.elem{font-size:clac(14px+1vw);}CSScolor我记得遇到过这种错误😜:.elem{color:#red;}显示不多说了，大家自己体会吧：.title{display:absolute;}Transforms😛.title{translate:(-50%,-50%)}作者：Ahmadshaded译者：前端小智来源：sitepoint原文：https://heydesigner.com/css-mistakes-on-autopilot/关注下方二维码。转载本文请联系大千世界公众号。
