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

Your CSS is a Mess from SmartWeb

D430439bd291dae3d8a43a413ee4ca82?s=47 snookca
September 24, 2013

Your CSS is a Mess from SmartWeb

As presented at SmartWeb Conference in Bucharest, Romania

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

September 24, 2013
Tweet

Transcript

  1. YOUR CSS IS A MESS

  2. None
  3. None
  4. 1 person.

  5. None
  6. 4 designers.

  7. 5 developers.

  8. 1 team.

  9. 1 project.

  10. None
  11. 30 designers.

  12. 5 prototypers.

  13. 200 engineers.

  14. multiple teams.

  15. multiple projects.

  16. CSS is easy.

  17. None
  18. None
  19. li { }

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

  21. .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; }
  22. None
  23. .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 {}
  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. #nav-header ul li { float: left; ... } #nav-content ul

    li { float: left; ... }
  26. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a

    {}
  27. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a

    {}
  28. None
  29. None
  30. None
  31. Scalable and Modular Architecture for CSS

  32. SMACSS

  33. 3 Considerations

  34. 3 Categorization Naming Convention Decouple HTML/CSS

  35. 1 Categorization

  36. Categorization • Base • Layout • Module • State •

    Theme
  37. Base

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

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

  40. None
  41. Sidebar Content Header

  42. None
  43. None
  44. Module

  45. Customized List Button Tabs

  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. Sub-modules

  54. Large Search Dark Small

  55. None
  56. None
  57. None
  58. Sub-components

  59. None
  60. None
  61. State

  62. Active State Default State Disabled State Default State

  63. Theme

  64. None
  65. None
  66. None
  67. Have your CSS (and HTML)... Do one thing and one

    thing only
  68. http://snk.ms/1r The Single Responsibility Theory

  69. <div class="grid"> <div class="col module">...</div> </div>

  70. .grid {} .col { float:left; } .col:nth-child(2n) { clear:left; }

    .module { display:inline-block; }
  71. <div class="grid"> <div class="col"> <div class="module">...</div> </div> </div>

  72. <ul class="grid"> <li class="module">...</li> </ul>

  73. .grid {} .grid > li { float:left; } .grid >

    li:nth-child(2n) { clear:left; } .module { display:inline-block; }
  74. <ul class="grid"> <li> <div class="module">...</div> </li> </ul>

  75. <ul class="grid"> <li> {{item}} </li> </ul>

  76. <li class="module">...</li> <div class="module">...</div>

  77. Categorization is about Isolation

  78. 2 Naming Convention

  79. Naming Convention Naming convention clari es intent

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

    a hole when a shovel will do.
  81. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo-

    elements) style="..." #article .article :hover [attr=val] a : rst-child
  82. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo-

    elements) style="..." #article .article :hover [attr=val] a : rst-child
  83. a { color: #039; } .subdued { color: #666; }

    #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
  84. None
  85. a { color: #039; } .subdued { color: #666 !important;

    } #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
  86. Specificity Buster! !important

  87. Specificity Buster! !important

  88. a { color: #039; } .subdued, #cancel.subdued { color: #666;

    } #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
  89. a { color: #039; } .subdued { color: #666; }

    .cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel" class="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
  90. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}

    .modal {} .modal-large .modal-header {} .modal-body {} .modal-footer {}
  91. None
  92. .btn {} .is-btn-active {} .is-btn-disabled {}

  93. .modulename .modulename-submodule .modulename-subcomponent No hyphens Always a root node No

    hyphens No difference from submodule
  94. .module-name .module-name--submodule .module-name__subcomponent allows for hyphens Always a root node

    Alternatives underscores hyphens
  95. .moduleName .moduleName-subModule .moduleName--subComponent camelCase Alternatives double hyphen single hyphen

  96. Naming Convention • Pick a system that works for you

    and your team • Be consistent • Consider: • Root node • Sub-modules • Sub-components
  97. 3 Decoupling CSS from HTML

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

    li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }
  99. <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>

  100. <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>
  101. .nav ul { margin: 0; padding:0; list-style:none; } .nav li

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

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

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

  105. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://www.smartwebconf.com/">SmartWeb</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

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

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul { margin: 10px; }
  107. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://www.smartwebconf.com/">SmartWeb</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>
  108. .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; }
  109. .box { border: 1px solid #333; } .box h2 {

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }
  110. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://www.smartwebconf.com/">SmartWeb</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>
  111. when the HTML can’t or won’t be predictable Apply a

    class
  112. Or make the html predictable

  113. <div class="box"> <h2>Sites I Like</h2> <div class="box-body"> <ul> <li><a href="http://www.smartwebconf.com/">SmartWeb</a></li>

    <li><a href="http://smacss.com/">SMACSS</a></li> </ul> </div> </div> <div class="box"> <h2>About Us</h2> <div class="box-body"> <p>The Fancy Pants Company is all about fancy pants.</p> </div> </div> <div class="box"> <h2>Sponsored By</h2> <div class="box-body"><img src="..." alt="..."></div> </div>
  114. What does it mean?

  115. Shift your thinking

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

    system.
  117. State-based Design

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

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

  120. .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;
  121. .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;
  122. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }

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

  124. 3 Categorization Naming Convention Decouple HTML/CSS

  125. http://smacss.com/ Thanks!