5 Common CSS Mistakes To Avoid

1. CSS reset : Browsers have different defaults so use a CSS reset to bring them all in line.

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

2. Using relevant units : Use wherever possible (%, rem, fr, vw, vh) for scalable fluid layouts.

/* WRONG */
p {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 8px;
}

/* RIGHT */
p {
    font-size: 1rem;
    line-height: 1.25em;
    margin-bottom: 0..5rem;
}

3. Avoid repetitive code : When two components have same CSS properties instead of repeating, you can simply add a " , " (comma) and add the second component. Now both these components share a single CSS styling

/*WRONG*/

.article {
    background-color: #fff;
    border-radius: 1rem;
}

.sidebar {
    background-color: #fff;
    border-radius: 1rem;
}

/*CORRECT*/

.article, .sidebar {
    background-color: #fff;
    border-radius: 1rem;
}

4. Using Color Names Instead of Hexadecimal : By saying: color: red; - You’re essentially saying that the browser should display what it thinks red is. If you’ve learned anything from making stuff, function correctly in all browsers, is that you should never let the browser decide how to display your web pages.

<!--WRONG-->

.box {
background-color: red;
}

<!--CORRECT-->
.box {
background-color: #ff0000;
}

5. Start using comments : They are helpful for anyone reading your code since it lets them understand important ideas or sections. Comments don't appear in the browser so they won't affect any styles you have on your elements. To comment out in , CSS insert information like this, shown below

/* A one-line comment in CSS */

Have something to say or improvements to add? Feel free to reach out to me on Twitter and maybe even share this post using the button below :)