Messy css
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 1 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n


  • 1. If you manage big CSS, probably youwill 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! :-)