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

Your CSS is a Mess from Rustbelt Refresh

Your CSS is a Mess from Rustbelt Refresh

As presented at Rustbelt Refresh 2013 in Cleveland, OH.

snookca

May 03, 2013
Tweet

More Decks by snookca

Other Decks in Programming

Transcript

  1. YOUR CSS
    IS A MESS

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. 1 person.

    View Slide

  6. View Slide

  7. 4 designers.

    View Slide

  8. 5 developers.

    View Slide

  9. 1 team.

    View Slide

  10. 1 project.

    View Slide

  11. View Slide

  12. 30 designers.

    View Slide

  13. View Slide

  14. 200 engineers.

    View Slide

  15. 5 prototypers.

    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. View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

  30. /* ======== SECTION: STYLE VARIABLES ======== */
    $icon_sprite:url('icon-sprite.png') no-repeat;
    $black_header_height:40px;
    $content_header_height:66px;
    $container_width:994px;
    $sidebar_width:158px;
    $page_width: $container_width - $sidebar_width - 20px;
    $outer_page_width: $container_width - $sidebar_width;
    /* ======== END SECTION: STYLE VARIABLES ======== */
    /* ======== SECTION: 4.0. SCSS MIXINS ======== */
    /* 4.2. Transitions */
    @mixin transition($properties:all,$timing:0.3s,$transition:ease-in-out,$delay:0.0s) { -o-
    transition: $properties $timing $transition $delay; -webkit-transition: $properties $timi
    $transition $delay; -moz-transition: $properties $timing $transition $delay; }
    /* 4.3. Box Shadows */
    @mixin box-shadow($s1) { -webkit-box-shadow:$s1; -moz-box-shadow:$s1; box-shadow:$s1; }
    @mixin double-box-shadow($s1,$s2:0 0 0 rgba(0,0,0,0)) { -webkit-box-shadow:$s1,$s2; -moz-
    shadow:$s1,$s2; box-shadow:$s1,$s2; }
    /* 4.4. Rounded Corners */
    @mixin rounded($px:3px) { -webkit-border-radius:$px; -moz-border-radius:$px; border-radiu
    $px; }
    /* 4.5. Border Radius */
    @mixin border-radius($tr,$tl,$br,$bl) { -moz-border-radius:$tr $tl $br $bl; -webkit-borde
    radius:$tr $tl $br $bl; border-radius:$tr $tl $br $bl; }
    /* 4.6. Gradients */
    @mixin gradient($color1, $color2) { background-color:$color1; background-image:-o-linear-
    gradient($color2, $color1); background-image: -webkit-gradient(linear,left bottom,left
    top,color-stop(0, $color1),color-stop(1, $color2)); background-image: -moz-linear-

    View Slide

  31. View Slide

  32. View Slide

  33. Scalable and
    Modular
    Architecture
    for CSS

    View Slide

  34. SMACSS

    View Slide

  35. 3
    Considerations

    View Slide

  36. 3
    Categorization
    Naming Convention
    Decouple HTML/CSS

    View Slide

  37. 1
    Categorization

    View Slide

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

    View Slide

  39. Base

    View Slide

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

  41. Layout

    View Slide

  42. View Slide

  43. Sidebar
    Content
    Header
    Footer

    View Slide

  44. View Slide

  45. Sidebar Content
    Header

    View Slide

  46. View Slide

  47. View Slide

  48. Module

    View Slide

  49. Customized List
    Button
    Tabs

    View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. Sub-modules

    View Slide

  58. Large
    Search
    Dark
    Small

    View Slide

  59. View Slide

  60. View Slide

  61. Sub-components

    View Slide

  62. View Slide

  63. View Slide

  64. State

    View Slide

  65. Active State Default State
    Disabled State Default State

    View Slide

  66. Theme

    View Slide

  67. View Slide

  68. View Slide

  69. View Slide

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

    View Slide

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

    View Slide


  72. ...

    View Slide

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

    View Slide



  74. ...


    View Slide


  75. ...

    View Slide

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

    View Slide



  77. ...


    View Slide



  78. {{item}}


    View Slide

  79. ...
    ...

    View Slide

  80. Categorization is
    about Isolation

    View Slide

  81. 2
    Naming Convention

    View Slide

  82. View Slide

  83. Naming Convention
    Naming convention clari es intent

    View Slide

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

    View Slide

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

    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. a { color: #039; }
    .subdued { color: #666; }
    #cancel { color: #900; }
    Link
    Link
    Link
    class="subdued">Link

    View Slide

  88. View Slide

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

    View Slide

  90. Specificity Buster!
    !important

    View Slide

  91. Specificity Buster!
    !important

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  97. .text-plus1 {}
    .text-minus1 {}

    View Slide

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

    View Slide

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

    View Slide

  100. .moduleName
    .moduleName-subModule
    .moduleName--subComponent
    camelCase
    Alternatives
    double hyphen
    single hyphen

    View Slide

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

    View Slide

  102. 3
    Decoupling
    CSS from HTML

    View Slide

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


  104. Home
    Products
    Contact Us

    View Slide


  105. Home
    Products

    Shoes
    Jackets


    Contact Us

    View Slide

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

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

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

    View Slide

  109. Please.
    Use child selectors

    View Slide


  110. Sites I Like

    Smashing!
    SMACSS


    View Slide

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


  112. Sites I Like

    Smashing!
    SMACSS



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


    Sponsored By


    View Slide

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

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


  115. Sites I Like

    Smashing!
    SMACSS



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


    Sponsored By


    View Slide

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

    View Slide

  117. What does it mean?

    View Slide

  118. Shift your thinking

    View Slide

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

    View Slide

  120. State-based Design

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

  127. 3
    Categorization
    Naming Convention
    Decouple HTML/CSS

    View Slide