Scalable and Modular Architecture for CSS. The Workshop

Size: px

Start display at page:

Download "Scalable and Modular Architecture for CSS. The Workshop"

Arnold Christian Lamb
6 years ago
Views:

1 Scalable and Modular Architecture for CSS The Workshop

2 Wifi SSID: GTRI-CONF Password: STINGER! Username: may-conf Password: Indiana298

3 Ask Questions Get the most out of today

4 Tweet Use the hashtag #smacss

5 Thanks!

6 Part 1: Overview

7 CSS gone wild

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

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

10 What is SMACSS?

11 1SMACSS is Categorization

12 2SMACSS is Naming Convention

13 3SMACSS is Decoupling CSS from HTML

14 4SMACSS is Increasing Semantics

15 5SMACSS is State-based Design

16 Categorization Base Layout Module State Theme

17 Base

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

19 a {} a:hover {} a:focus {}

20 Layout

22 Major Sections

23 Header Sidebar Content

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

25 Naming Convention Naming convention clarifies intent

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

27 Use Class over ID Specificity is dangerous

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

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

30 Specificity Buster!!important

31 Specificity Buster!!important

32 Grid Systems Like 960.gs

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

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

35 Module

36 Tabs Customized List Button

37 .tab {}.listview {}.btn {}

38 Sub-modules

39 Search Dark Small Large

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

41 Naming Convention Naming convention clarifies intent

42 Prefix Prefix sub-modules with name of module

43 State

44 Active State Default State

45 .tab {}.is-tab-active {}

46 Naming Convention Naming convention clarifies intent

47 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

48 Theme

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

53 .text-plus1 {}.text-minus1 {}

54 Part 2: In Depth

55 Is it Base?

56 <button> <table> <input>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

74 State Representation Classes Pseudo-classes Attribute Selectors Media Queries

75 Class-based State

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

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

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

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

80 Pseudo-class State

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

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

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

84 Attribute Selector State

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

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

87 Media Query State

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

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

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

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

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

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

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

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

96 Part 3: Process

97 Preprocessors Sass Less Stylus

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

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

100 $ sass --watch before:after

101

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

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

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

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

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

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

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

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

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

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

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

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

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

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

116 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

117 Proto Engine JSON HTML Template CSS l11n JavaScript

118

119 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

120

121

122 Larger Teams

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

124 Small vs Large Sites

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

126 Small vs Large Sites Change Large Small Time

127 Part 4: Examples

128 Twitter Bootstrap

129 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

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

131 /* Layouts using LESS*/ // Fixed

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

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

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

135

136 OOCSS

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

138 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

139

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

141 Icon Module

142

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

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

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

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

147

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

Scalable and Modular Architecture for CSS. The Workshop

Scalable and Modular Architecture for CSS The Workshop Tweet Use the hashtag #smacss Part 1: Overview CSS gone wild .block { display:block!important; }.inline { display:inline!important; }.hide { display:none!important;