Clean CSS in 7 Simple Steps

I recently watched a video tutorial on CSS Visual Optimization. This lesson went over the basics on how to create a more efficient, clean, and optimized CSS stylesheet. From this information, I compiled a list on what I believe are the seven most important tips to create clean code.

  1. Color Guide – Recently, I worked on a typography project that I wanted to make use of 4 or 5 main colors to use without the site. I had to either scroll up and down my code to refer to the color I used previously. Then I thought I was really efficient when I wrote it all down on a piece of notebook paper instead. A color guide is a great idea to create a key at the top of your code with all of your colors in one spot.

  1. CSS Reset – I’m about 4 month into my web design program and I just learned about the CSS reset. I wish I learned about this so much sooner. By default, browsers have their own style already embedded into a website. A CSS Reset clears all the margins, padding and other bothersome code and gives the coder a clean slate to start with. This tip is also explained a little further in an article by Silo Creative. There are a few reset options to choose from, but whichever method you choose, it will ultimately help with better design because you won’t have to create extra lines of code to erase the default styling throughout your markup.

  1. Table of Contents – This tip is particularly helpful if you plan on selling your code as a theme or if other people will need to look at your code and help edit it. An article by Cats Who Code, explains that, “As CSS files are becoming bigger and bigger, the easiest way to quickly find what you’re looking for is to create a table of contents and organize your ids and classes.” This tip will make designers work more efficiently, especially in the testing phase.

  1. CSS declarations – In the video, I learned that having too much white space in your code creates longer load times. Shorthand techniques and minimal white space makes code look cleaner and you can find what you are looking for fast. If you have one rule for a class, it’s ok to put it all on one line. If your class has multiple rules, you can put it on one line as well and separate each by a comma. For clarity sake though, move the selectors with multiple rules to multiple lines. Creating faster websites make for better web designers.

  1. CSS Shorthand – Embracing CSS shorthand saves the web-designer a lot of time in the developing stage. Instead of taking up white space by multiple lines of text, it is more efficient to condense your code into one line if possible. For example, instead of writing out #FFFFFF for white, you can condense it to #FFF. Instead of writing out a separate line of code for padding on all sides of an element, try putting it all on one line.

  1. Typography guide – A good website usually tries to keep within two fonts, maybe three. Along the same lines as a color guide, it’s also good practice to have a typography guide so you can have a quick reference to where you should use which font. This makes you a better designer because you save time in your development and create a guideline for consistency on where how you use the fonts chosen for your design.

  1. Creating a structure template – Creating a structure template for the things you do repeatedly each time you create a new web design efficiently cuts so much time in the design process. If you use the same reset method every time or use the same typography every time, or you’re a fan of responsive two column designs, it would be helpful to have a template saved with this code already created. This saves you multiple lines of code that you don’t have to type out every time.

I found these tips helpful in my recent typography project. I used the color guide and typography guide at the beginning of my CSS to help keep me consistent in my design. I also started cleaning up all of the white space I created by moving applicable rules to one line.