Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Thinking about CSS Architecture

17,394 views

Published on

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

Published in: Technology
  • Be the first to comment

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/

×