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

Your CSS is a Mess from SmartWeb

snookca
September 24, 2013

Your CSS is a Mess from SmartWeb

As presented at SmartWeb Conference in Bucharest, Romania

snookca

September 24, 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. 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. 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. View Slide

  58. Sub-components

    View Slide

  59. View Slide

  60. View Slide

  61. State

    View Slide

  62. Active State Default State
    Disabled State Default State

    View Slide

  63. Theme

    View Slide

  64. View Slide

  65. View Slide

  66. View Slide

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

    View Slide

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

    View Slide


  69. ...

    View Slide

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

    View Slide



  71. ...


    View Slide


  72. ...

    View Slide

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

    View Slide



  74. ...


    View Slide



  75. {{item}}


    View Slide

  76. ...
    ...

    View Slide

  77. Categorization is
    about Isolation

    View Slide

  78. 2
    Naming Convention

    View Slide

  79. Naming Convention
    Naming convention clari es intent

    View Slide

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

    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. Specificity
    Inline ID Class
    (pseudo-classes
    and attribute
    selectors)
    Element
    (pseudo-
    elements)
    style="..." #article
    .article
    :hover
    [attr=val]
    a
    : rst-child

    View Slide

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

    View Slide

  84. View Slide

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

    View Slide

  86. Specificity Buster!
    !important

    View Slide

  87. Specificity Buster!
    !important

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  91. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  97. 3
    Decoupling
    CSS from HTML

    View Slide

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


  99. Home
    Products
    Contact Us

    View Slide


  100. Home
    Products

    Shoes
    Jackets


    Contact Us

    View Slide

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

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

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

    View Slide

  104. Please.
    Use child selectors

    View Slide


  105. Sites I Like

    SmartWeb
    SMACSS


    View Slide

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


  107. Sites I Like

    SmartWeb
    SMACSS



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


    Sponsored By


    View Slide

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

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


  110. Sites I Like

    SmartWeb
    SMACSS



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


    Sponsored By


    View Slide

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

    View Slide

  112. Or make the html
    predictable

    View Slide


  113. Sites I Like


    SmartWeb
    SMACSS




    About Us

    The Fancy Pants Company is all about fancy pants.



    Sponsored By


    View Slide

  114. What does it mean?

    View Slide

  115. Shift your thinking

    View Slide

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

    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. 3
    Categorization
    Naming Convention
    Decouple HTML/CSS

    View Slide

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

    View Slide