Developing maintainable CSS in a team environment

Mike Stenhouse suggests some guidelines to make team CSS coding and maintenance easier in Playing Nice with the Other CSS Kids, an article on collaborative development with CSS.

This post is very timely for me since I have just started working on a large project that involves handing off HTML and CSS to the client’s developers. I’ll look into applying some of the ideas that Mike describes in this article. I’m also leaning towards using the concept of Modular CSS (also by Mike Stenhouse) to some extent.

Phew. Keeping large and complex CSS files organised, tidy, and maintainable without ending up with a combined 50 KB monster will be a challenge.

Posted on October 31, 2005 in CSS, Quicklinks

Comments

  1. I personally find modular CSS to be much easier to manage. I generally use a style sheet for layout, one for content, one for forms, one for tables, and finally, a print style sheet. It helps me stay organized and quickly track down specific styles over the course of development.

  2. I’ve found that having styles that apply to all media types are best stored in say global.css while all the media types and variants are names like screen-normal.css or screen-small.css.

    PS. It occurs to me that Markdown is stupid and more confusing than HTML. I mean, I wanted to use an underscore in the names above, but for some freaking reason it translated them to em elements…

    Point is, these pseudo-markup languages make about as much sense as ripping you’re own eyes out, and the latter might hurt less.

  3. Read and comment about my hate of Markdown and other like fiends.

    I’m just glad it didn’t try and emphasize random parts of my URL…

  4. Yeah, and I tried to use a less-than symbol, and suddenly HTML just ignored half my writing! What the hell?

    Every language has its reserved characters. Markdown isn’t stupid because it uses underscores for emphasis.

  5. Sure, but then you just use HTML Tidy and problem solved… if you’re to lazy to help the user, then only accept plain text.

  6. November 1, 2005 by Kristin Vågberg

    Either if you choose modulare CSS or not,I just want to give you a tip.

    Last spring I made over 200 html-pages for a security product. The css was huge. And I think that the easieast way for maintenance is to make an documentation in html where you actually shows the design as well and organise it in tables, forms etc.

    Every time I´m coming back to make updates, I go in to my documentation and there I see what kind of tables, forms, text etc formatting I have done. After a few months and beeing involved in other projects, there is no chance to remember all 200 pages and layoutvariants..

    If I change some css code i can see directly how it will affect all kind of designs and also if I need to make new css code. It´s also a good tool for the programmers if they need to make new pages - they can copy the code from there.

  7. November 1, 2005 by Roger Johansson (Author comment)

    I use Markdown to keep comments valid. It’s better than not allowing any markup at all, isn’t it?

  8. Maintaining files in general… that’s what CVS is for. However when it came to style sheets, we’ve developed a rule around here at Y!, only one developer owns the style sheet. They can share it as they please, but when I own the document, nobody else touches it and it becomes mine for life. My general recommendation is “Why are multiple developers messing with the same style sheet”??? And don’t tell me that: “Well Dustin you’ve never worked in such a large corporate environment where you were required to share files.” Try me. At Yahoo! we laid it down. It simply doesn’t make sense for other developers to be mucking around with the same CSS document. It creates more bugs than you’d believe and ironically becomes ‘more difficult to manage’. Our file for Y! custom checkout reached 30K (crunched) which definitely qualifies it as a large scale CSS document.

    …just my thoughts.

  9. November 2, 2005 by Roger Johansson (Author comment)

    Dustin: Yeah, I’d say 30 KB crunched most definitely qualifies as a large scale CSS file! I think my record is just over 20 KB, and that includes whitespace and comments. Care to share any good tips on how you organise a CSS file that huge?

  10. Roger, as a matter of fact, I will. Expect an entry coming soon on my blog called “Ever spent 5 months working on the same CSS file?”

    Your comments will most definitely be welcome and be heard with ears to listen.

    Long story short, 75% near the end of the project, we nuked the original Style Sheet, rewrote the templates, laid down some ground rules, and started a fresh Style Sheet. I’ll leave the details out of for sake of brevity on this comments list.

  11. November 4, 2005 by Maniquí

    I just want to comment that I usually take a look at the stylesheet of 456 Berea Street when I want to organize my stylesheets. For me, your stylesheet organization is one of the most clearest I have seen. I also check your stylesheet to learn more about CSS. I have read that you like to avoid CSS hacks, and I like to avoid hacks too (but the true is that I use some hacks, specially for clearing floats).

    Well, I want to stay on topic, so I will only add that the idea of a stylesheet maintained by more than one person really scares me. ;) I’m usually fighting with my stylesheet, so if I’m involved in the development of an stylesheet with another person, I surely will commit a murder.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.