How to organize css files?

Question

When my site depends on many css files, I realize it is a mess. It means, I use different css files from another team, and I put them together with mine. Hmm, many files then!. I get stuck with organizing them. Anybody has a good solution?

Answer 1

You can see my answer to a similar question. About names and files and general css organization.

http://stackoverflow.com/questions/1918891/managing-css-conflicts/1918914#1918914

Answer 2

Your 'all in one tub' approach suggests you might trample on each-other's CSS definitions. The ordering in which you include each CSS file may well dramatically affect your site.

There isn't an easy answer for you. You need to get the other team(s) to work in the same way, or perhaps work with them using a version control system where you all contribute CSS to one place.

Answer 3

You can use cssmerge to merge the files after removing duplicate rules and properties.

Answer 4

I'm really interested in hearing about how people group their CSS files and prevent naming conflicts.

But I also think you should consider how you package the CSS for a production release. It really depends on the framework you're using and your application code, but ideally you'll have some way to specify which pages depend on which files, and a build step that concatenates the CSS files for a page together and runs them through YUI Compressor, and outputs a unique filename including a checksum of the content or a date, so that the file can be cached indefinitely. (And then of course you'd put the CSS file at the top of the document)

Answer 5

Google Page Speed can tell you which CSS rules in a page are currently unused, if you think you're including too much CSS.

Answer 6

These are some tips for merging and organizing CSS manually

1. Separate code into sections like Link Styles,Common Classes ,Layout or Structure Styles ,Header ,Navigation ,Content ,Footer
2. Indent descendants and related rules This allows you more easily recognize page structure within your CSS and how elements relate to each other. This method can also be applied for a specific tag such as a heading tag.
3. Compress your Code to one line Instead of having each attribute on its own line, have them all on the same line. This reduces the file size of your CSS file and also makes it easy to scan when trying to find a specific tag.
4. Alphabetize attributes This just seems to make my CSS easier to read when I’m scanning it or looking for something.
5. Use shorthand wherever possible This makes your CSS easier to read and understand and is much more efficient.
6. Reset your CSS There are a ton of methods for resetting your CSS
7. Use separate CSS stylesheets for different elements Have a main style sheet that you import others into. You could have a stylesheet just for typography, another for layout, and another for colors. By keeping these elements organized within their own style sheets this can make it easier to manage your code.
8. Declare colors used at the top of your CSS files Within CSS comments at the top of your file code the colors you are using in your file and the color they represent.

Answer 7

I really like styleneat.com. Only if it wasn't a web app.