How ZURB Does CSS by Mark
August 26, 2008 in Implementation, ZURB with 7 Comments
This morning, we watching as a few fellow nerds debated CSS coding styles on Twitter. Much like the whole tabs versus spaces debate that rears its ugly head when just about every designer and developer meet, CSS coding styles are often just as touchy of a subject.
Above, two of the big voices (Anton Peck and Jonathan Snook) in the CSS argument show just how nerdy such arguments can get. An argument like this might look pretty stupid or useless to most, but it's good that we can have them. It shows that everyone cares as much as we do about the craft as much as they do the outcome.
ZURB went through the same argument and ended up reaching a solution: one team, one style, one line. We try not to join the battle again and again, but we would like to explain a bit more behind what we decided and why.
That New Team Smell
Just like a new car smell, you want that new aura surrounding your team to last as long as possible. It's important that teams understand each others' work and styles. In our case, we wanted to have the same style, moving as one fluid, world-dominating force. Working in teams gives you a much different outlook than freelancing—you have to code for yourself and others.
The problem most people are quick to point out with any kind of coding style is readability, but let's all be honest here: a quick Ctrl+F or Cmd+F will do the trick anytime. We did realize, however, that scanning code was a key argument for the style we'd choose. We needed to be able to see larger blocks of code at one time to effectively use our CSS.
Experience Told UsHaving worked on several projects that require us to keep very large and often complex stylesheets, we ended up siding with a single-line approach. Be able to quickly see how a group of selectors work together is more important to us than a group of variable attributes. We still strive for consistency in those attributes, but our focus is on the bigger picture: simplicity and consistency within a team.
Consider the CSS snapshot below:
Although it's just part of our base styles we include in every project, it's a prime example of how we all work here at ZURB. Without scrolling, we know exactly how all of the typography on our project will render and interact with each other. In particular, take note of the h1-h6 section: see how easy it is to compare those and understand their interaction with one another?
No matter what your style is, make sure it aids you in your workflow. In our case, a team's workflow is more important and we all have learned to work with one style of coding. It helps us when one designer has to jump to an on-going project and has to pick up where someone else left off. Transitions are relatively seamless this way and it makes the team all the stronger.
7 Comments
Ryan says:
Here's a few reasons on why we've chosen to group our CSS declarations onto one line.
larson says:
This is a great writeup! I need to get my CSS reigned in and this is a great start. Even being an designer/developed army of one I find that moving between my own projects can sometimes feel like dealing with two completely different teams. Thanks for this article!
Mark says:
Thanks, Larson. Appreciate the comment!
When moving with yourself from project to project, you need to make sure you're maintaining efficiency and not doubling back on yourself.
And you're very welcome!
Steven Hambleton says:
Wow, people who care about CSS legibility as much as us!
In fact, we have recently switched to a single line approach. What we do is tab the first curly brace so all parameters start in line.
We also keep all parameters in alphabetical order.
Mark says:
Steve:
That's how we roll, Steve. Thanks for chiming in!
I like your approach: it keeps things clean and structured, and seems like it helps your team's workflow. The one downside I'd point out to that, though we face it here as well, is that indenting your declarations so far means you need a really wide screen!
Was this something you guys stumbled into or worked out over time?
Wayde Christie says:
Hi guys,
We also use the one line approach, and like Steve we alphabetize.
We don't bother with tabbing or spacing however, as the CSS syntax colour highlighting in TextMate makes it really easy to skim.
Here's our approach:
h1, h2{font-size:16px; line-height:18px;}
So essentially there are very few spaces (only enough to aid legibility), and everything's super compact.
Great article :)
Mark says:
Wayde:
Glad you enjoyed the article! We too strive to keep things nice and clean, and are still working on doing so. After our redesign a few months ago, we're still iterating and focusing our efforts on stability and consistency.
It's great to hear others are doing the same. I'd advocate for more spaces/tabs in your styles, however. We've found that even with syntax highlighting, it's sometimes difficult to easily grasp the structure of our CSS rules unless properly space.
To each his, own, huh?
Add your comment...