As web developers, we all strive for cleaner, more maintainable code.
In this article, we’ll uncover 10 tried-and-true tips for writing cleaner CSS that will transform your stylesheets and make your projects shine.
1. Target Native Elements First
Targeting native HTML elements in your CSS provides a solid foundation for your designs and makes it easier to maintain a uniform user experience.
Setting styles for native elements like headings, paragraphs, lists, and links will reduce the need for excessive class usage and improve the readability of your markup.
/* Base styles for native elements */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
2. Use Descriptive and Consistent Class Names
Choose class names that accurately describe the purpose or function of the element they are applied to.
This makes it easier for others to understand your code and for you to maintain it in the future.
Be consistent in your naming conventions, using either hyphenated, camelCase, or underscore-separated class names.
/* Good example */
.primary-button {
/* styles */
}
/* Bad example */
.btn-1 {
/* styles */
}
3. Comment Your Code
Use comments to provide context and explanation for your CSS code.
This is especially helpful when working with complex or unusual styles, as it helps others understand your thought process.
/* Main navigation styles */
.navbar {
/* styles */
}
4. Organize Your Code
Use comments to organise your CSS into sections, grouping related styles together.
This makes it easier to navigate your code and find specific styles quickly.
/* Header */ /* ... */ /* Navigation */ /* ... */ /* Content */ /* ... */
5. Use Shorthand Properties
Shorthand properties allow you to define multiple properties in a single line, resulting in cleaner and more concise code.
Use them wherever possible to improve readability.
/* Longhand */ margin-top: 10px; margin-right: 15px; margin-bottom: 10px; margin-left: 15px; /* Shorthand */ margin: 10px 15px;
6. Use CSS Variables
CSS variables are a powerful way to store values that can be reused throughout your stylesheet.
This reduces repetition and makes it easier to maintain your code.
:root {
--primary-color: #ff6b81;
}
.header {
background-color: var(--primary-color);
}
7. Mobile-First Media Queries
Designing for mobile-first means writing your base CSS for mobile devices and then using media queries to progressively enhance the design for larger devices.
This approach ensures that your CSS is optimised for the widest range of devices.
/* Base styles for mobile */
body {
/* styles */
}
/* Media query for larger devices */
@media (min-width: 768px) {
body {
/* styles */
}
}
8. Avoid !important
Using !important should be reserved for exceptional cases, as it can lead to specificity conflicts and make your CSS harder to maintain.
Instead, use proper specificity to resolve style conflicts.
/* Avoid */
.button {
color: blue !important;
}
/* Better */
.button.special {
color: blue;
}
9. Keep Your CSS DRY (Don’t Repeat Yourself)
DRY principles promote reusability and reduce redundancy in your code.
Avoid duplicating CSS rules and values by using inheritance to share styles between elements.
/* Avoid repetition */
.card-header {
font-size: 18px;
font-weight: bold;
}
.card-footer {
font-size: 18px;
font-weight: bold;
}
/* Use inheritance */
.card-header,
.card-footer {
font-size: 18px;
font-weight: bold;
}
10. Test Your CSS with Multiple Devices
Testing your CSS on multiple devices ensures that your website provides a consistent and enjoyable experience for all users, regardless of their browsing environment.
This attention to detail will set you apart as a web developer and lead to more satisfied clients and users.