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

Your CSS is a Mess

snookca
September 18, 2012

Your CSS is a Mess

Looking at 3 simple ways to keep your CSS more organized (and more modular)

snookca

September 18, 2012
Tweet

More Decks by snookca

Other Decks in Programming

Transcript

  1. View Slide

  2. Jonathan
    Snoovvk
    The V’s are silent

    View Slide

  3. YOUR CSS
    IS A MESS

    View Slide

  4. View Slide

  5. View Slide

  6. 1 person.

    View Slide

  7. View Slide

  8. 4 designers.

    View Slide

  9. 5 developers.

    View Slide

  10. 1 team.

    View Slide

  11. 1 project.

    View Slide

  12. View Slide

  13. 30 designers.

    View Slide

  14. 5 prototypers.

    View Slide

  15. 200 engineers.

    View Slide

  16. multiple teams.

    View Slide

  17. multiple projects.

    View Slide

  18. CSS is easy.

    View Slide

  19. View Slide

  20. View Slide

  21. li { }

    View Slide

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

    View Slide

  23. .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; }

    View Slide

  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 {}

    View Slide

  25. #comments .comment .meta .authorname {}
    #comments .comment .meta .commentnumber a {}

    View Slide

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

    View Slide

  27. 3
    Considerations

    View Slide

  28. 3
    Categorization
    Naming Convention
    Decouple HTML/CSS

    View Slide

  29. 1
    Categorization

    View Slide

  30. Categorization
    • Base
    • Layout
    • Module
    • State
    • Theme

    View Slide

  31. Base

    View Slide

  32. html {
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    body {
    margin: 0;
    padding: 0;
    }
    h1, h2, h3 {
    margin: 1em 0;
    }

    View Slide

  33. Layout

    View Slide

  34. View Slide

  35. Sidebar Content
    Header

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. Module

    View Slide

  40. Customized List
    Button
    Tabs

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. Sub-modules

    View Slide

  49. Large
    Search
    Dark
    Small

    View Slide

  50. View Slide

  51. View Slide

  52. State

    View Slide

  53. Active State Default State
    Disabled State Default State

    View Slide

  54. Theme

    View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. 2
    Naming Convention

    View Slide

  59. Naming Convention
    Naming convention clari es intent

    View Slide

  60. Use Class over ID
    Don’t use a grenade to dig a hole
    when a shovel will do.

    View Slide

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

    View Slide

  62. .btn {}
    .is-btn-active {}
    .is-btn-disabled {}

    View Slide

  63. .theme-header {}
    .theme-border {}
    .theme-background {}

    View Slide

  64. .text-plus1 {}
    .text-minus1 {}

    View Slide

  65. 3
    Decoupling
    CSS from HTML

    View Slide

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

    View Slide


  67. Home
    Products
    Contact Us

    View Slide


  68. Home
    Products

    Shoes
    Jackets


    Contact Us

    View Slide

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

    View Slide

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

    View Slide

  71. .menu {
    margin: 0;
    padding: 0;
    list-style: none
    }
    .menu > li > a {
    display: block;
    padding: 2px;
    background-color: red;
    }

    View Slide

  72. Please.
    Use child selectors

    View Slide


  73. Sites I Like

    Smashing!
    SMACSS


    View Slide

  74. .box {
    border: 1px solid #333;
    }
    .box h2 {
    margin: 0;
    padding: 5px 10px;
    border-bottom: 1px solid #333;
    background-color: #CCC;
    }
    .box ul {
    margin: 10px;
    }

    View Slide


  75. Sites I Like

    Smashing!
    SMACSS



    About Us
    The Fancy Pants Company is all about fancy pants.


    Sponsored By


    View Slide

  76. .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;
    }

    View Slide

  77. .box {
    border: 1px solid #333;
    }
    .box h2 {
    margin: 0;
    padding: 5px 10px;
    border-bottom: 1px solid #333;
    background-color: #CCC;
    }
    .box-body {
    margin: 10px;
    }

    View Slide


  78. Sites I Like

    Smashing!
    SMACSS



    About Us
    The Fancy Pants Company is all about fancy
    pants.


    Sponsored By


    View Slide

  79. when the HTML can’t
    or won’t be predictable
    Apply a class

    View Slide

  80. What does it mean?

    View Slide

  81. Shift your thinking

    View Slide

  82. Don’t code CSS for the page.
    Code it for
    the system.

    View Slide

  83. Have your CSS...
    Do one thing
    and one thing only

    View Slide

  84. State-based Design

    View Slide

  85. State-based Design
    • A layout or module style
    • Sub-modules
    • JavaScript-driven states
    • Pseudo-class states
    • Media query states

    View Slide

  86. CSS Panic
    http://snk.ms/15

    View Slide

  87. .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;

    View Slide

  88. .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;

    View Slide

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

    View Slide

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

    View Slide

  91. 3
    Categorization
    Naming Convention
    Decouple HTML/CSS

    View Slide

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

    View Slide