CSS Mistakes While On Autopilot

CSS Mistakes While On Autopilot

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.

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;
}

Make Sure To Checkout the post : Java With JDBC.

Thank You For Visiting ! Happy Coding Mates : )

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shopping Cart