Your CSS is a Mess from Webvisions

Transcript

1. YOUR CSS IS A MESS

2. None
3. None

4. 1 person.

5. None

6. 4 designers.

7. 5 developers.

8. 1 team.

9. 1 project.

10. None

11. 30 designers.

12. 5 prototypers.

13. 200 engineers.

14. multiple teams.

15. multiple projects.

16. CSS is easy.

17. None
18. None

19. li { }

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

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

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

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

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

    li { float: left; ... }

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

    {}

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

    {}

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-
29. None
30. None

31. Scalable and Modular Architecture for CSS

32. SMACSS

33. 3 Considerations

34. 3 Categorization Naming Convention Decouple HTML/CSS

35. 1 Categorization

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

    Theme

37. Base

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

39. Layout

40. None

41. Sidebar Content Header

42. None
43. None

44. Module

45. Customized List Button Tabs

46. None
47. None
48. None
49. None
50. None
51. None
52. None

53. Sub-modules

54. Large Search Dark Small

55. None
56. None

57. Sub-components

58. None
59. None

60. State

61. Active State Default State Disabled State Default State

62. Theme

63. None
64. None
65. None

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

    thing only

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

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

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

    .module { display:inline-block; }

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

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

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

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

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

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

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

76. Categorization is about Isolation

77. 2 Naming Convention

78. Naming Convention Naming convention clari es intent

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

    a hole when a shovel will do.

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

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

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

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

82. 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>
83. None

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

85. Specificity Buster! !important

86. Specificity Buster! !important

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

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

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

    .modal {} .modal-large .modal-header {} .modal-body {} .modal-footer {}
90. None

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

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

    hyphens No difference from submodule

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

    Alternatives underscores hyphens

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

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

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

96. 3 Decoupling CSS from HTML

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

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

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

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

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

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

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

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

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

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

103. Please. Use child selectors

104. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://webvisionsevent.com/">Webvisions</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

     </ul> </div>

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

106. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://webvisionsevent.com/">Webvisions</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>

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

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

109. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://webvisionsevent.com/">Webvisions</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>

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

     class

111. Or make the html predictable

112. <div class="box"> <h2>Sites I Like</h2> <div class="box-body"> <ul> <li><a href="http://webvisionsevent.com/">Webvisions</a></li>

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

113. What does it mean?

114. Shift your thinking

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

     system.

116. State-based Design

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

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

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

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;

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;

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

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

123. 3 Categorization Naming Convention Decouple HTML/CSS

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