CSS中属性排序

╰半橙微兮° 2022-08-20 06:10 158阅读 0赞

From: http://markdotto.com/2011/11/29/css-property-order/

# CSS property order #

November 29, 2011

[Tweet][]

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:

*  `position`
 *  `display` and box model
 *  `font`, leading, `color`, text
 *  `background` and `border`
 *  CSS3 properties like `border-radius` and `box-shadow`
 *  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.

## Show me! ##

Getting more specific, here are some blocks of CSS might look with this property order in mind.

Here you can see positioning, box model (`height` and `padding`), and visual (`background-color`, `border-bottom` and `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 `min-height` and `padding` (as that adds to the overall width of an element). For the visual elements,`background-color` and `border` come first because those inform you how this element starts to look (e.g., a gray box witha border). `border-radius` and `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.

[Tweet]: https://twitter.com/share