Your CSS is a Mess

D430439bd291dae3d8a43a413ee4ca82?s=47 snookca
September 18, 2012

Your CSS is a Mess

Looking at 3 simple ways to keep your CSS more organized (and more modular)

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

September 18, 2012
Tweet

Transcript

  1. None
  2. Jonathan Snoovvk The V’s are silent

  3. YOUR CSS IS A MESS

  4. None
  5. None
  6. 1 person.

  7. None
  8. 4 designers.

  9. 5 developers.

  10. 1 team.

  11. 1 project.

  12. None
  13. 30 designers.

  14. 5 prototypers.

  15. 200 engineers.

  16. multiple teams.

  17. multiple projects.

  18. CSS is easy.

  19. None
  20. None
  21. li { }

  22. oat: left padding: 3px 50px; margin: 0;

  23. .block { display:block !important; } .inline { display:inline !important; }

    .hide { display:none !important; } .s-none { margin:0 !important; } .s { margin:10px !important; } .ss { margin:20px !important; } .sr { margin-right:10px !important; } .p-none { padding:0 !important; } .p { padding:10px !important; } .pp { padding:20px !important; } .pt { padding-top:10px !important; } .w-auto { width:auto !important; }
  24. .layout_1_2 #blogList .pageitem .statusBar {} .layout_1_2 #blogList .pageitem .statusBar .status,

    #blogList .pageitem .statusBar .status .status1 { } .layout_1_2 #blogList .pageitem .statusBar .status { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 a { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}
  25. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a

    {}
  26. #nav-header ul li { float: left; } #nav-content ul li

    { float: left; }
  27. 3 Considerations

  28. 3 Categorization Naming Convention Decouple HTML/CSS

  29. 1 Categorization

  30. Categorization • Base • Layout • Module • State •

    Theme
  31. Base

  32. html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px;

    } body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }
  33. Layout

  34. None
  35. Sidebar Content Header

  36. None
  37. None
  38. None
  39. Module

  40. Customized List Button Tabs

  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. Sub-modules

  49. Large Search Dark Small

  50. None
  51. None
  52. State

  53. Active State Default State Disabled State Default State

  54. Theme

  55. None
  56. None
  57. None
  58. 2 Naming Convention

  59. Naming Convention Naming convention clari es intent

  60. Use Class over ID Don’t use a grenade to dig

    a hole when a shovel will do.
  61. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}

  62. .btn {} .is-btn-active {} .is-btn-disabled {}

  63. .theme-header {} .theme-border {} .theme-background {}

  64. .text-plus1 {} .text-minus1 {}

  65. 3 Decoupling CSS from HTML

  66. .nav { margin: 0; padding: 0; list-style: none; } .nav

    li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }
  67. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/contact">Contact Us</a></li> </ul>

  68. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a> <ul> <li><a href="/products/shoes">Shoes</a></li> <li><a

    href="/products/jackets">Jackets</a></li> </ul> </li> <li><a href="/contact">Contact Us</a></li> </ul>
  69. .nav ul { margin: 0; padding:0; list-style:none; } .nav li

    li { float: none; } .nav li li a { padding: 2px; background-color: red; }
  70. .nav { margin: 0; padding: 0; list-style: none; } .nav

    > li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }
  71. .menu { margin: 0; padding: 0; list-style: none } .menu

    > li > a { display: block; padding: 2px; background-color: red; }
  72. Please. Use child selectors

  73. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

    </ul> </div>
  74. .box { border: 1px solid #333; } .box h2 {

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul { margin: 10px; }
  75. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

    </ul> </div> <div class="box"> <h2>About Us</h2> <p>The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div><img src="http://example.com/img.png" alt="..."></div> </div>
  76. .box { border: 1px solid #333; } .box h2 {

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul, .box p, .box div { margin: 10px; }
  77. .box { border: 1px solid #333; } .box h2 {

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }
  78. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a

    href="http://smacss.com/">SMACSS</a></li> </ul> </div> <div class="box"> <h2>About Us</h2> <p class="box-body">The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div class="box-body"><img src="..." alt="..."></div> </div>
  79. when the HTML can’t or won’t be predictable Apply a

    class
  80. What does it mean?

  81. Shift your thinking

  82. Don’t code CSS for the page. Code it for the

    system.
  83. Have your CSS... Do one thing and one thing only

  84. State-based Design

  85. State-based Design • A layout or module style • Sub-modules

    • JavaScript-driven states • Pseudo-class states • Media query states
  86. CSS Panic http://snk.ms/15

  87. .enemys { z-index:3; position:absolute; top:0px; left:0; width:49px; height:93px; display:block; -webkit-appearance:

    button; -moz-appearance: button; background-position:0px 0px; background-repeat:no-repeat; -webkit-animation-iteration-count:infinite cursor:pointer; opacity:0.9; border:none;
  88. .enemys { z-index:3; position:absolute; top:0px; left:0; width:49px; height:93px; display:block; -webkit-appearance:

    button; -moz-appearance: button; background-position:0px 0px; background-repeat:no-repeat; -webkit-animation-iteration-count:infinite cursor:pointer; opacity:0.9; border:none;
  89. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }

  90. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }

  91. 3 Categorization Naming Convention Decouple HTML/CSS

  92. GET SMACKED http://smacss.com/