Managing CSS conflicts

Question

So i am working with a few CSS developers and every now and then we run into layout issues which have been fixed previously because one of the css developer did something which conflicted with something else.

We are already using SVN .. each CSS guy has his own css file he works with. So my question is what steps should be taken to minimize:

1 : layout conflicts

2 : increasing re-usability of previously written styles.

3 : minimize wasted time trying to merge the styles together in the final css.

I would really appreciate any tips you guys have to offer.

Update: I am not one of the CSS developer, i just take care of the backend stuff.. so please keep in mind that i am a total newbie when it comes to CSS norms.

Answer 1

The best thing you can do is assign areas of responsibility - if you are all working in the same area of the site you are bound to have conflicting changes and will only create difficulties for yourselves because you will constantly be stepping on each other's toes.

Once you have established a common baseline for the styles of your site, divide the main areas of the site amongst you and only work in those areas. When changes need to be made to the baseline, make them out in the open and communicate with your teammates about this change so that no one is surprised.

I am not going to pretend that this is easy to do - working on something as a team is a challenge that the entire software development industry has yet to completely solve. Good luck!

Answer 2

1. Define a naming convention for your CSS files to prevent conflicts (prefix?)
2. Have an automated process that you can run before check-in (check-in tests) to see any potential conflicts
3. Discuss what you will add (code review?) and avoid the conflicts altogether

I dont know of any namespacing you can do to avoid CSS stylesheet name conflicts so, I suggest those. They are things that many large companies do already.

Answer 3

A good starting point is to disallow using general tags in specific css files. Each developer should only use classes and ids. All general tags should be included first on all pages, so that special tags may overwrite them later.

Changing the general tags should require more planning than changing each developer file.

With general tags I mean

div {
  /* affects all divs */
}

and each developer should only do

div.something {
  /* potentially overwrite defaults for div */
}

and the html file should be like

link href="general.css"
link href="dev1.css"
link href="dev2.css"

Answer 4

All others have good answers, but I'll add this: Strongly encourage the use of IDs in selectors. ID-ing important elements generally pays off in the long run because it allows for better testability and less conflicts.

CSS Example:

#myid selector { ... }
#myotherid selector { ... }

General styles really should go in a top-level or general stylesheet that everyone manages, if possible.