Scalable and Modular Architecture for CSS. The Workshop

Transcription

1 Scalable and Modular Architecture for CSS The Workshop

2 Wifi SSID: ISITE Guest Password: DareToDelight!

3 Ask Questions Get the most out of today

4 Tweet Use the hashtag #smacss

5 Part 1: Overview

6 CSS gone wild

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

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

9 What is SMACSS?

10 1SMACSS is Categorization

11 2SMACSS is Naming Convention

12 3SMACSS is Decoupling CSS from HTML

13 4SMACSS is Increasing Semantics

14 5SMACSS is State-based Design

15 Categorization Base Layout Module State Theme

16 Base

17 html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }

18 a {} a:hover {} a:focus {}

19 Layout

20

21 Major Sections

22 Header Sidebar Content

23 .header { } width: 100%;.sidebar { float: left; width: 20%; }.content { float: right; width: 80%; }

24 Naming Convention Naming convention clarifies intent

25 .layout-header { } width: 100%;.layout-sidebar { float: left; width: 20%; }.layout-content { float: right; width: 80%; }

26 Use Class over ID Specificity is dangerous

27 Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudoelements) style="..." #article.article :hover [attr=val] a :first-child

28 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>

29 Specificity Buster!!important

30 Specificity Buster!!important

31 Grid Systems Like 960.gs

32 .container_12,.container_16 { margin-left: auto; margin-right: auto; width: 960px; }

33 .container_12.grid_4 { } width: 300px;.container_12.grid_5 { } width: 380px;.container_12.grid_7 { } width: 540px;

34 Module

35 Tabs Customized List Button

36 .tab {}.listview {}.btn {}

37 Sub-modules

38 Search Dark Small Large

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

40 Naming Convention Naming convention clarifies intent

41 Prefix Prefix sub-modules with name of module

42 State

43 Active State Default State

44 .tab {}.is-tab-active {}

45 Naming Convention Naming convention clarifies intent

46 Prefix Prefix states with is- is- prefix indicates likelihood of JavaScript dependency is- indicates a toggleable state. States that are specific to a module should include module name

47 Theme

48

49

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

51

52 .text-plus1 {}.text-minus1 {}

53 Part 2: In Depth

54 Why Categorize?

55 Categorizing Reveals Patterns

56 Patterns Base sets typography Layouts specify widths and margins Layouts specify color/background Modules expand to fill Layout Modules override Base and Layout font, color, background properties States are!important

57 Patterns Themes store colour/border/ background Typography store font, size, weight, line-height

58 Is it Base?

59 <button> <table> <input>

60 button { display: inline-block; padding: 3px 30px; border-radius: 25px; background-color: #4A6F81; background-image: linear-gradient(..); box-shadow: px #4A6F81; text-decoration: none; color: white; font-weight: bold; font-size: 150%; }

61 .btn { display: inline-block; padding: 3px 30px; border-radius: 25px; background-color: #4A6F81; background-image: linear-gradient(..); box-shadow: px #4A6F81; text-decoration: none; color: white; font-weight: bold; font-size: 150%; }

62 table { width: 100%; border: solid black; border-width: 1px 0; } td { border: solid black; border-width: 1px 0; }

63 table { } width: 100%;.comparison { border: solid black; border-width: 1px 0; }.comparison td { border: solid black; border-width: 1px 0; }

64 Depth of Applicability Because modules can exist inside other modules, limit their impact

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

66 #content a { color: #039; } #sidebar a { color: #333; }

67 #content a { color: #039; } #sidebar a { color: #333; }.callout a { color: #900; }

68 #content a { color: #039; } #sidebar a { color: #333; }.callout a { color: #900; }

69 #content a { color: #039; } #sidebar a { color: #333; } #sidebar.callout a { color: #900; }

70 #content a { color: #039; } #sidebar a { color: #333; } #sidebar.callout a, #content.callout a { color: #900; }

71 #content a { color: #039; } #sidebar a { color: #333; }.callout a { color: #900!important; }

72 Single Responsibility Theory A chunk of code should do one thing and one thing only.

73 Reduce the Depth Use fewer selectors, preferably one Use child selectors to limit depth

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

75 .comment-author {}.comment-number > a {}

76 #content a { color: #039; } #sidebar a { color: #333; }

77 a { color: #039; }.nav > a { color: #333; }.callout > a { color: #900; }

78 State Representation Classes Pseudo-classes Attribute Selectors Media Queries

79 Class-based State

80 /* class-based state */.is-hidden { }

81 /* class-based state that only applies to a specific module */.is-module-active { }

82 Avoid Avoid a state affecting more than one module at a time.

83 /* avoid this! */.btn.is-active +.menu { display: block; }

84 Pseudo-class State

85 /* Pseudo-class state */.callout:hover { }

86 .input-option { } display: none; /* Pseudo-class state */ input:checked ~.input-option { display: block; }

87 <input type="checkbox" id="opt"> <label for="opt">other?</label> <div class="input-option"> <input type="text" id="other"> <label for="other">please specify:</ label> </div>

88 Attribute Selector State

89 .btn[data-state=default] { color: #333; }.btn[data-state=pressed] { color: #000; }.btn[data-state=disabled] { opacity:.5; pointer-events: none; } <!-- HTML --> <button class="btn" datastate="disabled">disabled</button>

90 // bind a click handler to each button $(".btn").bind("click", function(){ // change the state to pressed $(this).attr('data-state', 'pressed'); });

91 Media Query State

92 @media screen and (max-width: 400px) { }.layout-content { float: none; }

93 Modular Media Queries Include media queries with the modules they affect

94 /* default state for nav items */.nav > li { float: none; } /* alternate state for nav items on larger screens screen and (min-width: 400px) {.nav > li { float: left; } }

95 /* default layout */.l-content { float: left; width: 75%; }.l-sidebar { float: right; width: 25%; } /* alternate state for layout on small screens screen and (max-width: 400px) {.l-content,.l-sidebar { float: none; width: auto; } }

96 Modularize Find repeatable patterns Accept that class names may describe a visual state e.g.: big, small Keep em separated

97 Part 3: Process

98 Place everything in their own files base.css layout.css grid.css button.css carousel.css modal.css

99 Integrating JavaScript Scripts are written for individual modules States are modified, not inline styles

100 $('.btn').click(function(){ }); $(this).addclass('is-pressed');

101 Preprocessors Sass Less Stylus

102 Preprocessors Variables Nesting Functions (aka Mixins) Handles compilation of files into final product

103 gem install sass # or even better: gem install compass

104 $ sass --watch before:after

105

106 /* Variables */ $color: #369; body { } color: $color;.callout { } border-color: $color;

107 body { } color: #369;.callout { } border-color: #369;

108 /* Nesting */.nav { margin: 0; padding: 0; li { float: left; } }

109 /* Nesting */.nav { margin: 0; padding: 0; }.nav li { float: left; }

110 // beware of deep nesting #content {.nav { width: 500px; li { float:left; width: 100px; a { display:block; } } } }

111 // beware of deep nesting #content { } #content.nav { width: 500px; } #content.nav li { float:left; width:100px; } #content.nav li a { display:block; }

112 /* Nested Media Queries */.nav > li { width: screen and (min-width: 320px) { width: 100px; float: left; screen and (min-width: 1200px) { width: 250px; } }

113 .nav > li { width: 100%; screen and (min-width: 320px) {.nav > li { width: 100px; float: left; } screen and (min-width: 1200px) {.nav > li { width: 250px; } }

114 /* Mixins border-radius($size) { -webkit-border-radius: $size; -moz-border-radius: $size; border-radius: $size; }.callout { border-radius(5px);

115 /* Mixins */.callout { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

116 /* Functions */ $btncolor: #036;.btn { background-color: $btncolor; }.btn:hover { background-color: lighten($btncolor, 20%); }

117 .btn { background-color: #003366; }.btn:hover { background-color: #0066cc; }

118 /* Extending Classes */.btn { display: block; padding: 5px 10px; background-color: #003366; }.btn-default background-color: #0066cc; }

119 /* Extending Classes */.btn,.btn-default { display: block; padding: 5px 10px; background-color: #003366; }.btn-default { background-color: #0066cc; }

120

121

122 Prototyping Build and test individual components Allows for front-end development independent of engineering Create centralized repository for multiple projects Proto Engine can use different technology than engineering

123 Proto Engine JSON HTML Template CSS l11n JavaScript

124

125 Performance Pull in style sheets when you need them Smaller rule sets make it easier on browsers Google Page Speed recommends a single ID or class selector

126

127

128 Larger Teams

129 Larger Teams Separation of files allows multiple members of the team to work on separate files Modular approach works well with OOP on server side (hence OOCSS)

130 Small vs Large Sites

131 Small vs Large Sites Smaller sites don t have multiple people on it Smaller sites don t change as often

132 Small vs Large Sites Change Large Small Time

133 Part 4: Examples

134 Twitter Bootstrap

135 Twitter Bootstrap Scoping families of classes with a prefix (e.g.,.modal-header instead of.modal.header) Stopping the cascade of CSS, or at least limiting it (e.g.,.modal-title instead of.modal h3) Avoid element tags in selectors

136 /* MODULE */.btn {} /* SUB-MODULE */.btn-large {}.btn-small {}.btn-mini {}

137 /* Layouts using LESS*/ // Fixed

138 /* Layouts using LESS*/.span1 { 1); }.span2 { 2); }.span3 { 3); }.span4 { 4); }

139 /* class states */.btn.active {}.btn.disabled {} /* pseudo-class states */.btn:hover {}.btn:focus {}

140 /* Media Queries */ // TABLETS AND BELOW // (max-width: 979px) {.navbar-fixed-top.navbar-inner { padding: 5px; } }

141

142 OOCSS

143 OOCSS a CSS object is a repeating visual pattern Separate structure and skin Separate container and content

144 OOCSS Base: Uses base reset and font declarations from YUI Layout: Has a grid system Modules: comes with a few modules out of the box Theme: Creates a greater separation between structure and skin

145

146 /* Media Object */.media { overflow:hidden; *overflow:visible; zoom:1; }.media.img {float:left; }.media.img img {display:block;}.media.imgext {float:right;}

147 Icon Module

148

149 <ul class="menu"> <li class="menu-inbox">inbox</li> <li class="menu-drafts">drafts</li> </ul>

150 .menu li { background: url(/img/sprite.png) norepeat 0 0; padding-left: 20px; }.menu.menu-inbox { } background-position: 0-20px;.menu.menu-drafts { } background-position: 0-40px;

151 <li><i class="ico ico-16 ico-inbox"></i> Inbox</li>

152 .ico { display: inline-block; background: url(/img/sprite.png) norepeat; line-height: 0; vertical-align: bottom; }.ico-16 { height: 16px; width: 16px; }.ico-inbox { background-position: 20px 20px; }.ico-drafts { background-position: 20px 40px; }

153

154 Fin Resources to be posted at: Feedback can be sent to Thank you!