[thelist] style sheet organization

Matthias Willerich matthias at die-legendaeren.de
Thu Nov 2 02:34:10 CST 2006

Hi Joel,

> is there a recommended order in style sheets for selectors and/or
> properties? 
I'm doing pretty much the same that Julian suggested, keeping things in a
visual order by tabbing in rules that apply on lower levels. When it comes
to ordering properties, I've found that you can find pretty good guidelines
when looking at one of the layout frameworks around, like
One True Layout
Or A CSS Framework
where CSS is both structured into different stages of development, based on
re-usage. For example, when I start a new layout, I'm first looking at what
would be the closest match from the suggested layouts, then I fix the column
width and make sure all my elements on the page are present where I need
them, and then I already start with the typo stylesheet, setting overall
typography rules. After that, I move over to the layout file, where the main
work takes place.
What I like about working with the css framework is that the properties
order is, aside from one or two glitches, completety consistant. As an
div#branding {
  float: left;
  width: 50%;
  margin: 2px 0px 0px 0px;	
  padding: 13px 0 13px 0px;
  color: #000066;
  font-size: 1.485em;
  text-align: left;
  background: url("../images/bg_branding.jpg") left bottom no-repeat

So that would be
- positioning
- display (not in the example)
- height/width
- margin/padding/border
- font and text
- background

If there's more that I'm missing, you might be able to extract it out of the
linked article, or make up a logic of your own. You'll find that whatever it
is, once you stick to it, everything is going a little bit smoother, and
your code is easier to read as well.


More information about the thelist mailing list