Writing better CSS can be easy. Remember to normalize, organize and alphabetize! Steps to writing better CSS (I couldn’t help myself with the naming):
- DRY and write reusable CSS
Resets remove the default styles for all elements while normalize retains most of the useful default browser styles. When starting a new project, I prefer normalize over resets.
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
It also corrects bugs commonly found in browser inconsistencies and doesn’t clutter your debugging tool. Simply download and use normalize.css as-is, or customize it to meet your requirements.
Organize your CSS code to reflect the flow of your website’s layout. For example, your navigation CSS should be at the top of your file and your footer should be closer to the bottom:
Put properties related to one another close together and use comments sparingly to break up the different sections of your CSS. The combination of a few comments and grouping similar elements together will make it much easier to quickly find what your looking for.
Alphabetize Your Properties
Write your CSS properties in alphabetical order; it will help reduce the time it takes to find a specific property.
Jen Myers’ post on Why you should order CSS properties alphabetically made me a believer:
Here’s the simple truth up-front: alphabetical CSS ordering makes your CSS most easily accessible to the widest group of people with the least amount of clutter in your stylesheets.
This principle is fairly new to me, but has really helped make my code more navigable. Which example makes it easier to find specific properties:
The second CSS block is easier to skim through, right? I know the z-index will always be at the bottom of the block. Don’t worry about alphabetizing vendor prefixes (like box-sizing or transition, for example) with the rest of your properties, as you will want to keep those grouped together.
Don’t Repeat Yourself and Write Reusable CSS
DRY up your code! Repeating yourself leads to huge CSS files and unnecessary code bloat. Take the time to plan out your elements in a simple and reusable way. Reuse your classes and tag on additional classes when needed.
Here’s some really repetitive code:
Lets DRY this up and make it a bit more reusable:
Be Consistent and Thoughtful… and Clean up Your Code!
These simple steps will make your CSS more organized, lightweight and easier to read. This will only benefit you and anyone else who needs to make changes to your code.
You can view my slides on Speaker Deck.