After an good old Newsletter back and forth between me and an old friend, we spoke about element sorting for css3, considering html5. Back to basics, I guess. Here’s what we agreed upon. And I thought it would be nice to share that.
We start with everything that’s universal, then the document, followed by meta data, sectioning and structuring. Headings, lists and forms. Phrasing, tables, and misc. And finally media and attributes.
What we mean by this is that the way we sort elements in our .css document is from higher level sorting to purpose, from purpose to importance. From importance to specific. As follows:
Universal:
* {}
Document:
html {}
Meta:
head {}
title {}
link {}
style {}
script {}
etc
Sections:
body {}
header {}
footer {}
nav {}
main {}
article {}
aside {}
etc
Headings:
hgroup {}
h1 {}
h2 {}
etc
Lists:
ul {}
ol {}
li {}
etc
Form:
form {}
fieldset {}
label {}
input {}
button {}
select {}
etc
I think you start to get it by now.
Your document shouldn’t be sorted like this:
* { margin: 0 }
body { padding: 25px }
p { text-decoration: none }
html { font-face: Helvetica }
li { color: #555 }
ul { padding-left: 32px }
But as such:
* { margin: 0 }
html { font-face: Helvetica }
body { padding: 25px }
p { text-decoration: none }
ul { padding-left: 32px }
li { color: #555 }
And higher level sorting should not be like this:
.title { margin: 12px }
#li { color: #555 }
#li, p { text-decoration: none }
but as such
p, #li { text-decoration: none }
#li { color: #555 }
.title { margin: 12px }