Your CSS is a Mess

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

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