How to optimize your CSS

Default avatar.
March 05, 2012
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 {
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.


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.

Read Next

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…