163 reads

5 Simple Tips to Keep Your CSS Stylesheets Nice and Clean

by Ara CENovember 27th, 2019

Too Long; Didn't Read

As programmers, we know that as we grow in experience, our projects start to become larger, more detailed, and our code begins to grow exponentially. Here are 5 tips that make it easier to keep your CSS stylesheets clean, organized and readable. One of the best practices in Web Development is D.R.Y. (Don’t Repeat Yourself!) Building the HTML skeleton first will allow you to have a better idea of the content you’ll be building, and style it with a more realistic idea of space you need for each section.

People Mentioned

featured image - 5 Simple Tips to Keep Your CSS Stylesheets Nice and Clean

“For every minute spent organizing an hour is earned”- Benjamin Franklin

As programmers, we know that as we grow in experience, our projects start to become larger, more detailed, and our code begins to grow exponentially. Going line by line in a stylesheet where you have 900 lines of code at least (sometimes so much more!) can make you feel dizzy, overwhelmed and will leave you feeling very tired at the end of the day. So, for your peace of mind and relief, here are my favorite 5 tips found on the web that make it easier to keep your CSS stylesheets clean, organized and readable.

Comment Your Code

One of the easiest steps is to comment your code. Make sure you know where the styling for the MAIN content is. Easily locate the LARGE, SMALL and MEDIUM media queries. Or where the footer stylings are, etc.

As you skim and scan through your code, locating these comments will make your life so much easier and you will avoid unnecessary repetition or getting lost in your many lines of code.

Common Styling first

If you have a large article that has several sections with h2s with the same styling. There’s no point in writing the styling for each section title over and over again. One of the best practices in Web Development is D.R.Y. (Don’t Repeat Yourself!) Anywhere that you find where you have common styles, put it on the top of your CSS stylesheet!

If you ever need to change the specific look of one of the elements you’ve already added, you can easily add an id or class to the one you wish to change, and override the current styles by adding the new ones.

Use Classes and Id’s

These two selectors are wonderful to help you organize your code better as well. For example, if you have many section elements within your HTML, that belong to different divs or content sections, using the

section {}

selector or

div {}

on the CSS style sheet might not be convenient, but you can add classes or id’s to help you identify which ones need to have a specific style and use these instead. It’s all about specificity.

There seems to be a debate around the use of classes and Id’s. Some think classes are better than Id’s or the other way around. The truth is that it will most likely depend on the use you’ll be giving it on your website, and also on the specificity of the element.

If you’re debating over which one is better to use, just think about it this way. If you will be repeating the styling on your page and would like the flexibility of changing them in the future; if needed, then you will most likely use classes. However, if you know that it is unique and you will most definitely not be using or changing it again later, then go with an ID.

Keep in mind that ID’s do have higher specificity than classes, making them all that much harder to override. So if you’re not thinking about overriding them at all any time soon or even in the future, by all means, use an id.

Plan Ahead

Even though overriding through specificity is great, sometimes it might not be the best choice. Make it a rule to plan your styling and avoid overriding as much as you can. Build the HTML skeleton first! This will allow you to have a better idea of the content you’ll be building, and style it with a more realistic idea of the space you need for each section.

Do not design as you go. Make sure you have Wireframes, Heatmaps and your design idea ready so that you have a proper guide and better organization of your content. Keep in mind the following quote by Sun Tzu:

“Plan for what is difficult while it is easy, do what is great while it is small. The difficult things in this world must be done while they are easy, the greatest things in the world must be done while they are still small.”

Planning will always be easier while the project is still small.

Alphabetize

Yes. That’s right! Alphabetize your properties! I know I’ve always wondered if margin should go first or width or height or does it even matter? The truth is, it doesn’t matter. But to make it more readable and organized for you and others, it might be nice to alphabetize your properties and that way you are also being consistent.

You’ll know how to find the properties easier because they are in a specific order throughout your entire stylesheet and because you’re being consistent!

There are many more tips and suggestions on how to keep your stylesheets organized. Some articles have the same opinion on certain things and sometimes even debate over the best practices. Although there are tips that are quite standard for everyone, be sure to use whatever works for you, whatever brings you peace of mind and a sense of organization.

Especially in situations where you are working with a coding partner, make sure you are consistent and D.R.Y. to avoid stress and confusion.