Your CSS is a Mess from Webvisions

Your CSS is a Mess from Webvisions

As presented at Webvisions Portland 2013 on May 24.

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

May 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. /* ======== SECTION: STYLE VARIABLES ======== */ $icon_sprite:url('icon-sprite.png') no-repeat; $black_header_height:40px;

    $content_header_height:66px; $container_width:994px; $sidebar_width:158px; $page_width: $container_width - $sidebar_width - 20px; $outer_page_width: $container_width - $sidebar_width; /* ======== END SECTION: STYLE VARIABLES ======== */ /* ======== SECTION: 4.0. SCSS MIXINS ======== */ /* 4.2. Transitions */ @mixin transition($properties:all,$timing:0.3s,$transition:ease-in-out,$delay:0.0s) { -o- transition: $properties $timing $transition $delay; -webkit-transition: $properties $timi $transition $delay; -moz-transition: $properties $timing $transition $delay; } /* 4.3. Box Shadows */ @mixin box-shadow($s1) { -webkit-box-shadow:$s1; -moz-box-shadow:$s1; box-shadow:$s1; } @mixin double-box-shadow($s1,$s2:0 0 0 rgba(0,0,0,0)) { -webkit-box-shadow:$s1,$s2; -moz- shadow:$s1,$s2; box-shadow:$s1,$s2; } /* 4.4. Rounded Corners */ @mixin rounded($px:3px) { -webkit-border-radius:$px; -moz-border-radius:$px; border-radiu $px; } /* 4.5. Border Radius */ @mixin border-radius($tr,$tl,$br,$bl) { -moz-border-radius:$tr $tl $br $bl; -webkit-borde radius:$tr $tl $br $bl; border-radius:$tr $tl $br $bl; } /* 4.6. Gradients */ @mixin gradient($color1, $color2) { background-color:$color1; background-image:-o-linear- gradient($color2, $color1); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, $color1),color-stop(1, $color2)); background-image: -moz-linear-
  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. Sub-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. 2 Naming Convention

  78. Naming Convention Naming convention clari es intent

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

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

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

    elements) style="..." #article .article :hover [attr=val] a : rst-child
  82. 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>
  83. None
  84. 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>
  85. Specificity Buster! !important

  86. Specificity Buster! !important

  87. 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>
  88. 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>
  89. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}

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

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

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

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

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

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

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

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

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

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

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

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

  104. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://webvisionsevent.com/">Webvisions</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

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

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

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

    class
  111. Or make the html predictable

  112. <div class="box"> <h2>Sites I Like</h2> <div class="box-body"> <ul> <li><a href="http://webvisionsevent.com/">Webvisions</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>
  113. What does it mean?

  114. Shift your thinking

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

    system.
  116. State-based Design

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

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

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

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

  123. 3 Categorization Naming Convention Decouple HTML/CSS

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