How to optimize your CSS

Keeping your CSS files small and organized is very important, especially if you’re going to spend any time editing your site in the future, (or if others are gonna be using the code i.e. clients).

Helpfully, there are a number of different techniques which can be utilized to aid organization and size of your CSS files in order to make them more streamline.

Having more streamlined CSS will save you time and stress in the long run so it’s important to get it right.

Firstly, keeping a single stylesheet, normally named style.css, is a good place to start in the organization of your CSS. Having a single stylesheet for the majority (if not all) of your website keeps everything together in one place which makes the editing process more streamlined.

Code in Style

In order to keep your CSS files more streamline it is important to start by using a good code editor, such as TextWrangler on Mac, or Notepad++ on Windows. This has a number of key benefits. As well as being easy to use, a program such as TextWrangler also color-codes different parts of code which helps in the coding progress. This is very useful for making sure that every style you have defined is spelled correctly as the style won’t change color unless it is recognized by TextWrangler as a CSS style. Tabs is another good feature of TextWrangler allowing you to keep open more than one file at a time which makes cross-checking easier.

To further streamline your CSS files it is a good idea to establish a set layout that is used throughout all your CSS stylesheets. Perhaps the most commonly used technique is to define the ID or class (using # or . respectively) then an open bracket { followed by an indented new line to begin styling, as so:

#header {
 width:500px;
 height:250px;
 }

By following this commonly used technique your stylesheet will be more organized and easier to code. The following techniques will all be aided by making sure that your layout is consistent throughout your CSS files.

Organize by Location

With any site the number of CSS IDs and classes used can easily reach a large number, so it is vital that your CSS stylesheet is well organized. One of the techniques that is extremely useful is to order your IDs and Classes by where they appear on the website itself. For example; placing the CSS styling for the header towards the top of the stylesheet and the Styling for the footer towards the bottom. By keeping this consistent across all the websites you code whenever you open a stylesheet you have created you will know exactly where to look to find the style you wish to edit.

Also, to further aid organization of styles it is wise to name your elements with obvious names such as Header, Footer, Sidebar, Main Content etc., which allows you to work out what each piece of styling refers, further aiding organization. If elements change purpose, though, make sure that their names reflect the changes; having an element named Header that is at the bottom of the page can become very confusing and makes ordering by location a more daunting task.

CSS Comments

This leads onto using CSS comments within your stylesheets. Although not always used, CSS comments to be very helpful to distinguish different parts of the stylesheet. If you have structured your stylesheets with styles relating to the header towards the top and vice versa, then you can utilise CSS comments to mark the start and end of differing sections such as the header and footer or the main content elements.

Using CSS comments is simple. Anywhere within the stylesheet start the comment with /* and then be sure to end the comment with */ . Crucially, anything within the comment, be it code or text, will not be parsed by the browser, which makes CSS comments very useful for leaving notes and descriptions relating to various parts of the stylesheet.

Perhaps a further two uses for CSS comments could be to leave comments for your clients, so should they wish to make further edits to their site in future they have a guide in place to help. Also, there may be differing styles for the same ID or class that you wish to preserve for potential use or for testing. Instead of labeling IDs and classes with a 2 at the end, e.g. header2, stopping that styling from being parsed simply wrap what would be header2 in /* and */.

As well as keeping your stylesheet more organized, as using the ‘2 technique’ can easily become messy, this technique also aids in the creation of different versions of styling within the stylesheet in an unobstructive way with ease of redeployment (copy and paste rather than changing numbers and deleting old styling).

However, whilst CSS comments are very useful it is also important to bear in mind the size and length of the stylesheet and to balance accordingly. Comments should not take up more space than the actual CSS; they should be short and to the point. It is also important to bear this in mind in relation to different versions. Do you really need all the versions you have saved within your stylesheet? Could you save a duplicate stylesheet elsewhere? Having multiple versions of styles within your stylesheet can become confusing so consideration of alternatives is crucial, such as saving duplicate files.

Avoid Duplication

Once the stylesheet is structured in an accessible way it can be easy to pick out unnecessary duplications within styling. Due to the nature of CSS, IDs and classes automatically inherit styling from their parent which removes the need to double up on styling. Perhaps the easiest technique is to define a number of key styles at the start of the stylesheet. Defining universal styles for links and text is helpful and removes the need to constantly define styling for every ID and class. Notably, this is also an effective way to maintain a consistent style across a website and has a positive impact on reducing the size of the stylesheet as well.

Using a tool such as Google Chrome’s Inspector, it is possible to see which styles are being inherited and from where, which further helps in the elimination of unwanted duplications within your stylesheet.

Use What You Need

Following on, to further streamline your CSS consider what CSS classes you are implementing. Do you need to use them all? It is easy to get carried away and define classes that you to not directly need but think you may do in future; in order to keep your CSS stylesheet streamline, small and organized only use CSS classes that are integral to your website’s functioning. Only code what is needed. In order to achieve this avoid duplicating styles, as stated, and remember to delete unused styles and those that are no longer relevant.

Conclusion

By following these simple techniques it is possible to create better organized and smaller CSS files that are easy to navigate and edit, both now, and in the future for yourself and your clients.

Have any great tips for keeping your CSS organized and streamlined? Let us know in the comments!

David Pickett

David Pickett is a musician and web designer from the UK. Follow him on twitter.