Thinking about CSS Architecture

14,759 views

Published on

Frontrend in Osaka & Re:Creator's Kansai での講演スライド

Published in: Technology
0 Comments
65 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,759
On SlideShare
0
From Embeds
0
Number of Embeds
7,702
Actions
Shares
0
Downloads
99
Comments
0
Likes
65
Embeds 0
No embeds

No notes for slide

Thinking about CSS Architecture

  1. 1. CsS ThInKiNg ARcHiTeCtUrE FRoNtReNdiNOSaKa Re:cReatEr’S kAnSaI SAtUrDaY, sEpTeMbEr 14 2013 AbOuT
  2. 2. HirOkI taNi CYbEragEnT, inC.
  3. 3. タイトル @T32K @AhOmU @HiLoKi@HiLoKi
  4. 4. APp WeB
  5. 5. ¤なぜ設計を学ぶべきなのか ARcHiTeCtUrE
  6. 6. k 1BRoWsEr 0PsD
  7. 7. q k u
  8. 8. ¤ ¥
  9. 9. .text { color: black; } .catchcopy { color: red; } #message .text { color: green; }
  10. 10. 10mIn 11l12 9 3 6 ¥
  11. 11. k11l12 9 3 6 10mIn 60mIn...aNd MoRe 11l12 9 3 6 11l12 9 3 6 111 11l12 9 3 6 11l12 9 3 6 11l12 9 3 6 11l12 9 3 6 ¤ ¥
  12. 12. k 10mIn BUgS... 1 1 1 ±' lll lll H H ±' lll lll H H ±' lll lll H H 11l12 9 3 6 ¤ ¥
  13. 13. L ?SOmEoNe
  14. 14. L N ? YOu
  15. 15. k1112 9 6 3 l 30mIn 1112 9 6 3 l 30mIn ¤ ¥
  16. 16. 1CsS
  17. 17. 1HtMl 1CsS 1Js
  18. 18. e良いCSS設計のゴールとは GoAl
  19. 19. ®©° ®©°PHiLiP waLtOn CsS arChItEcTuRe
  20. 20. ®©° ®©°PHiLiP waLtOn CsS arChItEcTuRe
  21. 21. & PReDiCtAbLe REuSaBlE MAiNtAiNaBlE SCaLaBlE
  22. 22. #content article h1:first-child { ... }
  23. 23. <div id="content"> <article> <h1>Article Title</h1> </article> </div>
  24. 24. <div id="content"> <section> <h1>Article Title</h1> </section> </div>
  25. 25. <div id="content"> <article> <p>2013/09/13</p> <h1>Article Title</h1> </article> </div>
  26. 26.
  27. 27. .entry-title { ... }
  28. 28. <div id="content"> <article> <p>2013/09/13</p> <h1 class="entry-title">Article Title</ h1> </article> </div>
  29. 29. <div id="content"> <div> <p>2013/09/13</p> <h2 class="entry-title">Article Title</ h2> </div> </div>
  30. 30. POCSSは壊れやすい CsS Is ToO FrAgIlE
  31. 31. ®©°®©°OoCsS bY niCoLe suLlIvAn
  32. 32. SEpArAtE CoNtAiNeR AnD CoNtEnT SEpArAtE StRuCtUrE AnD SkIn
  33. 33. SEpArAtE CoNtAiNeR AnD CoNtEnT SEpArAtE StRuCtUrE AnD SkIn
  34. 34. ®©° MEdIa obJeCt
  35. 35. <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>
  36. 36. <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>
  37. 37. <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>
  38. 38. .media { overflow: hidden; // Clearfix *zoom: 1; // Clearfix } .media-image { float: left; margin-right: 10px; } .media-image > img { display: block; } .media-body { overflow: hidden; }
  39. 39. <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>
  40. 40. <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>
  41. 41. SEpArAtE CoNtAiNeR AnD CoNtEnT SEpArAtE StRuCtUrE AnD SkIn
  42. 42. h2 { font-weight: bold; font-size: 16px; } #news h2 { border-bottom: 1px solid black; padding-bottom: 0.5em; }
  43. 43. h2 { font-weight: bold; font-size: 16px; } #news h2, #speakers h2 { border-bottom: 1px solid black; padding-bottom: 0.5em; }
  44. 44. <div id="speakers"> <h1>Hiroki Tani</h1> <h2>Session Title</h2> <div> <p>Summary</p> </div> </div>
  45. 45. ®©°
  46. 46. <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>
  47. 47. <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>
  48. 48. <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>
  49. 49.
  50. 50. h2 { font-weight: bold; font-size: 16px; } .headline { border-bottom: 1px solid black; padding-bottom: 0.5em; }
  51. 51. <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>
  52. 52. .heading { font-weight: bold; font-size: 16px; } .headline { border-bottom: 1px solid black; padding-bottom: 0.5em; }
  53. 53. <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>
  54. 54. ®©°=DoN’t uSe iD! *
  55. 55. ®©°3SHoUlDn'T uSe iD seLeCtOr 11
  56. 56. ®©°=.colorRed { color: red; } *
  57. 57. ®©°311 .note { color: red; }
  58. 58. ®©°3iF YoU NeEd It. 11
  59. 59. ®©° ®©°SmAcSs BY joNaThAn snOoK
  60. 60. cAtEgOrIzAtIoN nAmInG CoNvEnTiOn dEcOuPlInG CsS FrOm HtMl
  61. 61. cAtEgOrIzAtIoN BAsE MOdUlE THeMeSTaTeLAyOuT
  62. 62. /* # Base */ body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
  63. 63. /* # 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; }
  64. 64. /* # 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; }
  65. 65. /* # 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; }
  66. 66. /* # State */ .is-hidden { display: none; } .is-error { font-weight: bold; color: red; } .is-tab-active { border-bottom-color: transparent; }
  67. 67. /* # Theme */ /* ## Pink Theme CSS */ .theme-header { background-image: url("/theme/pink/ header.png"); } .theme-border { 1px solid pink; }
  68. 68. /* # Module */ /* ## Button */ .btn { ... } .btn-primary { ... } .btn-small { ... } /* ## UIlist */ .uilist { ... } .uilist-item { ... } .uilist-item-icon { ... } /* ## Widget */ .widget { ... } .widget-title { ... } .widget-body { ... }
  69. 69. <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>
  70. 70. <div class="widget"> <h2>Title</h2> <p>Text</p> </div>
  71. 71. .widget { ... } .widget p { margin-top: 10px; margin-bottom: 10px; }
  72. 72. <div class="widget"> <h2>Title</h2> <ul> <li>ListItem</li> <li>ListItem</li> <li>ListItem</li> </ul> </div>
  73. 73. .widget { ... } .widget p, .widget ul { margin-top: 10px; margin-bottom: 10px; }
  74. 74. <div class="widget"> <h2>Title</h2> <ul class="widget-body"> <li>ListItem</li> <li>ListItem</li> <li>ListItem</li> </ul> </div>
  75. 75. .widget { ... } .widget-body { margin-top: 10px; margin-bottom: 10px; }
  76. 76. ®©°>
  77. 77. ®©°, ‘RUlE Of ThReE’
  78. 78. ®©° 3, 6, 9, 12, 15 , ‘RUlE Of ThReE’
  79. 79. ®©° 3, 6, 9, 12, 15 , ‘RUlE Of ThReE’
  80. 80. ®©° 3, 6, 12, 24, 48 , ‘RUlE Of ThReE’
  81. 81. ®©° 3, 6, 9, 12, 15 , ‘RUlE Of ThReE’
  82. 82. ®©°, ‘RUlE Of ThReE’ 3, 6, 9, 12, 15
  83. 83. ®©°DOnAlD e, knUtH 時期尚早な最適化は 諸悪の根源である。 ... PrEmAtUrE OpTiMiZaTiOn Is ThE RoOt Of AlL EvIl.
  84. 84. ®©°
  85. 85. ®©°=NOt SeMaNtIcS! *
  86. 86. ®©° すべてのセマンティックが コンテンツ派生である必要はない。 ... NoT AlL SeMaNtIcS NeEd To Be CoNtEnT-DeRiVeD. NIcOlAs gaLlAgHeR
  87. 87. <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>
  88. 88. <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>
  89. 89. ®©°=* ClAsS!ClAsS!ClAsS! ...
  90. 90. ®©°311
  91. 91. /* Sass(.scss) */ %btn { border-radius: 6px; padding: 0.5em 1em; background-color: #CCC; } .btn-primary { @extend %btn; background-image: linear-gradient(...); color: #FFF; }
  92. 92. /* CSS */ .btn-primary { border-radius: 6px; adding: 0.5em 1em; background-color: #CCC; background-image: linear-gradient(...); color: #FFF; }
  93. 93. <button class="btn-primary">Save</button>
  94. 94. /* 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; }
  95. 95. /* CSS */ .save { border-radius: 6px; adding: 0.5em 1em; background-color: #CCC; background-image: linear-gradient(...); color: #FFF; font-size: 18px; }
  96. 96. <button class="save">Submit</button>
  97. 97. .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; }
  98. 98. ®©°©°BEm bY yaNdEx
  99. 99. /* # Module */ /* ## Button */ .btn { ... } .btn-primary { ... } .btn-small { ... } /* ## Widget */ .widget { ... } .widget-title { ... } .widget-body { ... }
  100. 100. v vk.btn .btn-primary MOdIfIeR
  101. 101. 00 .widget .widget-body SUb-CoMpOnEnT
  102. 102. BLoCk,elEmEnT,moDiFiEr
  103. 103. BlOcK,ElEmEnT,MoDiFiEr
  104. 104. .ranking { ... } .ranking__thumbnail { ... } .ranking__item { ... } .nav-line { ... } .nav-line__item { ... } .nav-line_separated { ... } .nav-line_separated__item { ... }
  105. 105. /* # Module */ /* ## Button */ .btn { ... } .btn_primary { ... } .btn_small { ... } /* ## Widget */ .widget { ... } .widget__title { ... } .widget__body { ... }
  106. 106. /* # Module */ /* ## Button */ .btn { ... } .btn--primary { ... } .btn--small { ... } /* ## Widget */ .widget { ... } .widget__title { ... } .widget__body { ... }
  107. 107. ®©°=* UUuUgLy!
  108. 108. ®©°=AgReEeE!
  109. 109. ; パターンライブラリ/CSSスタイルガイド/テスト TOoL
  110. 110. ®©©°
  111. 111. ®©KsS STyLeGuIdE geNeRaToR
  112. 112. ®©°©°STyLedoCcO STyLeGuIdE geNeRaToR
  113. 113. /* 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{ ... }
  114. 114. COmPoNeNt & & & &
  115. 115. COmPoNeNt & & & & WeB
  116. 116. BeSt pRaCtIcE
  117. 117. BeSt pRaCtIcES
  118. 118. ®©° どんなに多くの人が貢献したとしても、 どのコードも一人で書いたようにする。 ALl CoDe In AnY CoDe-BaSe ShOuLd LoOk LiKe A SiNgLe PeRsOn tYpEd It, EvEn WhEn MaNy PeOpLe ArE CoNtRiBuTiNg To It. NIcOlAs gaLlAgHeR
  119. 119. THaNkS @HiLoKi iNkDeSiGn.JpC
  120. 120. CrEdItS http://www.flickr.com/photos/darice/8526800143/ http://www.flickr.com/photos/franksvalli/5173283924/ http://www.flickr.com/photos/bdesham/2432400623/

×