Your CSS is a Mess from Rustbelt Refresh

Transcript

1. YOUR CSS IS A MESS

2. None
3. None
4. None

5. 1 person.

6. None

7. 4 designers.

8. 5 developers.

9. 1 team.

10. 1 project.

11. None

12. 30 designers.

13. None

14. 200 engineers.

15. 5 prototypers.

16. multiple teams.

17. multiple projects.

18. CSS is easy.

19. None
20. None

21. li { }

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

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; }
24. None

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 {}

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 {}

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

    {}

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

    {}

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

    li { float: left; ... }

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

33. Scalable and Modular Architecture for CSS

34. SMACSS

35. 3 Considerations

36. 3 Categorization Naming Convention Decouple HTML/CSS

37. 1 Categorization

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

    Theme

39. Base

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; }

41. Layout

42. None

43. Sidebar Content Header Footer

44. None

45. Sidebar Content Header

46. None
47. None

48. Module

49. Customized List Button Tabs

50. None
51. None
52. None
53. None
54. None
55. None
56. None

57. Sub-modules

58. Large Search Dark Small

59. None
60. None

61. Sub-components

62. None
63. None

64. State

65. Active State Default State Disabled State Default State

66. Theme

67. None
68. None
69. None

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

    thing only

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

72. <div class="grid"> <div class="col module">...</div> </div>

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

    .module { display:inline-block; }

74. <div class="grid"> <div class="col"> <div class="module">...</div> </div> </div>

75. <ul class="grid"> <li class="module">...</li> </ul>

76. .grid {} .grid > li { float:left; } .grid >

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

77. <ul class="grid"> <li> <div class="module">...</div> </li> </ul>

78. <ul class="grid"> <li> {{item}} </li> </ul>

79. <li class="module">...</li> <div class="module">...</div>

80. Categorization is about Isolation

81. 2 Naming Convention

82. None

83. Naming Convention Naming convention clari es intent

84. Use Class over ID Don’t use a grenade to dig

    a hole when a shovel will do.

85. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo-

    elements) style="..." #article .article :hover [attr=val] a : rst-child

86. Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo-

    elements) style="..." #article .article :hover [attr=val] a : rst-child

87. a { color: #039; } .subdued { color: #666; }

    #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
88. None

89. a { color: #039; } .subdued { color: #666 !important;

    } #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>

90. Specificity Buster! !important

91. Specificity Buster! !important

92. a { color: #039; } .subdued, #cancel.subdued { color: #666;

    } #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>

93. a { color: #039; } .subdued { color: #666; }

    .cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel" class="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>

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

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

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

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

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

    hyphens No difference from submodule

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

    Alternatives underscores hyphens

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

101. Naming Convention • Pick a system that works for you

     and your team • Be consistent • Consider: • Root node • Sub-modules • Sub-components

102. 3 Decoupling CSS from HTML

103. .nav { margin: 0; padding: 0; list-style: none; } .nav

     li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }

104. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/contact">Contact Us</a></li> </ul>

105. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a> <ul> <li><a href="/products/shoes">Shoes</a></li> <li><a

     href="/products/jackets">Jackets</a></li> </ul> </li> <li><a href="/contact">Contact Us</a></li> </ul>

106. .nav ul { margin: 0; padding:0; list-style:none; } .nav li

     li { float: none; } .nav li li a { padding: 2px; background-color: red; }

107. .nav { margin: 0; padding: 0; list-style: none; } .nav

     > li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }

108. .menu { margin: 0; padding: 0; list-style: none } .menu

     > li > a { display: block; padding: 2px; background-color: red; }

109. Please. Use child selectors

110. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

     </ul> </div>

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; }

112. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

     </ul> </div> <div class="box"> <h2>About Us</h2> <p>The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div><img src="http://example.com/img.png" alt="..."></div> </div>

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; }

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; }

115. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a

     href="http://smacss.com/">SMACSS</a></li> </ul> </div> <div class="box"> <h2>About Us</h2> <p class="box-body">The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div class="box-body"><img src="..." alt="..."></div> </div>

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

     class

117. What does it mean?

118. Shift your thinking

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

     system.

120. State-based Design

121. State-based Design • A layout or module style • Sub-modules

     • JavaScript-driven states • Pseudo-class states • Media query states

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

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;

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;

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

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

127. 3 Categorization Naming Convention Decouple HTML/CSS