$30 off During Our Annual Pro Sale. View Details »

Your CSS is a Mess from Webvisions

Your CSS is a Mess from Webvisions

As presented at Webvisions Portland 2013 on May 24.

snookca

May 24, 2013
Tweet

More Decks by snookca

Other Decks in Technology

Transcript

  1. YOUR CSS
    IS A MESS

    View Slide

  2. View Slide

  3. View Slide

  4. 1 person.

    View Slide

  5. View Slide

  6. 4 designers.

    View Slide

  7. 5 developers.

    View Slide

  8. 1 team.

    View Slide

  9. 1 project.

    View Slide

  10. View Slide

  11. 30 designers.

    View Slide

  12. 5 prototypers.

    View Slide

  13. 200 engineers.

    View Slide

  14. multiple teams.

    View Slide

  15. multiple projects.

    View Slide

  16. CSS is easy.

    View Slide

  17. View Slide

  18. View Slide

  19. li { }

    View Slide

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

    View Slide

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

  22. 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. /* ======== 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

  29. View Slide

  30. View Slide

  31. Scalable and
    Modular
    Architecture
    for CSS

    View Slide

  32. SMACSS

    View Slide

  33. 3
    Considerations

    View Slide

  34. 3
    Categorization
    Naming Convention
    Decouple HTML/CSS

    View Slide

  35. 1
    Categorization

    View Slide

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

    View Slide

  37. Base

    View Slide

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

  39. Layout

    View Slide

  40. View Slide

  41. Sidebar Content
    Header

    View Slide

  42. View Slide

  43. View Slide

  44. Module

    View Slide

  45. Customized List
    Button
    Tabs

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. Sub-modules

    View Slide

  54. Large
    Search
    Dark
    Small

    View Slide

  55. View Slide

  56. View Slide

  57. Sub-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. 2
    Naming Convention

    View Slide

  78. Naming Convention
    Naming convention clari es intent

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  83. View Slide

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

    View Slide

  85. Specificity Buster!
    !important

    View Slide

  86. Specificity Buster!
    !important

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  90. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  96. 3
    Decoupling
    CSS from HTML

    View Slide

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


  98. Home
    Products
    Contact Us

    View Slide


  99. Home
    Products

    Shoes
    Jackets


    Contact Us

    View Slide

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

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

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

    View Slide

  103. Please.
    Use child selectors

    View Slide


  104. Sites I Like

    Webvisions
    SMACSS


    View Slide

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


  106. Sites I Like

    Webvisions
    SMACSS



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


    Sponsored By


    View Slide

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

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


  109. Sites I Like

    Webvisions
    SMACSS



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


    Sponsored By


    View Slide

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

    View Slide

  111. Or make the html
    predictable

    View Slide


  112. Sites I Like


    Webvisions
    SMACSS




    About Us

    The Fancy Pants Company is all about fancy pants.



    Sponsored By


    View Slide

  113. What does it mean?

    View Slide

  114. Shift your thinking

    View Slide

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

    View Slide

  116. State-based Design

    View Slide

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

    View Slide

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

    View Slide

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

  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:checked{
    overflow:hidden;
    -webkit-animation-name: none;
    -webkit-pointer-events: none;
    pointer-events: none;
    opacity:0;
    }

    View Slide

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

    View Slide

  123. 3
    Categorization
    Naming Convention
    Decouple HTML/CSS

    View Slide

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

    View Slide