For the majority of the time I’ve been developing websites I’ve done it alone, not having to worry about other people understanding my code or thinking about what happens when I’m not longer around to look after it.
In the last 3 years I have worked in larger and larger teams and I’ve found the following guidelines quite useful for making the change from solo developer to a member of a team.
Some General Rules to keep in mind
- Working in a team, you have to surrender some of your personal preferences when writing your CSS (eg comments style, how you format the document, and how you build the directory structure).
- Expectaion should be that by looking at the web page, you can predict the CSS code before you look at the source file, and that you can quickly scan the CSS file to find what element is being styled.
- The basis of good CSS needs to be in consistently written HTML, if HTML is inconsistent you will end up writing CSS to compencate. More code means more difficulty in maintenance.
- Be consistent with the CSS file, don’t mix formatting styles or selector styles. If you lose consistency it will make the developer have to stop and think each time consistency is broken. This will slow you down.
- If you are going to be maintaining the CSS after site launch: Out of the selector and the style defined, the selector is more important to you. The formatting of your document should reflect this.
Bear in mind that these rules can’t always work for you, but try to follow them if you can.
Stock standard CSS
Use reset, and a common way to measure fonts. Establish the font measurements and stick to them.
What CSS to put on what area of the page
Layout
Layout should only deal with the grid layout for the page, therefore you shouldn’t need anything more that widths, floats, position… maybe some padding or margins.
Site Furniture, Modules and page specific content
These are similar in concept. This makes up the majority of your page, you should avoid setting explicit widths on modules, allowing the layout to take care of how wide modules and furniture should be.
Formatting code and consistent selectors
These two areas need to be consistent, once they are you will be able to quickly scan your CSS document to find which rules are applying to which elements
Formatting code
- One line, alphabetical order of properties (I know alphabetical is anal)
- Don’t indent your code, the approach to using the selectors will automatically take care of that.
Selectors
- Try to keep general style rules for tags to a minimum.
- Begin all your selectors from the same place, and begin them from either the layout, furniture, module or page specific root. eg (.module .heading .h3 {} .group .item .)
- Be as descriptive as you can be with you selector
- Only make a general rule if you are confident it’s not going to cause problems with other elements
Dealing with Hacks
Don’t use hacks inline with the stylesheet, seperate them out and put them in a seperate style sheet.
