What is your method of working with a single CSS file in a large team and version control

Question

We work on the Magento platform and our front-end developers all work on the same CSS stylesheet. There are a lot of existing styles that come with this stylesheet. Most of the time I tell them to put any additional styles at the bottom to make it easier for merging and everything. This doesn't always work when you want put certain styles with selectors that are already existing in the stylesheet.

We seem to be having a lot of issues with developers not managing conflicts correctly and overriding other peoples code. Obviously its always best to try and work on files when you know others are done with it to lessen the chance of conflicts but obviously if there is more then one developer working on a site and there is only one CSS file this is going to run into a lot of conflicts.

I am looking for ways other people manage this and some ideas for how to best minimize the amount of conflicts these developers have.

Answer 1

1. Don't have a single CSS file. Have a bunch of small CSS files that are merged and minified into a single file for deployment but that logically separate styles during development.

   As @JosephMastey suggests below, I personally separate one file per differently-styled page of the site. Within stylesheets I tend to order selectors from more-general to more specific, and group selectors together (e.g. all table#foo ... selectors are contiguous).

2. Use a sane version-control system like Git that does not require you to check out or lock files, but instead allows simultaneous edits with intelligent merges.

   Edit: And at some point you have train and trust your developers. The only method that will ultimately help with developers who are repeatedly running over each others' work and merging their edits badly is teaching them not to do so.

Answer 2

Your chance of edit conflicts increases dramatically if everyone's editing the same part of the file (namely, the end).

I'd say let the CSS go where it goes naturally. If someone's editing one part and someone else is editing a whole other section, any decent revision control system will merge most of the changes automatically when someone updates, and there will be fewer conflicts.

Answer 3

I concur on the "Don't have a single CSS file" sentiment. Magento modules can each have their own stylesheet(s), and of course you already separate unrelated tasks into independent modules don't you? I would prefer it if Magento came with separate sheets for catalog, checkout, customer, etc. but sadly it does not, you'll have to do that yourself and maybe prepare a blank theme with them.

It doesn't make sense to break it up according to developers. Devs come and go and are assigned different tasks.

Magento also includes CSS & JS merging so you don't need to worry about having many sheets. There is Fooman Speedster and mod_pagespeed as well.

Answer 4

In my experience, a single developer should be working on the project until it matures enough to allow for outside help. That single developer should set guidelines and standard styles to be used throughout the application, so that people need not add a new style for each element. Try and have the initial developer review all new stylesheet changes as they're added to the repository initially, so that developers that are new to the project are made aware of utility classes, or conventions, that exist.

It would also help if you had some kind of stock system theme that you always start with -- that way people know the score at the start of each project and have no excuse to mess up your organised CSS :)

As @cHao points out, when a whole bunch of developers get involved make sure they never add directly to the end of the file. That's the single biggest cause of conflicts that we experience and can be easily avoided.