Getting Your CSS Under Control

It seems so easy but soon enough, you're throwing !important at every problem or creating complicated rules to beat the cascade into submission. In this session, we'll review the typical pain points in site development and explore a modular approach that can make projects easier to develop and manage.

Transcript

1. Getting
   your CSS
   under
   control
   

   View Slide

2. View Slide

3. Observing that the
   maximum number of people
   who can productively
   simultaneously work on
   CSS is one.
   

   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. 5 prototypers.
    

    View Slide

14. 200 engineers.
    

    View Slide

15. multiple teams.
    

    View Slide

16. multiple projects.
    

    View Slide

17. CSS is easy.
    

    View Slide

18. View Slide

19. View Slide

20. li { }
    

    View Slide

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

    View Slide

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

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. #comments .comment .meta .authorname {}
    #comments .comment .meta .commentnumber a {}
    

    View Slide

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

    View Slide

26. 4
    Considerations
    

    View Slide

27. 4
    Categorization
    Naming Convention
    Decouple HTML/CSS
    Increase Semantics
    

    View Slide

28. 1
    Categorization
    

    View Slide

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

    View Slide

30. Base
    

    View Slide

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

32. Layout
    

    View Slide

33. View Slide

34. Sidebar Content
    Header
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. Module
    

    View Slide

39. Customized List
    Button
    Tabs
    

    View Slide

40. .tab {}
    .listview {}
    .btn {}
    

    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. .btn {}
    .btn-large {}
    .btn-small {}
    .btn-default {}
    .btn-search {}
    

    View Slide

51. State
    

    View Slide

52. Active State Default State
    

    View Slide

53. .tab {}
    .is-tab-active {}
    

    View Slide

54. Theme
    

    View Slide

55. View Slide

56. View Slide

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

    View Slide

58. View Slide

59. .text-plus1 {}
    .text-minus1 {}
    

    View Slide

60. 2
    Naming Convention
    

    View Slide

61. Naming Convention
    Naming convention clari es intent
    

    View Slide

62. Use Class over ID
    Speci city is dangerous
    

    View Slide

63. .grid {}
    .tab {}
    .is-tab-active {}
    .listview {}
    .is-hidden {}
    .btn {}
    .btn-large {}
    .btn-small {}
    .theme-border {}
    .theme-background {}
    .text-plus1 {}
    .text-minus1 {}
    

    View Slide

64. 3
    Decoupling
    CSS from HTML
    

    View Slide

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

66. 
    Home
    Products
    Contact Us
    
    

    View Slide

67. 
    Home
    Products
    
    Shoes
    Jackets
    
    
    Contact Us
    
    

    View Slide

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

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

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

    View Slide

71. 4
    Increasing
    Semantics
    

    View Slide

72. 
    Sites I Like
    
    Open Web Camp
    SMACSS
    
    
    

    View Slide

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

74. 
    Sites I Like
    
    ConvergeSE
    SMACSS
    
    
    
    About Us
    The Fancy Pants Company is all about fancy pants.
    
    
    Sponsored By
    
    
    

    View Slide

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

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

77. 
    Sites I Like
    
    ConvergeSE
    SMACSS
    
    
    
    About Us
    The Fancy Pants Company is all about fancy
    pants.
    
    
    Sponsored By
    
    
    

    View Slide

78. What does it mean?
    

    View Slide

79. Shift your thinking
    

    View Slide

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

    View Slide

81. Have your CSS...
    Do one thing
    and one thing only
    

    View Slide

82. State-based Design
    

    View Slide

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

    View Slide

84. CSS Panic
    

    View Slide

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

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

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

    View Slide

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

    View Slide

89. Forms
    

    View Slide

90. Who did you enjoy speaking today?
    !
    
    
    

    View Slide

91. Who did you enjoy speaking today?
    !
    
    
    

    View Slide

92. Who did you enjoy speaking today?
    !
    
    
    

    View Slide

93. .other-input {
    display:none;
    }
    .other:checked ~ .other-input {
    display:block;
    }
    

    View Slide

94. .other-input {
    display:none;
    }
    .other:checked ~ .other-input {
    display:block;
    }
    Default State
    

    View Slide

95. .other-input {
    display:none;
    }
    .other:checked ~ .other-input {
    display:block;
    }
    Checked State
    

    View Slide

96. 4
    Categorization
    Naming Convention
    Decouple HTML/CSS
    Increase Semantics
    

    View Slide

97. GET SMACKED
    http://smacss.com/
    

    View Slide