Have you ever looked at a stylesheet and found it an impossible mess to figure out? There seems to be no logical order for the properties and the many selectors are overwriting each other. Today I want to highlight some keys to making your stylesheets a pleasure to review rather than a terror.
Order the selectors from top to bottom of the html document.
See the Pen HTML Sample by karisP (@karisp) on CodePen.
In this example, the selectors should be ordered top to bottom if your stylesheet is not nested like SASS. The first selector should be .container followed by h1, then followed by .text, then followed by button:first-of-type, and lastly followed by button:last-of-type. Ordering selectors from top to bottom will help you and others find the proper selector for style additions or edits. This pattern of development saves loads of time and headaches because the developer knows exactly where to look. One could scroll down the stylesheet and expect to find the button selectors after the h1 and p selectors. In the case of a nested stylesheet, it is best practice to use the .container selector, then place within it the children selectors in their top to bottom order on the page. Save yourself and others many headaches and order your selectors efficiently.
Order the properties consistently.
Predictability in the order of the properties makes the code easy to correct at a glance. It is fairly common to see newer developers write the properties in the order in which the ideas came to mind. While there is nothing wrong with that being the thought process of development, one should consider who may be reading and editing the stylesheet later. That developer may have to sift through hundreds of lines of code looking for one bug and you’re doing a kindness to them by ordering your properties before pushing that commit.
See the Pen HTML Sample by karisP (@karisp) on CodePen.
In this example, I’ve ordered the properties as layout, dimensions, spacing, and typography. You may choose another order of concepts; however, notice the properties that one would expect to be related are next to one another. Consistency in whatever pattern you choose will help you catch your own mistakes and your fellow developers will thank you.
Order the media queries from mobile to desktop.
More people are using their mobile devices to browse the internet than ever before. We as developers should have a mobile-first mindset. Part of that process starts with the order of the media queries in your stylesheets. I have reviewed code that had combinations of max-width and min-width in no particular order from selector to selector. It made it difficult for me to tell if I was looking at the mobile, tablet, or desktop styles. I recommend a min-width approach with your first set of properties being the default mobile styles. From there, add as needed the changes for each breakpoint larger than the last.
See the Pen HTML Sample by karisP (@karisp) on CodePen.
With these 3 tips, your code will be easier to read and comprehend for yourself and others. Excellent code involves thinking about the people who may be impacted by it later. Your code could be a future learning tool for other developers, so be precise.
