Save 37% off PRO during our Black Friday Sale! »

CSS the right way?

CSS the right way?

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

4804f554e4517c893086e6abb1ef6559?s=128

Michael Lancaster

October 31, 2013
Tweet

Transcript

  1. CSS the right way?

  2. None
  3. Michael Lancaster @weblancaster @weblancaster Front End Developer

  4. What do you think when you hear the word catastrophe?

  5. None
  6. Code that does not have.. Scalability is a catastrophe Modularity

    Performance Maintainability Reusability Understanding Flexibility Predictability Consistency
  7. None
  8. None
  9. None
  10. None
  11. CSS bad practices

  12. #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.
  13. 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.
  14. #search .box .lbl .input-txt { width: 250px; } #content div

    h4 span a { font-size: 16px; } Long-descendants (nesting) Dude! You are doing it wrong.
  15. “Don’t style websites. Build Web Applications”

  16. The good practices Free tips!

  17. • 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
  18. None
  19. Bonus

  20. Three main CSS Methodologies

  21. SMACSS BEM OOCSS

  22. SMACSS (Scalable and Modular Architecture for CSS) • Base •

    Layout • Module • State • Theme
  23. Base

  24. body { font-size: 62.5%; background: #fff; color: #000; } a

    { color: #ababab; } a:hover { color: #3a3a3a; } h1, h2, h3 { text-transform: uppercase; }
  25. Layout

  26. #header, #container, #footer { width: 960px; margin: 0 auto; }

    #sidebar { width: 300px; float: left; } #content { width: 600px; float: right; }
  27. None
  28. None
  29. Module

  30. .module > h2 { font-size: 22px; color: #ccc; } .module

    > p { font-size: 12px; color: #333; } .module > strong { text-transform: uppercase; }
  31. None
  32. States

  33. .is-hidden { display: none; } .tab { background: #555; color:

    #fff; } /* overwrite default styling */ .is-tab-active { background: #fff; color: #555; }
  34. None
  35. None
  36. Themes

  37. /* module.css */ .module { background: #333; } .module >

    p { color: #fff; } /* theme-clean.css */ .module { background: #fff; } .module > p { color: #333; }
  38. BEM (Block Element Modifier) • Block • Element • Modifier

  39. None
  40. Block

  41. None
  42. None
  43. None
  44. Element

  45. None
  46. /* 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>
  47. Modifier

  48. None
  49. None
  50. /* 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>
  51. OOCSS (Object Oriented CSS) • Separate structure and skin •

    Separate Content and Container
  52. None
  53. Objective • Flexibility • Create a component library • Minimize

    Selectors • Extend objects applying classes • Use consistent styles • Build HTML and style from the component library
  54. .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
  55. .main-theme { background: #fbfbfb; box-shadow: 0px 2px 2px #AAA; border:

    1px solid #AAA; } .main-template { width: 960px; margin: 10px; } OOCSS!
  56. .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; }
  57. And what’s the best Methodology? SMACSS? BEM? OOCSS?

  58. The one that apply.. Scalability Modularity Performance Maintainability Reusability Understanding

    Flexibility Predictability Consistency to your team
  59. There’s no such thing as “the god master way”. But

    there’s definitely great practices.
  60. Thanks @weblancaster @weblancaster