How do I refactor my CSS? [duplicate]

Question

Possible Duplicate:
How to Manage CSS Explosion

I intended to build my web site with consistent styles and a coherent CSS scheme. But styles have crept out of control as I fine-tune individual pages (especially the main search form).

I've already gone through the process one time of breaking down the styles and rebuilding almost from scratch, and now it looks like time to do that again. How can I be efficient about this? I'm looking for a methodology, not a software utility (though I'm open to suggestions there...unless they cost money...).

Added note: I'm using a CSS framework and it's difficult to keep padding and margin coordinated.

Added note 2: The initial responses to this post are about best practices for CSS. Let's assume I already tried to follow best practices (in fact, I did). Now it's the clean-up procedure I'm looking for.

Added note 3: As of 14 June, combining this response (which I just found) with my post below is possibly a comprehensive answer.

Closure notes:

I learned my question is too general, and for that reason I wish I hadn't posted it. (Maybe that's why it got a down-vote ... I'll never know without a comment to explain the reason.) On the other hand I got just what I needed, so I'm happy I did post it.

I'm surprised I didn't get an up-vote for my answer -- even with the priceless input by others, I think it stands up pretty well.

My acceptance is going to be based largely on the usability of the answer, from my point of view -- a point of view that is sadly unable to digest some of the more exciting and comprehensive responses.

Closed as an Exact Duplicate

I just tried posting this again (subject, body, tags) to see if SO would suggest the post "How to Manage CSS Explosion". Interestingly, it did not. I added the tag refactoring to that post.

Answer 1

Split your css into separate files.

1. Put in one file the CSS reset (if you use one)
2. Then create a global.css file where you will put global styles that apply to many-all pages
3. Then create individual files for your individual pages

Then start styling your pages. Every time you find a style rule that is reusable on many pages make it a CSS class and put it in the global.css file. Avoid using css ID's. You will find that you more often reuse things or will reuse in the future. In this case you use of course CSS classes.

Eventually you will find out that in your global.css you will find mostly CSS classes rules and html tag rules.

In your individual page CSS files you will find specific styles for each page.

That should give you a good first level of organization in your CSS. You can try to keep this separation through the whole development process, and for releases merge the CSS files into one and minify it.

Answer 2

my 2p worth about css cleanup, from a a previous similar question: Tips for cleaning and maintaining a big css file

hope that this may help you together with others' answers!

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.

EDIT

Things change and evolve for good; with regards to OOCSS/SMACSS approach, I have been happily following for a while, Yandex's BEM methodology for CSS, I would like to add it as an additional recommendation to the above

Answer 3

The first thing I'll do is separate the CSS based on the purpose. Maybe first the general page layout (DIVs, boxes, ...), then the styling (fonts, H1/H2/.../Hn titles), then some more specialized CSS (CSS for tables, for forms, for specific components of the site).

Such a separation helps to organize the changes; if you have to change or add a font, you know you'll find it in the styling section. If you have to change the page layout, there goes the same, and so on.

Things tend to get messy when you have "individual pages"; is their layout so different? You probably have to abstract the common features of the pages (for example, a main content container box) as long as you can. Then think about specializing more the layout (1-column, 2-column) and so on. If you have a programmer background, just think about classes and inheritance, the concept - yes I know it's a totally different domain... - but the concept can be useful in designing your css.

Answer 4

Based on this current round of work, here is what I've got so far:

the Planning

1. Have a system for handling To-Do notations in your HTML and CSS. Many IDEs support this directly, or a global search function will do just fine. Besides tagging issues, you want to note priority and perhaps even functional area (but keep it simple, not a burden).
2. Don't start revising your code. Use your To-Do system to plan first.
3. Make a concise list of your overall goals.
   
   • Consider overall sylistic changes such as color or font scheme.
   • Review best practices for CSS. Identify areas where your approach is ineffective, or where a good approach can be applied more consistently. Examples:
     • Consolidate classes
     • Eliminate haphazard use of in-line styles
     • Remove styles that are unused or redundant or conflicting
     • Improve general consistency; apply a set of conventions
     • Improve units of measure
     • Use class and id names that reflect content rather than format
   • Decide how much of the browser market you want to support and how much to embrace or rely on the newest standards.
   • Decide if there are any new approaches you want to adopt. Examples:
     • Use of a reset style sheet to standardize browser presentation
     • Use of a CSS framework
     • Use of a specialized library, for example to help with forms
     • Dynamic CSS (I recently followed advice to use PHP to handle my CSS, so I could dynamically control my color scheme. But I returned to straight CSS, because I like the presentation of CSS code in my IDE and the hybrid method messed that up.)
4. Review your list of goals and decide which should be pursued now. Any large-scale change should be treated as separate, if possible. If your column layout is a mess, it's not the time to learn how CSS can elegantly replace your javascript. The same goes for best practices, stylistic changes, etc.
5. If you have your CSS files configured for speed (for example, compacted footprint or all CSS in a single file), change that. Break the code into a human-managable format. Later when you're finished, try benchmarking to see if the more legible version is also efficient enough for production use.
6. Submit your CSS to a validator. Note any violations you want to fix.

7. Find instances of in-line styles in your HTML (search for the style attribute). Note any that should be moved to a style sheet.

   the Work

8. Follow your To Do manager. Make common-sense back-ups. As you go, test your work on several browsers.

9. If you are into regular expressions, be warned: regex is often not effective or safe for rewriting CSS. (Not as hazardous as for HTML, but still). Regex may be useful sending CSS changes into the HTML, but again be careful.
10. If you have a lot of tweaks to margins and padding, try globally resetting all of them to 0px (okay, use regex here). Then systematically build them back up. You can resolve a lot of confusions this way. Of course, don't include any library or framework style sheets in this process.
11. Again, submit your CSS to a validator.