I recently had the interesting experience of working in a team of 4 front-end developers, building components for one of our websites.
We started off all writing to the same CSS file, and with 4 people updating and committing the same file every 30 minutes, we were getting endless conflicts! This very quickly became a pain in the sass (haha – developer joke there…) and so we came up with the following solution:
Each developer created their own CSS file, and added all of the styles they created to that. Then at the end of each chunk of work, the lead developer would merge the files into the master file. This worked much better and we were immediately more productive!
This in itself wasn’t problem free – apart from the usual issue of everyone developing in their own slightly different way (long class selectors, different naming conventions for classes etc), we also had a fair bit of duplication of styles. However, it was much better than the previous way of working, and I would recommend this approach to any team in a similar situation.
To ensure this worked as well as we could expect, we did agree up front on some ground rules, and development principles, which I think would work well for any front-end team working together:
- wherever possible, re-use styles that already exist in the base/common CSS files (font sizes, margins, paddings etc.)
- use the same naming convention for class names
- if you’re working on a bit of the page that is similar to a bit someone else is working on, discuss how you’re going to do it to avoid too much duplication of effort
- do regular commits so your code and styles are available for the other guys to work with if they need
- Put plenty of comments in your CSS files to make them easily readable by the rest of the team
I’d be interested to hear if there’s any other tips you could give for working in this scenario – feel free to leave comments!