How to manage css of big websites within team environment without mess?

Question

Where multiple people can work on same css. is it possible to follow semantic name rules even in large websites.

If I would write all main css first time with semantic names . then what and how i should guideline/instruction to other developer to maintain css readability, validation . and to know quickly where other are adding their own css if required.

Right now every one just go to down and write required css classes ot IDs at bottom. and most of the time they don't write semantic names.

How to make good documentation/guide with text or with images for other developers on how to use css in whole site and how i wrote and what i used.

Update:

We use only one CSS file. I don't want to divide one css in multiple. Want to keep css managable even using one CSS file for whole site.

Answer 1

I would break down your css logically into groups and put each of these groups into its own css file. For example: header, footer, sidebar, content groups. Maybe some pages even deserve their own css file if big enough.

Similarly, give ids and classes on pages names that make sense. If it is a css rule for sub headings on a navigation bar, make sure it comes off as that in naming. Similarly to any other coding, don't use any magic numbers, etc. for naming.

Answer 2

A similar question was asked a while ago: How to manage CSS Explosion there is a number of good answers there, and a number of great links (check out those provided by Paul D. Waite for example.)

Your main problem is going to be structuring the CSS file well. You will need clean rules for that: Keep everything grouped within the CSS file. Maybe using a CSS editor that can help you "navigate" through the style sheet is a good idea (similar to a programming IDE's "code explorer" feature). I don't know, however, if such a thing exists.

Other than that:

• Using version control is a MUST. I personally am totally happy with centralized versioning using Subversion and TortoiseSVN; others believe in distributed version control like git or hg. For a team of designers, I think the centralized approach of Subversion is good, but that is a discussion in itself.

• Maybe it's a good idea to split the style sheet into thematically relevant separate files to avoid chaos, and compile it using a tool like LESS or xCSS.

• Define a clear, concise coding style. Use a CSS beautifier like Polystyle ($14 per license but money well spent) or Code Beautifier (based on CSS Tidy, haven't used it but looks interesting) and run it frequently on the file.

• Have a number of links handy of pages that use the style sheet. Have people test those pages after they have made a change to the style sheet.

Answer 3

See Modularizing web applications, includes specially CSS