Refactoring CSS Code (2018 Update)

Refactoring CSS Code

Writing good code is about more than just getting the results you want on a webpage. Good code should be as efficient and concise as possible. While there are often numerous ways to achieve the same results, the most succinct and simple method is, with few exceptions, the ideal choice.

There are two major benefits of writing good, clean code. Firstly, it can dramatically improve site speed and performance. The smaller your file is (and the fewer external requests you are sending) the less time it will take for your website to load in the browser. Secondly, writing good code has the invaluable benefit of making it easier to maintain. Whether you are coding a project on your own or with other developers involved, the more lean your code is (ideally with good documentation), the less it’s going to be a headache for anyone having to revisit the codebase.

Best practices for writing good code are often applicable to all programming languages, although this post will specifically be tailored to improving the CSS on your website.

Remove unnecessary HTTP Requests

Many times in the process of developing a website, you may end up with multiple external files and dependencies linked to from your HTML document or CSS files. You may try out multiple different fonts or CSS frameworks, hosted on an external CDN. Each one of these dependencies represents an HTTP request your site is making each time it is loaded in the browser. This puts a great strain on site load time, and all of these requests add up pretty quickly.

If you added a bunch of external font files to your project, but are currently only referencing 1 or 2 in your CSS file, go through and remove any of these linked dependencies from the <head> of your HTML document.

Are you only using a CSS framework for just a few lines of code? Consider copying and pasting these lines to your main .css stylesheet, and remove the link to the original CSS framework code.

Simplify & Consolidate CSS Rules

While writing CSS, you may end up repeatedly writing the same rules for various different elements and selectors. In computer programming, the oft-repeated concept of “DRY” (Don’t Repeat Yourself) applies to CSS as well. Anytime you find yourself writing the same CSS rules for different selectors, find a way to consolidate them.

For example, instead of writing:

p {
  font-size: 14px;
  margin: 0 auto;
  display: inline-block;
}
​
h1 {
  margin: 0 auto;
}
​
img {
  display: inline-block;
  margin: 0 auto;
}

 

Consider writing:

p,
h1,
img {
  margin: 0 auto;
}
​
p {
  font-size: 14px;
}
​
p, 
img {
  display: inline-block;
}

 

Or even better:

/* applied to p, h1, and img elements */
.def-margin {
  margin: 0 auto;
}
​
/* applied to p element */
.def-fs {
  font-size: 14px;
}
​
/* applied to p and img elements */
.d-ib {
  display: inline-block;
}

 

While this may not seem like a big difference (at least in terms of lines of code), the total count of characters has been significantly reduced, which will have an impact on page load times. Additionally, it consolidates elements and selectors that are utilizing the same styles, making it clearer to see what common styles are being applied to different elements.

Refactoring CSS Code

 

Reasses your ID & Class values

It’s often tempting to assign an aspect of style presentation as your class or ID values, but this is far from ideal. For example, for an error message, it can often seem to make sense to use red as the class or ID value, like so:

<div class="red">This is an error message</div>

 

But what happens if you change the color or other styles of this class? This class will no longer have a direct relation to its content or presentation, and will most likely cause confusion. A better choice in this situation would be to use a class value that explains its function, rather than its stylistic presentation:

<div class="error">This is an error message</div>

 

It’s always a good idea to use class and ID values that describe the content or function of that element, rather than any stylistic descriptions. Style can change many times throughout the process of creating a site, but using descriptors for functions will make the code much more readable and easy to maintain.

Reasses your selector choices

There are often many different ways of selecting an element, but there are often more efficient ways than others. While it is possible to nest selectors inside of each other in order to get to a specific element, if you find yourself having to go too many levels in, it might be best to reassess if a class or ID value would function better.

Check for redundancies

In the process of styling your webpage, you may try out a variety of different colors, for example many shades of the same color. It’s easy to leave these different rule sets in your code, without deciding on a definitive single color. A good tool to use to check for these types of redundancies is cssstats.com.

Not only will this simplify your code, it will also make your overal design much more consistent, rather than having 40 different shades of a color on the site.

Minify your CSS files

Once your CSS files are fully ready for production and deployment to a live server, it’s a good idea to minify them for best performance. A minifier will remove all white space from your source code, significantly reducing the file size. Since source code does not rely on white space for its functionality (only its readability), this will have no negative affect on how your site runs.

There are many free tools for minifying CSS (and JS files). One option is cssminifier.com.

Consolidate your CSS files

As was briefly touched on in the last post, it is a good idea to consolidate your resources as much as possible. While there is a good argument for keeping CSS modular during the development stage (such as keeping layout rules in one CSS file, color options in another, etc.) — ultimately you will want to consolidate all of these CSS rules into a single file for best performance.

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2018 Sunlight Media LLC - Web Design Company