Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS the right way?

CSS the right way?

Overview of CSS for modern Web Applications. CSS architecture methodologies and best practices.

Michael Lancaster

October 31, 2013
Tweet

More Decks by Michael Lancaster

Other Decks in Programming

Transcript

  1. Code that does not have.. Scalability is a catastrophe Modularity

    Performance Maintainability Reusability Understanding Flexibility Predictability Consistency
  2. #header { width: 960px; } #aside { width: 260px; float:

    left; } #content { width: 680px; float: right; } #content #article { width: 100%; padding: 20px; } #content #article #title { font-size: 12px; } #footer{ width: 960px; } Specificity Dude! You are doing it wrong.
  3. div#header { width: 960px; } ul#aside { width: 260px; float:

    left; } ul#aside li.items p.title { text-align: center; font-size: 12px; } div#content div h4 span { font-size: 16px; } Over-qualify Dude! You are doing it wrong.
  4. #search .box .lbl .input-txt { width: 250px; } #content div

    h4 span a { font-size: 16px; } Long-descendants (nesting) Dude! You are doing it wrong.
  5. • Use classes they are your best friends • Avoid

    ID’s • Avoid Tag-qualification • Avoid long-descendants (nesting) • Use CSS pre-processors (applying the tips above) • Find patterns on the design and build style guide documentation • Performance matters • Browsers “match” CSS from right to left • Use name convention. CamelCase, camelBack, snake_case. Whatever
  6. body { font-size: 62.5%; background: #fff; color: #000; } a

    { color: #ababab; } a:hover { color: #3a3a3a; } h1, h2, h3 { text-transform: uppercase; }
  7. #header, #container, #footer { width: 960px; margin: 0 auto; }

    #sidebar { width: 300px; float: left; } #content { width: 600px; float: right; }
  8. .module > h2 { font-size: 22px; color: #ccc; } .module

    > p { font-size: 12px; color: #333; } .module > strong { text-transform: uppercase; }
  9. .is-hidden { display: none; } .tab { background: #555; color:

    #fff; } /* overwrite default styling */ .is-tab-active { background: #fff; color: #555; }
  10. /* module.css */ .module { background: #333; } .module >

    p { color: #fff; } /* theme-clean.css */ .module { background: #fff; } .module > p { color: #333; }
  11. /* code example */ <header class="grid-10"> <h1 class="logo">Logo</h1> <ul class="nav">

    <li class="nav__item">...</li> <li class="nav__item">...</li> </ul> </header>
  12. /* code example modifier */ <header class="grid-10"> <h1 class="logo">Logo</h1> <ul

    class="nav nav_theme_clean"> <li class="nav__item nav__item_active">...</li> <li class="nav__item">...</li> </ul> </header>
  13. Objective • Flexibility • Create a component library • Minimize

    Selectors • Extend objects applying classes • Use consistent styles • Build HTML and style from the component library
  14. .header { background: #fbfbfb; width: 960px; box-shadow: 0px 2px 2px

    #AAA; border: 1px solid #AAA; margin: 10px; } .content { background: #fbfbfb; width: 960px; box-shadow: 0px 2px 2px #AAA; border: 1px solid #AAA; margin: 10px; } .footer { background: #fbfbfb; width: 960px; box-shadow: 0px 2px 2px #AAA; border: 1px solid #AAA; margin: 10px; } not OOCSS
  15. .main-theme { background: #fbfbfb; box-shadow: 0px 2px 2px #AAA; border:

    1px solid #AAA; } .main-template { width: 960px; margin: 10px; } OOCSS!
  16. .bt { border: 1px solid rgba(0, 0, 0, 0.25); color:

    #444; margin: 0px 5px; height: 29px; width: 65px; padding: 8px 13px; background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); text-shadow: 0 1px 0 rgb(240, 240, 240); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); font-size: 12px; } .bt.bt-dark { -webkit-linear-gradient(#693B3B, #B8B2B2 38%, #dedede); } .bt.bt-big { height: 45px; width: 100px; font-size: 16px; }
  17. There’s no such thing as “the god master way”. But

    there’s definitely great practices.