Thinking about CSS Architecture

1. CsS ThInKiNg ARcHiTeCtUrE FRoNtReNd iN OSaKa Re:cReatEr’S kAnSaI SAtUrDaY, sEpTeMbEr 14 2013 AbOuT
2. HirOkI taNi CYbEragEnT, inC.
3. λΠτϧ @T32K @AhOmU @HiLoKi @HiLoKi
4. APp WeB
5. ¤ ARcHiTeCtUrE
6. k 1 BRoWsEr 0 PsD
7. q k u
8. ¤ ¥
9. .text { color: black; } .catchcopy { color: red; } #message .text { color: green; }
10. 10mIn 1 1 l 12 9 3 6 ¥
11. k1 1 l 12 9 3 6 10mIn 60mIn...aNd MoRe 1 1 l 12 9 3 6 1 1 l 12 9 3 6 111 1 1 l 12 9 3 6 1 1 l 12 9 3 6 1 1 l 12 9 3 6 1 1 l 12 9 3 6 ¤ ¥
12. k 10mIn BUgS... 1 1 1 ± ' l l l l l l H H ± ' l l l l l l H H ± ' l l l l l l H H 1 1 l 12 9 3 6 ¤ ¥
13. L? SOmEoNe
14. L N ? YOu
15. k 1 1 12 9 6 3 l 30mIn 1 1 12 9 6 3 l 30mIn ¤ ¥
16. 1 CsS
17. 1 HtMl 1 CsS 1 Js
18. e GoAl
19. ®©° ®© PHiLiP waLtOn CsS arChItEcTuRe
20. ®©° ®© PHiLiP waLtOn CsS arChItEcTuRe
21. & PReDiCtAbLe REuSaBlE MAiNtAiNaBlE SCaLaBlE
22. #content article h1:first-child { ... }
23. <div id="content"> <article> <h1>Article Title</h1> </article> </div>
24. <div id="content"> <section> <h1>Article Title</h1> </section> </div>
25. <div id="content"> <article> <p>2013/09/13</p> <h1>Article Title</h1> </article> </div>
26. D ¤
27. .entry-title { ... }
28. <div id="content"> <article> <p>2013/09/13</p> <h1 class="entry-title">Article Title</ h1> </article> </div>
29. <div id="content"> <div> <p>2013/09/13</p> <h2 class="entry-title">Article Title</ h2> </div> </div>
30. P O CsS Is ToO FrAgIlE
31. ®©° ®© OoCsS bY niCoLe suLlIvAn
37. SEpArAtE CoNtAiNeR AnD CoNtEnT SEpArAtE StRuCtUrE AnD SkIn
38. SEpArAtE CoNtAiNeR AnD CoNtEnT SEpArAtE StRuCtUrE AnD SkIn
39. ®©° MEdIa obJeCt
40. <div class="media"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
41. <div class="media"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
42. <div class="media"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
43. .media { overflow: hidden; // Clearfix *zoom: 1; // Clearfix } .media-image { float: left; margin-right: 10px; } .media-image > img { display: block; } .media-body { overflow: hidden; }
44. <div class="media skin-a"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
45. <div class="media skin-b"> <div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
46. SEpArAtE CoNtAiNeR AnD CoNtEnT SEpArAtE StRuCtUrE AnD SkIn
47. h2 { font-weight: bold; font-size: 16px; } #news h2 { border-bottom: 1px solid black; padding-bottom: 0.5em; }
48. h2 { font-weight: bold; font-size: 16px; } #news h2, #speakers h2 { border-bottom: 1px solid black; padding-bottom: 0.5em; }
49. <div id="speakers"> <h1>Hiroki Tani</h1> <h2>Session Title</h2> <div> <p>Summary</p> </div> </div>
50. ®©°
51. <div id="speakers"> <h1>Hiroki Tani</h1> <h2>Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div> </div>
52. <div id="speakers"> <h1>Hiroki Tani</h1> <h2>Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div> </div>
53. <div id="speakers"> <h1>Hiroki Tani</h1> <h2>Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div> </div>
54. D ¤
55. h2 { font-weight: bold; font-size: 16px; } .headline { border-bottom: 1px solid black; padding-bottom: 0.5em; }
56. <div id="speakers"> <h1>Hiroki Tani</h1> <h2 class="headline">Session Title</h2> <div> <p>...</p> </div> <div> <h2>Books</h2> <ul> <li>...</li> </ul> </div> </div>
57. .heading { font-weight: bold; font-size: 16px; } .headline { border-bottom: 1px solid black; padding-bottom: 0.5em; }
58. <div id="speakers"> <h1>Hiroki Tani</h1> <h2 class="heading headline">Session Title</h2> <div> <p>...</p> </div> <div> <h2 class="heading">Books</h2> <ul> <li>...</li> </ul> </div> </div>
59. ®©° = DoN’t uSe iD! *
60. ®©° 3 SHoUlDn'T uSe iD seLeCtOr 1 1
61. ®©° = .colorRed { color: red; } *
62. ®©° 3 1 1 .note { color: red; }
63. ®©° 3 iF YoU NeEd It. 1 1
64. ®©° ®©° SmAcSs BY joNaThAn snOoK
65. cAtEgOrIzAtIoN nAmInG CoNvEnTiOn dEcOuPlInG CsS FrOm HtMl
66. cAtEgOrIzAtIoN BAsE MOdUlE THeMe STaTe LAyOuT
67. /* # Base */ body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
68. /* # Layout */ .l-header, l-article, l-footer { width: 960px; margin: auto; } .l-article { border: solid #CCC; border-width: 1px 0 0; } .l-grid { margin: 0; padding: 0; list-style-type: none; } .l-grid > li { display: inline-block; margin: 0 0 10px 10px; }
69. /* # Layout */ #header, #article, #footer { width: 960px; margin: auto; } .l-article { border: solid #CCC; border-width: 1px 0 0; } .l-grid { margin: 0; padding: 0; list-style-type: none; } .l-grid > li { display: inline-block; margin: 0 0 10px 10px; }
70. /* # Layout */ .l-container { width: 960px; margin: auto; } .l-article { border: solid #CCC; border-width: 1px 0 0; } .l-grid { margin: 0; padding: 0; list-style-type: none; } .l-grid > li { display: inline-block; margin: 0 0 10px 10px; }
71. /* # State */ .is-hidden { display: none; } .is-error { font-weight: bold; color: red; } .is-tab-active { border-bottom-color: transparent; }
72. /* # Theme */ /* ## Pink Theme CSS */ .theme-header { background-image: url("/theme/pink/ header.png"); } .theme-border { 1px solid pink; }
73. /* # Module */ /* ## Button */ .btn { ... } .btn-primary { ... } .btn-small { ... } /* ## UIlist */ .uilist { ... } .uilist-item { ... } .uilist-item-icon { ... } /* ## Widget */ .widget { ... } .widget-title { ... } .widget-body { ... }
74. <button class="btn btn-primary">Submit</button> <a href="/help" class="btn btn-small">Help</a> <button class="btn btn-success btn-large"> Complete! </button>
75. <div class="widget"> <h2>Title</h2> <p>Text</p> </div>
76. .widget { ... } .widget p { margin-top: 10px; margin-bottom: 10px; }
77. <div class="widget"> <h2>Title</h2> <ul> <li>ListItem</li> <li>ListItem</li> <li>ListItem</li> </ul> </div>
78. .widget { ... } .widget p, .widget ul { margin-top: 10px; margin-bottom: 10px; }
79. <div class="widget"> <h2>Title</h2> <ul class="widget-body"> <li>ListItem</li> <li>ListItem</li> <li>ListItem</li> </ul> </div>
80. .widget { ... } .widget-body { margin-top: 10px; margin-bottom: 10px; }
81. ®©° >
82. ®©° , ‘RUlE Of ThReE’
83. ®©° 3, 6, 9, 12, 15 , ‘RUlE Of ThReE’
84. ®©° 3, 6, 9, 12, 15 , ‘RUlE Of ThReE’
85. ®©° 3, 6, 12, 24, 48 , ‘RUlE Of ThReE’
86. ®©° 3, 6, 9, 12, 15 , ‘RUlE Of ThReE’
87. ®©° , ‘RUlE Of ThReE’ 3, 6, 9, 12, 15
88. ®©° DOnAlD e, knUtH ࣌ظঘૣͳ࠷దԽ͸ ॾѱͷࠜݯͰ͋Δɻ ... PrEmAtUrE OpTiMiZaTiOn Is ThE RoOt Of AlL EvIl.
89. ®©° DOnAlD e, knUtH pReMaTuRe OpTiMiZaTiOn iS ThE RoOt Of AlL EvIl.
90. ®©°
91. ®©° = NOt SeMaNtIcS! *
92. ®©° nOt AlL SeMaNtIcS NeEd tO Be CoNtEnT-DeRiVeD. NIcOlAs gaLlAgHeR
93. <div class="review"> <h1>CSS Architecture</h1> <p class="reviewer">Review: <span>Hiroki Tani</ span></p> <time datetime="2013-09-14">2013/09/14</time> <p class="review-summary">CSS Bible!</p> <p class="review-description">...</p> Rating: <span class="rating">4.5</span> </div>
94. <div itemscope itemtype="http://data- vocabulary.org/Review"> <h1 itemprop="itemreviewed">CSS Architecture</ h1> <p>Review: <span itemprop="reviewer">Hiroki Tani</span></p> <time itemprop="dtreviewed" datetime="2013-09-14">2013/09/14</time> <p itemprop="summary">CSS Bible!</p> <p itemprop="description">...</p> Rating: <span itemprop="rating">4.5</span> </div>
95. ®©° = * ClAsS! ClAsS! ClAsS! ...
96. ®©° 3 1 1
97. /* Sass(.scss) */ %btn { border-radius: 6px; padding: 0.5em 1em; background-color: #CCC; } .btn-primary { @extend %btn; background-image: linear-gradient(...); color: #FFF; }
98. /* CSS */ .btn-primary { border-radius: 6px; adding: 0.5em 1em; background-color: #CCC; background-image: linear-gradient(...); color: #FFF; }
99. <button class="btn-primary">Save</button>
100. /* Sass(.scss) */ %btn { border-radius: 6px; padding: 0.5em 1em; background-color: #CCC; } %btn-primary { border-radius: 6px; padding: 0.5em 1em; background-color: #CCC; } %btn-large { font-size: 18px; } .save { @extend %btn; @extend %btn-primary; @extend %btn-large; }
101. /* CSS */ .save { border-radius: 6px; adding: 0.5em 1em; background-color: #CCC; background-image: linear-gradient(...); color: #FFF; font-size: 18px; }
102. <button class="save">Submit</button>
103. .clearfix:after,.btn_type2_A:after,.bnavi ul:after,.box_3col:after,.userData dl:after,.likeTool:after,.likeUser ul:after,.commentUser ul:after,.userData:after,.circleList li a:after,.time_count:after,.paging ul:after,.myData:after,.status:after,.bar:after,.month:a fter,.month2:after,.about:after,.sort:after,.mainList ul:after,.mainList2 li ul:after,.bnr_2col:after,.likeTool_lp:after,.flow:after, .radio:after,.btn_entry_2col:after,.sort2:after,ul#popup _message:after,.sort3:after,.f_circleList:after,.f_circl eList a:after,.mainList3 dl:after,.mainList3 ul:after,.box_2col:after,.frame_desc dl:after { content: ""; display: block; clear: both; height: 0; }
104. ®©° ©° BEm bY yaNdEx
105. /* # Module */ /* ## Button */ .btn { ... } .btn-primary { ... } .btn-small { ... } /* ## Widget */ .widget { ... } .widget-title { ... } .widget-body { ... }
106. v v k .btn .btn-primary MOdIfIeR
107. 0 0 .widget .widget-body SUb-CoMpOnEnT
108. BLoCk,elEmEnT,moDiFiEr
109. BlOcK,ElEmEnT,MoDiFiEr
114. .ranking { ... } .ranking__thumbnail { ... } .ranking__item { ... } .nav-line { ... } .nav-line__item { ... } .nav-line_separated { ... } .nav-line_separated__item { ... }
115. /* # Module */ /* ## Button */ .btn { ... } .btn_primary { ... } .btn_small { ... } /* ## Widget */ .widget { ... } .widget__title { ... } .widget__body { ... }
116. /* # Module */ /* ## Button */ .btn { ... } .btn--primary { ... } .btn--small { ... } /* ## Widget */ .widget { ... } .widget__title { ... } .widget__body { ... }
119. ®©° = * UUuUgLy!
120. ®©° = AgReEeE!
121. ; TOoL
125. ®© ©°
126. ®© KsS STyLeGuIdE geNeRaToR
127. ®©° ©° STyLedoCcO STyLeGuIdE geNeRaToR
128. /* A button suitable for giving stars to someone. :hover - Subtle hover highlight. .stars-given - A highlight indicating you've already given a star. .stars-given:hover - Subtle hover highlight on top of stars-given styling. .disabled - Dims the button to indicate it cannot be used. Styleguide 2.1.3. */ a.button.star{ ... } a.button.star.stars-given{ ... } a.button.star.disabled{ ... }
129. ®© PHaNtOm cSs CsS reGrEsSiOn teStInG
130. COmPoNeNt & & & &
131. COmPoNeNt & & & & WeB
134. BeSt pRaCtIcE
135. BeSt pRaCtIcES
136. ®©° ALl CoDe In AnY CoDe-BaSe ShOuLd lOoK LiKe A SiNgLe PeRsOn TyPeD It, eVeN WhEn MaNy PeOpLe ArE cOnTrIbUtInG To It. NIcOlAs gaLlAgHeR
137. THaNkS @HiLoKi iNkDeSiGn.Jp C
138. CrEdItS http://www.flickr.com/photos/darice/8526800143/ http://www.flickr.com/photos/franksvalli/5173283924/ http://www.flickr.com/photos/bdesham/2432400623/