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

Your CSS is a Mess from ShropGeek's Revolution Conf

D430439bd291dae3d8a43a413ee4ca82?s=47 snookca
September 27, 2013

Your CSS is a Mess from ShropGeek's Revolution Conf

As presented at Revolution Conf in Shrewsbury, UK. "The Taming of the Shrewsbury." I'm still laughing at that joke.

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

September 27, 2013
Tweet

Transcript

  1. YOUR CSS IS A MESS

  2. THE TAMING OF THE SHREWsbury

  3. None
  4. CSS is easy.

  5. None
  6. None
  7. li { }

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

  9. .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; }
  10. None
  11. None
  12. 1 person.

  13. None
  14. 4 designers.

  15. 5 developers.

  16. 1 team.

  17. None
  18. 30 designers.

  19. 5 prototypers.

  20. 200 engineers.

  21. multiple teams.

  22. multiple projects.

  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. Scalable and Modular Architecture for CSS

  31. SMACSS

  32. 2 Considerations

  33. 2 Categorization Naming Convention

  34. 1 Categorization

  35. Five Categories Base Layout Module State Theme

  36. Base

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

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

  39. None
  40. Sidebar Content Header

  41. None
  42. None
  43. Module

  44. Customized List Button Tabs

  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. Module Variations

  53. Large Search Dark Small

  54. None
  55. None
  56. None
  57. Module components

  58. None
  59. None
  60. State

  61. Active State Default State Disabled State Default State

  62. Theme

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

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

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

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

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

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

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

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

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

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

  76. Categorization is about Isolation

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

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

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

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

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

    > li > a { display: block; padding: 2px; background-color: red; }
  83. 2 Naming Convention

  84. Naming Convention Naming convention clari es intent

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

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

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

    elements) style="..." #article .article :hover [attr=val] a : rst-child
  88. 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>
  89. None
  90. 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>
  91. Specificity Buster! !important

  92. Specificity Buster! !important

  93. 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>
  94. 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>
  95. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}

    .modal {} .modal-large .modal-header {} .modal-body {} .modal-footer {}
  96. .btn.large?

  97. .btn.large .field.large .modal.large

  98. class=”btn large” class=”large btn” class=”btn default large”

  99. http://snk.ms/20

  100. .btn { padding:5px 10px; font-size: 1em; .large { padding: 10px

    20px; font-size: 2em; } }
  101. ... padding:5px 10px; font-size: 1em; .large { padding: 10px 20px;

    font-size: 2em; } ...
  102. .btn-large

  103. .btn { padding:5px 10px; font-size: 1em; } .btn-large { padding:

    10px 20px; font-size: 2em; }
  104. None
  105. .btn {} .is-btn-active {} .is-btn-disabled {}

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

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

    Alternatives underscores hyphens
  108. .ModuleName .ModuleName-subModule .ModuleName--subComponent camelCase Alternatives double hyphen single hyphen

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

    and your team • Be consistent • Consider: • Root node • Sub-modules • Sub-components
  110. What does it mean?

  111. Shift your thinking

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

    system.
  113. http://snk.ms/1x Atomic Design

  114. None
  115. http://snk.ms/1y Responsive Deliverables

  116. None
  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. 2 Categorization Naming Convention

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