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

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

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

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!

0 shares
  • http://profile.yahoo.com/67SEI3VRGUBVM7MAEK7JRHC2SQ Boudet

    hmm.. certainly the worst lesson of how make a nice CSS…

  • http://twitter.com/AdamJessop AdamJessop

    Hmm not really the best article to ever grace the site.
    Most of the article is what I believe to be common sense regarding CSS.

    Also the ending of “smaller css files” isn’t strictly true as the article goes on about inserting new lines, indentation and comments.

    Smaller CSS files on production sites should be stripped of whitespace and comments and compressed via gzip, this generates smaller css files, not the common best practices mentioned in the article.

    • http://dspickett.co.uk/ dspickett

      I agree that I tried to focus on the common sense side of CSS as I have encountered a number of poorly coded CSS files recently that fail to use common sense with regards to their CSS. I have especially encountered a lot of duplication recently as well.

      In regards to “smaller css files”; I made the point of holding back with regards to comments but feel that comments and indentation are essential parts of maintaining a stylesheet that is going to be edited, especially by clients. 

      I completely agree with you about gzip; it’s definitely something that is worth using and agree that on production sites the reduction of whitespace and comments is an extremely good practice that should be followed. It’s something many people forget!

      Thanks for taking the time to read the article.

      • Anonymous

        Yeah, many people forget. Especially you… Go to your website and check out “new” ways to improve your css. And then write that article again.

    • http://www.facebook.com/inwachukwu Immanuel Nwachukwu

      Maybe makers of most CMS templates can use this suggestions.
      I find these so-called commonsense tactics missing in most of the sites I get hired to manage.

  • http://dspickett.co.uk/ dspickett

    Thanks, I did intend for the article to be aimed at CSS beginners.

  • http://twitter.com/vinIMPACT Vin Gaeta

    I agree with Adam that most of this is common sense, but it’s always great to have a reference for people who are new to CSS conventions. Really great CSS101 article on how to create clean and effective CSS.

  • http://twitter.com/aripalo Ari Palo

    As couple others already said, the title “how to optimize your css” was misleading. 

    Maybe you could change it to something like “how to write clean css” etc. I know it’s good to keep repeating these kind of articles about clean/organized/best-practice etc CSS, since that’s the way newcomers will get introduced to such best practices. And since this is more design than development blog, it’s even more important because readers are mostly not from development background.

    But when the topic is about CSS optimization one could honestly expect to read about coding patterns, selector performance, rendering performance, minification, compression and so on.

    And maybe if the article is *really* thorough: discuss how preprocessors can be helpful and also harmful for developing good CSS and maybe a look into component/module based development ways like SMACSS, BEM or OOCSS. But these are topics that aren’t that simple therefore they usually need their own article and maybe design oriented blog is not about those topics, but it is good to mention them.

  • http://www.facebook.com/profile.php?id=100002045429029 Mohamed Alaa

    I didn’t find it helpful the article, i was expecting to see some best practices or something!

  • http://www.kreativtheme.com KreativTheme

    These are pretty  basic tips … but very useful if you keep them in your mind while coding … :) 

  • Gábor Zsótér

    useless article