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

Your CSS is a Mess from ShropGeek's Revolution ...

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.

snookca

September 27, 2013
Tweet

More Decks by snookca

Other Decks in Programming

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

    } body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }
  5. .grid {} .grid > li { float:left; } .grid >

    li:nth-child(2n) { clear:left; } .module { display:inline-block; }
  6. .nav { margin: 0; padding: 0; list-style: none; } .nav

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

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

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

    > li > a { display: block; padding: 2px; background-color: red; }
  11. Use Class over ID Don’t use a grenade to dig

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

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

    elements) style="..." #article .article :hover [attr=val] a : rst-child
  14. 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>
  15. 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>
  16. 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>
  17. 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>
  18. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}

    .modal {} .modal-large .modal-header {} .modal-body {} .modal-footer {}
  19. Naming Convention • Pick a system that works for you

    and your team • Be consistent • Consider: • Root node • Sub-modules • Sub-components
  20. State-based Design • A layout or module style • Sub-modules

    • JavaScript-driven states • Pseudo-class states • Media query states
  21. .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;
  22. .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;