5 CSS Practices that You Should Avoid

Hey there! It's been a while since my last article, and I've missed connecting with you all. I'm excited to be back and share some helpful tips for your web dev journey!

Today, let's explore five CSS practices you should avoid. I hope you find these insights helpful! Let's go 🚀

1. Overly Specific Selectors

Writing highly specific selectors can make your CSS harder to manage and debug. Keep selectors simple and reusable.

Avoid:

#header .nav .link.active:hover {
    color: red;
}

Better:

.nav-link:hover {
    color: red;
}

Use specificity only where needed to avoid unnecessary complexity.

2. Overloading Global Selectors

Using universal or overly broad selectors can unintentionally affect large portions of your site.

Avoid:

* {
    margin: 0;
    padding: 0;
}

Better:

html, body {
    margin: 0;
    padding: 0;
}

Reduce the usage of global selectors to prevent unexpected side effects.

3. Hardcoding Colors or Values

Hardcoding makes updates difficult. Instead of using random values everywhere, use variables for consistency.

Avoid:

.primary-btn {
    color: #3498db;
    margin: 20px;
}

Better:

:root {
    --primary-color: #3498db;
    --default-margin: 20px;
}
.primary-btn {
    color: var(--primary-color);
    margin: var(--default-margin);
}

4. Inconsistent Units

Mixing units (e.g., px, rem, %) leads to inconsistent designs and responsiveness issues.

Avoid:

font-size: 16px;  
margin: 1rem;  
width: 50%;

Better:

font-size: 1rem;  
margin: 1rem;  
width: 50%;

Use consistent units like rem for fonts and % for layout.

5. Forgetting Browser Compatibility

Using new CSS features without considering browser support can break designs for some users.

Avoid:

div {
    aspect-ratio: 16 / 9;
}

Better:

@supports (aspect-ratio: 1) {
    div {
        aspect-ratio: 16 / 9;
    }
}

Conclusion

By avoiding these common CSS practices, we can write cleaner, more efficient styles and ensure high-performance web pages. Following best practices not only improves the user experience but also makes our code more readable and maintainable for our team. 

I hope you found this post helpful! See you in the next article!