Scalable and Modular Architecture for CSS. The Workshop

Transcription

1 Scalable and Modular Architecture for CSS The Workshop

2 Tweet Use the hashtag #smacss

3 Part 1: Overview

4 CSS gone wild

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

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

7 What is SMACSS?

8 1SMACSS is Categorization

9 2SMACSS is Naming Convention

10 3SMACSS is Decoupling CSS from HTML

11 4SMACSS is Increasing Semantics

12 5SMACSS is State-based Design

13 Categorization Base Layout Module State Theme

14 Base

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

16 a {} a:hover {} a:focus {}

17 Layout

18

19 Major Sections

20 Header Sidebar Content

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

22 Naming Convention Naming convention clarifies intent

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

24 Use Class over ID Specificity is dangerous

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

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

27 Specificity Buster!!important

28 Specificity Buster!!important

29 Grid Systems Like 960.gs

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

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

32 Module

33 Tabs Customized List Button

34 .tab {}.listview {}.btn {}

35 Sub-modules

36 Search Dark Small Large

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

38 Naming Convention Naming convention clarifies intent

39 Prefix Prefix sub-modules with name of module

40 State

41 Active State Default State

42 .tab {}.is-tab-active {}

43 Naming Convention Naming convention clarifies intent

44 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

45 Theme

46

47

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

49

50 .text-plus1 {}.text-minus1 {}

51 Part 2: In Depth

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

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

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

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

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

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

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

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

60 Reduce the Depth Use less selectors, preferably one Use child selectors to limit depth

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

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

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

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

65 State Representation Classes Pseudo-classes Attribute Selectors Media Queries

66 Class-based State

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

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

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

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

71 Pseudo-class State

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

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

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

75 Attribute Selector State

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

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

78 Media Query State

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

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

81 /* 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; } }

82 /* 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; } }

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

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

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

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

87 Part 3: Process

88 Preprocessors Sass Less Stylus

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

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

91 $ sass --watch before:after

92

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

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

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

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

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

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

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

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

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

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

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

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

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

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

107 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

108 Proto Engine JSON HTML Template CSS l11n JavaScript

109

110 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

111

112

113 Larger Teams

114 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)

115 Small vs Large Sites

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

117 Small vs Large Sites SMACSS still works just as well

118 Part 4: Examples

119 Twitter Bootstrap

120 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

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

122 /* Layouts using LESS*/ // Fixed

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

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

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

126

127 OOCSS

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

129 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

130

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

132 Icon Module

133

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

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

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

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

138

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