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

Getting Your CSS Under Control

snookca
July 14, 2012

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.

snookca

July 14, 2012
Tweet

More Decks by snookca

Other Decks in Technology

Transcript

  1. .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; }
  2. .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 {}
  3. html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px;

    } body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }
  4. .grid {} .tab {} .is-tab-active {} .listview {} .is-hidden {}

    .btn {} .btn-large {} .btn-small {} .theme-border {} .theme-background {} .text-plus1 {} .text-minus1 {}
  5. .nav { margin: 0; padding: 0; list-style: none; } .nav

    li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }
  6. <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>
  7. .nav ul { margin: 0; padding:0; list-style:none; } .nav li

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

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

    > li > a { display: block; padding: 2px; background-color: red; }
  10. .box { border: 1px solid #333; } .box h2 {

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul { margin: 10px; }
  11. <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>
  12. .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; }
  13. .box { border: 1px solid #333; } .box h2 {

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }
  14. <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>
  15. State-based Design • A layout or module style • Sub-modules

    • JavaScript-driven states • Pseudo-class states • Media query states
  16. .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;
  17. .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;
  18. <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>
  19. <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>
  20. <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>