The document proposes a classification and ordering system for CSS properties to help keep CSS organized and avoid conflicts between developers. It divides CSS properties into 5 categories: 1) Classification and positioning, 2) Dimensions, 3) Box, 4) Text, and 5) End. Within each category, it provides examples of properties and recommends an order. The system is presented as a guide that could be helpful for teams with multiple CSS developers to avoid discussions and wasted time searching through disorganized CSS files.

1. If you manage big CSS, probably you
will know hundreds of frameworks to
help developing new projects...

2. • Grids: Blueprint, YUI Grids, Compass, Scaffold,...
• Stylesheet meta-languages: SASS, LESS,...
• Object-Oriented: OOCSS

3. But...

4. Is anybody worried about
the order of CSS?
At least i do...

5. div.messy {
• CSS can be written as you want, it should work, but font-color: blue;
overflow: hidden;
have you thought in your teammates?
display: none;
• You could avoid some discussions with other Css height: auto;
position: absolute;
developers.
font-size: 15px;
text-decoration: none;
• People who don’t play with CSS everyday can help you box-shadow: 0 1px black;
without add more complexity to the file. -webkit-border-radius: 5px;
width:100px;
• Waste time searching properties in a reaaaally large font-style: normal;
CSS class. letter-spacing: -1px;
background: url(‘../lol.png’);
• If in your team there are more than 2 developers, margin-top: 20px;
I think this is a must. padding-bottom: 10px;
...
}

6. So, this is my proposal...
It likely shouldn’t fit for you

7. Classification & positioning 1/5
• First should be the classification and positioning of
div.less_messy {
the “box”.
clear: left;
• Importance queue?, it could be: display: block;
position: absolute;
- clear top: 4px;
- display right: 3px;
- position bottom: 5px;
- top || right || bottom || left left: 2px;
- z-index z-index: 10;
- float float: none;
- overflow overflow: auto;
- vertical-align
... ...
}
• As we know, some properties depend on previous ones.

8. Dimension 2/5
• Now is time to declare the object dimensions.
div.less_messy {
• The list is: ...
- width (min|max) width: 150px;
- height (min|max) height: 20px;
- padding padding: 10px 5px 3px;
- margin margin: 3px;
...
• It’s true that margin property should be in positioning }
chapter, but I’ve always thought it has to be written with
height, width and padding (mania?).

9. Box 3/5
• Is box a pretty good title name? I’m not really sure, but we
are going to style it ;).
div.less_messy {
• SOME of these properties would be: ...
- background background: red;
- box-shadow box-shadow: 0 1px black;
- border border: none;
- zoom translate: rotate(45deg);
- translate border-radius: 3px;
- border-radius ...
- border-image
... }
• There is no importance of order...

10. Text 4/5
• And almost last, but no less important.
div.less_messy {
• Just a few of them:
...
- font font: normal 11px Arial;
- color
color: rgba(0,0,0,0.7);
- text-decoration
text-decoration: none;
- letter-spacing
line-height: 11px;
- text-transform
- line-height text-transform: uppercase;
- text-align ...
- word-spacing
...
}
• A great idea is put color after font, why?
I don’t know, who cares?

11. div.less_messy {
End 5/5 clear: left;
display: block;
position: absolute;
• There are some (... several) of properties do not top: 4px;
right: 3px;
specified here, like list, table,... don’t worry, just bottom: 5px;
order yourself to keep clean your CSS. left: 2px;
z-index: 10;
float: none;
• This is an example of CSS order guide. overflow: auto;
width: 150px;
height: 20px;
• Let’s make it clear together. padding: 10px 5px 3px;
margin: 3px;
background: red;
box-shadow: 0 1px black;
border: none;
translate: rotate(45deg);
border-radius: 3px;
font: normal 11px Arial;
color: rgba(0,0,0,0.7);
text-decoration: none;
• Some advices? why not, go next slide. line-height: 11px;
text-transform: uppercase;
}

12. Advices! 1/2
• Try to avoid using long style of the property, e.g. border, margin, etc.
border-color: red;
border-style: solid;
border-width: 1px;
border: 1px solid red;
• But if you want to change just a single property with a new class (e.g.), it’s
time to use minified property...
border: 1px solid blue;
border-color: blue;

13. Advices! 2/2
• There are some specific CSS3 properties for each browser, write all followed:
translate: rotate(45deg);
-moz-translate: rotate(45deg);
-ms-translate: rotate(45deg)
...
• Do the same with the “hacks” for IE (in case you use them of course...):
border: 1px solid blue;
border: 1px solid white8;
border: 1px solid white9;

14. Remember once more!
This is not a guide to improve the world, use just
in case you find it useful...

15. Thanks! :-)
xavijam.github.com