When weâre very focused on working on a web project, we tend to forget or do some mistakes that can lead to an invalid CSS code. I like to call these âAutopilot mistakesâ. The kind of mistakes that make us ask ourselves: âOops, why did I do that?â, and solving them doesnât take much time, only if you found them in the first place.
I asked on Twitter about the funniest mistakes that a front-end developer can do, and I got some funny responses.
What's the *funniest* CSS mistake that you do a lot?
â Ahmad Shadeed (@shadeed9) August 9, 2020
I do `font-size: bold` way too much. đ
And you? pic.twitter.com/XUV44Re6Fm
In this article, I will go through some of the most common and funny CSS mistakes that we do while in autopilot.
Mistakes that I do
Font Size
Mistaking between font-size
and font-weight
is common. Here is the mistake that I do too much.
.title {
font-size: bold;
}
Opacity
I donât exactly know the reason, but sometimes I tend to forget the percentage for the opacity value.
.title {
opacity: 50;
}
Another common issue is mistyping the opacity
property.
.title {
/* It's not easy to spot this */
opaciy: 0.5;
}
Font Weight
Is it light
or lighter
?
.title {
font-weight: light;
}
Padding
This can happen when you think that the property is padding
, while in reality, itâs padding-top
.
.section {
padding-top: 10px 20px;
}
CSS Grid
Sometimes, I type grid-column
instead of grid-template-columns
.
.section {
grid-columns: 1fr 1fr 1fr;
}
CSS Variables
I donât why, but I found that Iâm too lazy to write var(--brand-color)
instead.
.title {
color: --brand-color;
}
Box Shadow
I always forget that box-shadow
should be reset by using none
.
.title {
/* Invalid */
box-shadow: 0;
}
Also mentioned by Ahmed Hosna
From the community
Visibility
Credit goes to Ori Livni
.title {
visibility: none;
}
Width
I canât count the times I did this, and it reminds me of Sublime Text.
Credit goes to bullzito
.title {
widows: 100px;
}
Offset Properties
There is a weird feeling of abandoning units from CSS offset properties for a positioned element.s
Credit goes to ciruelo
.elem {
left: 14;
}
CSS Calc()
If the code editor youâre using doesnât provide proper highlighting, you will miss this one.
Credit goes to Sven Wolfermann
.elem {
font-size: clac(14px + 1vw);
}
CSS Color
I remember facing such a mistake. Maybe thatâs the result of using red
to quickly prove something?
Credit goes to TJ Trewin
.elem {
color: #red;
}
Display
.title {
display: absolute;
}
Credit goes to Nitin Suresh
Transforms
.title {
translate: (-50%, -50%);
}
Credit goes to HÄvard Bob
Iâm writing an ebook
In that regard, Iâm excited to let you know that Iâm writing an ebook about Debugging CSS.
If youâre interested, head over to debuggingcss.com and subscribe for updates about the book.