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

Getting Your CSS Under Control

Getting Your CSS Under Control

It seems so easy but soon enough, you're throwing !important at every problem or creating complicated rules to beat the cascade into submission. In this session, we'll review the typical pain points in site development and explore a modular approach that can make projects easier to develop and manage.

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

July 14, 2012
Tweet

Transcript

  1. Getting your CSS under control

  2. None
  3. Observing that the maximum number of people who can productively

    simultaneously work on CSS is one.
  4. None
  5. 1 person.

  6. None
  7. 4 designers.

  8. 5 developers.

  9. 1 team.

  10. 1 project.

  11. None
  12. 30 designers.

  13. 5 prototypers.

  14. 200 engineers.

  15. multiple teams.

  16. multiple projects.

  17. CSS is easy.

  18. None
  19. None
  20. li { }

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

  22. .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; }
  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. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a

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

    { float: left; }
  26. 4 Considerations

  27. 4 Categorization Naming Convention Decouple HTML/CSS Increase Semantics

  28. 1 Categorization

  29. Categorization • Base • Layout • Module • State •

    Theme
  30. Base

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

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

  33. None
  34. Sidebar Content Header

  35. None
  36. None
  37. None
  38. Module

  39. Customized List Button Tabs

  40. .tab {} .listview {} .btn {}

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

  49. Large Search Dark Small

  50. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}

  51. State

  52. Active State Default State

  53. .tab {} .is-tab-active {}

  54. Theme

  55. None
  56. None
  57. .theme-header {} .theme-border {} .theme-background {}

  58. None
  59. .text-plus1 {} .text-minus1 {}

  60. 2 Naming Convention

  61. Naming Convention Naming convention clari es intent

  62. Use Class over ID Speci city is dangerous

  63. .grid {} .tab {} .is-tab-active {} .listview {} .is-hidden {}

    .btn {} .btn-large {} .btn-small {} .theme-border {} .theme-background {} .text-plus1 {} .text-minus1 {}
  64. 3 Decoupling CSS from HTML

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

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

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

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

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

    > li > a { display: block; padding: 2px; background-color: red; }
  71. 4 Increasing Semantics

  72. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://openwebcamp.org/">Open Web Camp</a></li>

    <li><a href="http://smacss.com/">SMACSS</a></li> </ul> </div>
  73. .box { border: 1px solid #333; } .box h2 {

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

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }
  77. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://convergese.com/">ConvergeSE</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>
  78. What does it mean?

  79. Shift your thinking

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

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

  82. State-based Design

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

    • JavaScript-driven states • Pseudo-class states • Media query states
  84. CSS Panic

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

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

  89. Forms

  90. <h3>Who did you enjoy speaking today?</h3> ! <input type="checkbox" id="a">

    <label for="a ! <input type="checkbox" id="b"> <label for="b ! <input type="checkbox" id="c"> <label for="c <input type="checkbox" class="other"> <label <div class="other-input"> <input type="text"> </div>
  91. <h3>Who did you enjoy speaking today?</h3> ! <input type="checkbox" id="a">

    <label for="a ! <input type="checkbox" id="b"> <label for="b ! <input type="checkbox" id="c"> <label for="c <input type="checkbox" class="other"> <label <div class="other-input"> <input type="text"> </div>
  92. <h3>Who did you enjoy speaking today?</h3> ! <input type="checkbox" id="a">

    <label for="a ! <input type="checkbox" id="b"> <label for="b ! <input type="checkbox" id="c"> <label for="c <input type="checkbox" class="other"> <label <div class="other-input"> <input type="text"> </div>
  93. .other-input { display:none; } .other:checked ~ .other-input { display:block; }

  94. .other-input { display:none; } .other:checked ~ .other-input { display:block; }

    Default State
  95. .other-input { display:none; } .other:checked ~ .other-input { display:block; }

    Checked State
  96. 4 Categorization Naming Convention Decouple HTML/CSS Increase Semantics

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