CSS property order
November 29, 2011
CSS property order matters, especially on larger teams with several engineers and designers all contributing code. I know it’s been discussed, but frankly there’s always room for improvement and alternate approaches. In a few projects at Twitter, we added the constraint of consistent CSS property order to make onboarding new folks easier, debugging faster, and expectations of what exactly a block of CSS does that much clearer (without viewing it in the browser).
High level overview
At a high level, here’s our breakdown:
displayand box model
- CSS3 properties like
- and a handful of other purely visual properties
We hadn’t really seen an approach like this in any other projects we’ve worked on. It mixes the common structural and alphabetical approaches into one in an effort to ensure our property order is logical, scannable, and all-encompassing. We wanted an order that mapped to how we mentally visualized DOM elements and—to an extent—how Webkit’s Inspector presents properties.
Getting more specific, here are some blocks of CSS might look with this property order in mind.
Here you can see positioning, box model (
padding), and visual (
box-shadow) in their proper order. This flows in such a way that you can discern that this is a fixed dark gray bar with a drop shadow–you know exactly what it is you’re dealing with as you read line-by-line.
In this example, we have only box model and visual. Notice that for box model, we have dimensions first with
padding (as that adds to the overall width of an element). For the visual elements,
border come first because those inform you how this element starts to look (e.g., a gray box witha border).
box-shadow follow that because those are additional visual treatments that add to the base look and feel.
Use what works for your team
This approach seems to work well for us and our teams without adding too much overhead. All you need to do is create a series of rules and stick to them with your team and this because a very successful tactic for organizing and maintaining CSS. No one solution is teh best, so keep that in mind and adjust as you go.