Tips for cleaning and maintaining a big css file

Question

I just started this new job, where as the designer I have to maintain the CSS file for our web app. Right now it spans almost 7000 lines, weights over 160kb and has hundreds of !important rules.

I would like to reorganize the file, split it into sub sections, clean it, and homogenize its syntax.

But it seems like a huge undertaking and the file and the app are so big and complex that I wonder if it is even doable without breaking something (and not seeing it).

I have audited the file using online tools, and it seems I can use some sort of automated refactoring without risking too much. I have also tried a few tools to check if selectors are actually used, the problem is that this web app is written completely in javascript, so the whole thing is dynamic and regular tools are practically unusable (no proper links to follow, no site map etc.)

Do you guys have any recommendations on how to proceed, where to start, and if it is even worth my time?

Answer 1

Refactoring such a huge piece of code will be extremely time consuming and difficult, here's my 2p worth, from my experience:

1. start branching the project (here I suppose that you are using a version control tool) - that will allow you to play independently with the code and tag any milestone you will reach.

2. format your CSS with a beautifier - it will increase readability and will help searching for specific declarations without missing any instances.

3. try to identify unused / redundant css and get rid of it.

4. you could try to make your selectors shorter (e.g. .main .foo .bar might be fine as .bar) - it will improve readability and increase the performance, but take this with a pinch of salt and be ready to go back if things start to break at every step you take.

5. try to eliminate, if possible, any !important - make the selector more specific if needed. A css reset could help with that if most of the !important statements were made to fix browser-specific issues, otherwise introducing a css reset now could potentially add more problems than solve them - this, if there is no css reset in your app at all.

6. break and regroup the css into different modules (and files if that helps) - Object Oriented CSS is a possible technique to keep things more maintainable, it works best if you start with it but it may also help you in refactoring. https://github.com/stubbornella/oocss/wiki is a valid one but there are alternatives that you can consider, like SMACSS.

7. After that , you may consider using a css preprocessor such as Less or Sass, allowing you to define variables and mixins (similar to functions), modularity and much more - this may end up being a very expensive task though, so evaluate carefully if this will bring you more benefits than pain.

8. test as much and as often as you can, consider unit tests to make sure that any changes you make don't break anything somewhere else.

9. Sometimes re-writing everything may end to be less time consuming than refactoring, so don't be afraid to leave things as they are if your assessment will show that refactoring will not bring enough benefits.

What you are facing is one of the most daunting tasks, so good luck with it!

Answer 2

You're going to have to look through all of the code and understand it. You can't try to run it through some automated utilities and have it do the work for you. Writing compact CSS is an art and you can't take shortcuts or else your file will end up over 160kb.

On the other hand you can start from scratch and roughly base your styles on the original.

What I would recommend though, is using an "Inspect Element" utility like Firebug on Firefox to see if there are any redundant styles.

Also try and split styles that appear on multiple pages into a general CSS file and others into specific files.

Answer 3

At first i would recommend to use some CSS preprocessor. For example you can use LESS. At first make your CSS prettier using http://www.procssor.com with your custom options, then paste it in http://css2less.cc/. You probably may need to do some changes to "modularise" the code.

Then you can take out code snippets, which do not appear on every page and load them manually in the place they are needed.

Compile CSS from LESS and start using it.

Edit:

So your CSS might look like this:

#wrapper #nav { some-rules }
#wrapper #content { some-rules }
#wrapper #footer { some-rules }

#wrapper #content form#register-form { some-rules }

Apply css2less:

#wrapper {
    #content {
        some-rules;
        form#register-form {
            some-rules;
        } 
    }
    #footer {
        some-rules;
    }
    #nav {
        some-rules;
    }
}

And modularise it:

main.less

#wrapper {
    #content {
        some-rules;
    }
    #footer {
        some-rules;
    }
    #nav {
        some-rules;
    }
}

register.less

#wrapper {
    #content {
        form#register-form {
            some-rules;
        } 
    }
}

Answer 4

Stuff will break, but that's ok, you'll live through it. Since you are rewriting it might be nice to look into a dinamic CSS language like Saas or less

Answer 5

I would start over

Firstly clear the style with the boilder plate http://html5boilerplate.com/ css clearer this should remove the need for all the !important rules, The boilerplate aims to remove the style differences between browsers.

Then potentially use something like this http://lesscss.org/ to make a dynamic manageable style sheet.

Look for common elements and use shared class for these.

Even in the most complex applications you should not need a 7000 line style sheet.