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

Your CSS is a Mess from ShropGeek's Revolution Conf

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. YOUR CSS
    IS A MESS

    View Slide

  2. THE
    TAMING
    OF THE
    SHREWsbury

    View Slide

  3. View Slide

  4. CSS is easy.

    View Slide

  5. View Slide

  6. View Slide

  7. li { }

    View Slide

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

    View Slide

  9. .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

  10. View Slide

  11. View Slide

  12. 1 person.

    View Slide

  13. View Slide

  14. 4 designers.

    View Slide

  15. 5 developers.

    View Slide

  16. 1 team.

    View Slide

  17. View Slide

  18. 30 designers.

    View Slide

  19. 5 prototypers.

    View Slide

  20. 200 engineers.

    View Slide

  21. multiple teams.

    View Slide

  22. multiple projects.

    View Slide

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

    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. #nav-header ul li {
    float: left;
    ...
    }
    #nav-content ul li {
    float: left;
    ...
    }

    View Slide

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

    View Slide

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

    View Slide

  28. View Slide

  29. View Slide

  30. Scalable and
    Modular
    Architecture
    for CSS

    View Slide

  31. SMACSS

    View Slide

  32. 2
    Considerations

    View Slide

  33. 2
    Categorization
    Naming Convention

    View Slide

  34. 1
    Categorization

    View Slide

  35. Five Categories
    Base
    Layout
    Module
    State
    Theme

    View Slide

  36. Base

    View Slide

  37. 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

  38. Layout

    View Slide

  39. View Slide

  40. Sidebar Content
    Header

    View Slide

  41. View Slide

  42. View Slide

  43. Module

    View Slide

  44. Customized List
    Button
    Tabs

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. Module
    Variations

    View Slide

  53. Large
    Search
    Dark
    Small

    View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. Module
    components

    View Slide

  58. View Slide

  59. View Slide

  60. State

    View Slide

  61. Active State Default State
    Disabled State Default State

    View Slide

  62. Theme

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. Have your CSS (and HTML)...
    Do one thing
    and one thing only

    View Slide

  67. http://snk.ms/1r
    The Single
    Responsibility
    Theory

    View Slide


  68. ...

    View Slide

  69. .grid {}
    .col { float:left; }
    .col:nth-child(2n) { clear:left; }
    .module { display:inline-block; }

    View Slide



  70. ...


    View Slide


  71. ...

    View Slide

  72. .grid {}
    .grid > li { float:left; }
    .grid > li:nth-child(2n) { clear:left; }
    .module { display:inline-block; }

    View Slide



  73. ...


    View Slide



  74. {{item}}


    View Slide

  75. ...
    ...

    View Slide

  76. Categorization is
    about Isolation

    View Slide

  77. .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


  78. Home
    Products
    Contact Us

    View Slide


  79. Home
    Products

    Shoes
    Jackets


    Contact Us

    View Slide

  80. .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

  81. .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

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

    View Slide

  83. 2
    Naming Convention

    View Slide

  84. Naming Convention
    Naming convention clari es intent

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. a { color: #039; }
    .subdued { color: #666; }
    #cancel { color: #900; }
    Link
    Link
    Link
    class="subdued">Link

    View Slide

  89. View Slide

  90. a { color: #039; }
    .subdued { color: #666 !important; }
    #cancel { color: #900; }
    Link
    Link
    Link
    class="subdued">Link

    View Slide

  91. Specificity Buster!
    !important

    View Slide

  92. Specificity Buster!
    !important

    View Slide

  93. a { color: #039; }
    .subdued,
    #cancel.subdued { color: #666; }
    #cancel { color: #900; }
    Link
    Link
    Link
    class="subdued">Link

    View Slide

  94. a { color: #039; }
    .subdued { color: #666; }
    .cancel { color: #900; }
    Link
    Link
    class="cancel">Link
    class="subdued">Link

    View Slide

  95. .btn {}
    .btn-large {}
    .btn-small {}
    .btn-default {}
    .btn-search {}
    .modal {}
    .modal-large
    .modal-header {}
    .modal-body {}
    .modal-footer {}

    View Slide

  96. .btn.large?

    View Slide

  97. .btn.large
    .field.large
    .modal.large

    View Slide

  98. class=”btn large”
    class=”large btn”
    class=”btn default large”

    View Slide

  99. http://snk.ms/20

    View Slide

  100. .btn {
    padding:5px 10px;
    font-size: 1em;
    .large {
    padding: 10px 20px;
    font-size: 2em;
    }
    }

    View Slide

  101. ...
    padding:5px 10px;
    font-size: 1em;
    .large {
    padding: 10px 20px;
    font-size: 2em;
    }
    ...

    View Slide

  102. .btn-large

    View Slide

  103. .btn {
    padding:5px 10px;
    font-size: 1em;
    }
    .btn-large {
    padding: 10px 20px;
    font-size: 2em;
    }

    View Slide

  104. View Slide

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

    View Slide

  106. .modulename
    .modulename-submodule
    .modulename-subcomponent
    No hyphens
    Always a root node
    No hyphens
    No difference from submodule

    View Slide

  107. .module-name
    .module-name--submodule
    .module-name__subcomponent
    allows for hyphens
    Always a root node
    Alternatives
    underscores
    hyphens

    View Slide

  108. .ModuleName
    .ModuleName-subModule
    .ModuleName--subComponent
    camelCase
    Alternatives
    double hyphen
    single hyphen

    View Slide

  109. Naming
    Convention
    • Pick a system that works for you and
    your team
    • Be consistent
    • Consider:
    • Root node
    • Sub-modules
    • Sub-components

    View Slide

  110. What does it mean?

    View Slide

  111. Shift your thinking

    View Slide

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

    View Slide

  113. http://snk.ms/1x
    Atomic Design

    View Slide

  114. View Slide

  115. http://snk.ms/1y
    Responsive
    Deliverables

    View Slide

  116. View Slide

  117. State-based Design

    View Slide

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

    View Slide

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

    View Slide

  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;

    View Slide

  121. .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

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

    View Slide

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

    View Slide

  124. 2
    Categorization
    Naming Convention

    View Slide

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

    View Slide