Successfully reported this slideshow.
Your SlideShare is downloading. ×

ちゃんとCSSを書くために - CSS/Sass設計の話

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 159 Ad
Advertisement

More Related Content

Viewers also liked (13)

Advertisement

Recently uploaded (20)

ちゃんとCSSを書くために - CSS/Sass設計の話

  1. 1. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS AND SASS FOR MUCH BETTER CODING Talknote Vol.8 / Frontrend
  2. 2. A GOOD CSS AND SASS ARCHITECTUREA GOOD CSS AND SASS ARCHITECTURE @hiloki
  3. 3. A GOOD CSS AND SASS ARCHITECTURE @hiloki @ahomu @t32k
  4. 4. A GOOD CSS AND SASS ARCHITECTURE DESKTOP APP MOBILE APP / WEB MOBILE APP
  5. 5. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS AND SASS FOR MUCH BETTER CODING
  6. 6. A GOOD CSS AND SASS ARCHITECTURE CSS
  7. 7. A GOOD CSS AND SASS ARCHITECTURE CSS ちゃんと設計しろ! Chanto Sekkei Siro!
  8. 8. A GOOD CSS AND SASS ARCHITECTURE
  9. 9. A GOOD CSS AND SASS ARCHITECTURE
  10. 10. A GOOD CSS AND SASS ARCHITECTURE
  11. 11. A GOOD CSS AND SASS ARCHITECTURE
  12. 12. A GOOD CSS AND SASS ARCHITECTURE
  13. 13. A GOOD CSS AND SASS ARCHITECTURE CSS
  14. 14. A GOOD CSS AND SASS ARCHITECTURE CSS HTML
  15. 15. A GOOD CSS AND SASS ARCHITECTURE CSS HTML JavaScript
  16. 16. A GOOD CSS AND SASS ARCHITECTURE
  17. 17. A GOOD CSS AND SASS ARCHITECTURE
  18. 18. A GOOD CSS AND SASS ARCHITECTURE
  19. 19. A GOOD CSS AND SASS ARCHITECTURE #header .applyButton { border-radius: 4px; padding: 10px 0; width: 360px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; }
  20. 20. A GOOD CSS AND SASS ARCHITECTURE
  21. 21. A GOOD CSS AND SASS ARCHITECTURE #sidebar .applyButton { border-radius: 4px; padding: 6px 0; // for #sidebar width: 200px; // for #sidebar text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; }
  22. 22. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #header .applyButton { padding: 10px 0; width: 360px; } #sidebar .applyButton { padding: 6px 0; width: 200px; }
  23. 23. A GOOD CSS AND SASS ARCHITECTURE
  24. 24. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #content .applyButton { padding: 12px 0; width: 500px; font-size: 24px; }
  25. 25. A GOOD CSS AND SASS ARCHITECTURE
  26. 26. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #content .applyButton { padding: 12px 0; width: 500px; font-size: 24px; } #content .cource .applyButton { // = #sidebar padding: 6px 0; width: 200px; font-size: 16px; // Default font-size }
  27. 27. A GOOD CSS AND SASS ARCHITECTURE CSSは、簡単に書ける
  28. 28. A GOOD CSS AND SASS ARCHITECTURE CSSは、簡単に書ける 冗長に、それらしく
  29. 29. A GOOD CSS AND SASS ARCHITECTURE そのCSSには、問題がない
  30. 30. A GOOD CSS AND SASS ARCHITECTURE あなたにとって そのCSSには、問題がない
  31. 31. A GOOD CSS AND SASS ARCHITECTURE そのCSSには、問題がない? 後任者にとって
  32. 32. A GOOD CSS AND SASS ARCHITECTURE そのCSSには、問題がない 問題がある 後任者にとって
  33. 33. A GOOD CSS AND SASS ARCHITECTURE そのCSSには、問題がない 明後日の自分にも 問題がある
  34. 34. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #header .applyButton { padding: 10px 0; width: 360px; } #sidebar .applyButton { padding: 6px 0; width: 200px; } #content .applyButton { padding: 12px 0; width: 500px; font-size: 24px; } #content .cource .applyButton { padding: 6px 0; width: 200px; font-size: 16px; } #content .teacher .applyButton { width: 160px; }
  35. 35. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #header .applyButton { padding: 10px 0; width: 360px; } #sidebar .applyButton { padding: 6px 0; width: 200px; } #content .applyButton { padding: 12px 0; width: 500px; font-size: 24px; } #content .cource .applyButton { padding: 6px 0; width: 200px; font-size: 16px; } #content .teacher .applyButton { width: 160px; } body.home #content .applyButton { ... } #content .cource #mizuno .name, #content .cource #satou .name, #content .cource #hiraki .name, #content .cource #tani .name { ... }
  36. 36. A GOOD CSS AND SASS ARCHITECTURE ⌘ + A , DELETE
  37. 37. A GOOD CSS AND SASS ARCHITECTURE
  38. 38. A GOOD CSS AND SASS ARCHITECTURE .btn { border-radius: 4px; text-align: center; } .btn-primary { background-color: rgb(255,169,0); color: #FFFFFF; } .btn-small { padding: 6px 0; width: 200px; } .btn-medium { padding: 10px 0; width: 360px; } .btn-large { padding: 12px 0; width: 500px; font-size: 24px; }
  39. 39. A GOOD CSS AND SASS ARCHITECTURE <!-- #header --> <a href="#" class="btn btn-primary btn-medium"> 講座申し込み </a> <!-- #sidebar, #content > .cource --> <a href="#" class="btn btn-primary btn-small"> 講座申し込み </a> <!-- #content --> <a href="#" class="btn btn-primary btn-large"> 今すぐ講座に座申し込む </a>
  40. 40. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS FOR MUCH BETTER CODING AND SASS
  41. 41. A GOOD CSS AND SASS ARCHITECTURE CSS Architecture http://philipwalton.com/articles/css-architecture/
  42. 42. A GOOD CSS AND SASS ARCHITECTURE PREDICTABLE 予測しやすい
  43. 43. A GOOD CSS AND SASS ARCHITECTURE REUSABLE 再利用しやすい
  44. 44. A GOOD CSS AND SASS ARCHITECTURE MAINTAINABLE 保守しやすい
  45. 45. A GOOD CSS AND SASS ARCHITECTURE SCALABLE 拡張しやすい
  46. 46. A GOOD CSS AND SASS ARCHITECTURE PREDICTABLE 予測しやすい REUSABLE 再利用しやすい MAINTAINABLE 保守しやすい SCALABLE 拡張しやすい
  47. 47. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTUREFOR MUCH BETTER CODING AND SASSA BAD CSS
  48. 48. A GOOD CSS AND SASS ARCHITECTURE .widget { background: yellow; border: 1px solid black; color: black; width: 50%; } #sidebar .widget { width: 200px; } body.homepage .widget { background: white; }
  49. 49. A GOOD CSS AND SASS ARCHITECTURE #main-nav ul li ul { } #content article h1:first-child { } #sidebar > div > h3 + p { }
  50. 50. A GOOD CSS AND SASS ARCHITECTURE .widget { position: absolute; top: 20px; left: 20px; background-color: red; font-size: 1.5em; text-transform: uppercase; }
  51. 51. A GOOD CSS AND SASS ARCHITECTURE .widget {} .widget .title {} .widget .content {} .widget .action {}
  52. 52. A GOOD CSS AND SASS ARCHITECTURE <div class="widget"> <h3 class="title">...</h3> <div class="content"> Lorem ipsum dolor sit amet, adipiscing elit. In condimentum justo et est dapibus sit amet euismod ligula ornare. Vivamus elementum accumsan dignissim. <button class="action">Click Me!</button> </div> </div>
  53. 53. A GOOD CSS AND SASS ARCHITECTURE .widget .title { background-color: green; color: #FFFFFF; } .widget .title
  54. 54. A GOOD CSS AND SASS ARCHITECTURE .title { border-left: 10px solid black; padding: 5px 10px; font-size: 24px; } .title
  55. 55. A GOOD CSS AND SASS ARCHITECTURE .widget .title { background-color: green; color: #FFFFFF; } .title { border-left: 10px solid black; padding: 5px 10px; font-size: 24px; } .widget .title
  56. 56. A GOOD CSS AND SASS ARCHITECTURE MODULAR モジュール
  57. 57. A GOOD CSS AND SASS ARCHITECTURE Nicole Sullivan - OOCSS https://github.com/stubbornella/oocss
  58. 58. A GOOD CSS AND SASS ARCHITECTURE Jonathan Snook - SMACSS http://smacss.com/
  59. 59. A GOOD CSS AND SASS ARCHITECTURE Jonathan Snook - SMACSS http://smacss.com/
  60. 60. A GOOD CSS AND SASS ARCHITECTURE DE-COUPLING 疎結合 NAME CONVENTION 命名規則
  61. 61. A GOOD CSS AND SASS ARCHITECTURE DE-COUPLING 装飾 構造 コンテンツ コンテナー HTML CSS
  62. 62. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS FOR MUCH BETTER CODING AND SASS
  63. 63. A GOOD CSS AND SASS ARCHITECTURE /* Bad */ .widget { } #sidebar .widget { } /* Good */ .widget { } .widget-sidebar { }
  64. 64. A GOOD CSS AND SASS ARCHITECTURE <div id="sidebar"> <div class="widget widget-sidebar"> <p>Widget</p> </div> </div> <div id="rightColumn"> <div class="widget widget-sidebar"> <p>Widget</p> </div> </div>
  65. 65. A GOOD CSS AND SASS ARCHITECTURE /* Grenade */ #main-nav ul li ul { } /* Sniper Rifle */ .subnav { }
  66. 66. A GOOD CSS AND SASS ARCHITECTURE <div id="main"> <ul> <li> <a href="#">First</a> <ul class="subnav"> <li><a href="#">Second</a></li> <li><a href="#">Second</a></li> <li><a href="#">Second</a></li> </ul> </li> </ul> </div>
  67. 67. A GOOD CSS AND SASS ARCHITECTURE .widget { background-color: red; font-size: 1.5em; text-transform: uppercase; } .widget-positioned { position: absolute; top: 20px; left: 20px; }
  68. 68. A GOOD CSS AND SASS ARCHITECTURE /* High risk */ .widget { } .widget .title { } /* Low risk */ .widget { } .widget-title { }
  69. 69. A GOOD CSS AND SASS ARCHITECTURE <div class="widget"> <h3 class="widget-title">...</h3> <div class="widget-content"> Lorem ipsum dolor sit amet, adipiscing elit. In condimentum justo et est dapibus sit amet euismod ligula ornare. Vivamus elementum accumsan dignissim. <button class="widget-action">Click Me!</ button> </div> </div>
  70. 70. A GOOD CSS AND SASS ARCHITECTURE .widget-title { background-color: green; color: #FFFFFF; } .title { border-left: 10px solid black; padding: 5px 10px; font-size: 24px; } .widget-title .title
  71. 71. A GOOD CSS AND SASS ARCHITECTURE .widget { }
  72. 72. A GOOD CSS AND SASS ARCHITECTURE .widget { } .widget-sidebar { } .widget-title { }
  73. 73. A GOOD CSS AND SASS ARCHITECTURE .widget { } .widget .widget-sidebar .widget .widget-title .widget-sidebar { } .widget-title { }
  74. 74. A GOOD CSS AND SASS ARCHITECTURE .widget { } .widget .widget-sidebar .widget .widget-title .widget-sidebar { } .widget-title { } Modifier Sub-Component
  75. 75. A GOOD CSS AND SASS ARCHITECTURE .widget-sidebar { } .widget { }
  76. 76. A GOOD CSS AND SASS ARCHITECTURE .widget-sidebar { } .widget { } Modifier OR Sub-Component ?
  77. 77. A GOOD CSS AND SASS ARCHITECTURE .widget-sidebar { } .widget { } Modifier OR Sub-Component ? .widget-sidebar .widget .widget-sidebar
  78. 78. A GOOD CSS AND SASS ARCHITECTURE Yandex - BEM http://bem.info/
  79. 79. A GOOD CSS AND SASS ARCHITECTURE Block Element Modifier
  80. 80. A GOOD CSS AND SASS ARCHITECTURE .block__element_modifier {} the BEM SYSTEM
  81. 81. A GOOD CSS AND SASS ARCHITECTURE Influenced by the BEM SYSTEM .component-name--modifier {} .component-name__sub-component {} Nicolas Gallagher - About HTML semantics and front-end architecture http://nicolasgallagher.com/about-html-semantics-front-end-architecture http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
  82. 82. A GOOD CSS AND SASS ARCHITECTURE /* Modifier */ .widget--sidebar { } /* Sub-Component */ .widget__title { }
  83. 83. A GOOD CSS AND SASS ARCHITECTURE “ class名が決まれば 我々の仕事の 90%は終わったも同然 @CSS Radar http://twitter.com/cssradar
  84. 84. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS FOR MUCH BETTER CODING AND SASS
  85. 85. A GOOD CSS AND SASS ARCHITECTURE
  86. 86. A GOOD CSS AND SASS ARCHITECTURE
  87. 87. A GOOD CSS AND SASS ARCHITECTURE $ sudo gem install sass $ sass --watch style:scss:style.css --style expanded
  88. 88. A GOOD CSS AND SASS ARCHITECTURE .nav-breadcrumb { > li { display: inline; & + li:before { display: inline; content: ">"; } > a { color: inherit; } } } Sass
  89. 89. A GOOD CSS AND SASS ARCHITECTURE .nav-breadcrumb > li { display: inline; } .nav-breadcrumb > li + li:before { display: inline; content: ">"; } .nav-breadcrumb > li > a { color: inherit; } CSS
  90. 90. A GOOD CSS AND SASS ARCHITECTURE $containerSize: 960px; $brandColor: #00CC11; $subColor: #CC9988; .keyvisual { $pad: 10px; padding: $pad; width: $containerSize - $pad * 2; } Sass
  91. 91. A GOOD CSS AND SASS ARCHITECTURE .keyvisual { padding: 10px; width: 940px; } CSS
  92. 92. A GOOD CSS AND SASS ARCHITECTURE // master.scss @import "resets"; // _resets.scss @import "settings"; // _settings.scss @import "common"; // _common.scss Sass
  93. 93. A GOOD CSS AND SASS ARCHITECTURE /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, ... /* # COMMON */ html, body { background: url(bg.png); font-size: 14px; } ... CSS
  94. 94. A GOOD CSS AND SASS ARCHITECTURE @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } Sass
  95. 95. A GOOD CSS AND SASS ARCHITECTURE .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } CSS
  96. 96. A GOOD CSS AND SASS ARCHITECTURE
  97. 97. A GOOD CSS AND SASS ARCHITECTURE body.application { #content { width: 100%; .form-basic { dt { float: left; margin-bottom: 0.5em; width: 20%; span { display: block; } } dd { margin-bottom: 0.5em; width: 80%; } } .form-options { dt { display: block; margin-bottom: 0.5em; span { margin-left: 0.2em; } } dd { margin-bottom: 0.5em; } } } #sidebar { display: none; } } Sass
  98. 98. A GOOD CSS AND SASS ARCHITECTURE body.application #content { width: 100%; } body.application #content .form-basic dt { float: left; margin-bottom: 0.5em; width: 20%; } body.application #content .form-basic dt span { display: block; } body.application #content .form-basic dd { margin-bottom: 0.5em; width: 80%; } body.application #content .form-options dt { display: block; margin-bottom: 0.5em; } body.application #content .form-options dt span { margin-left: 0.2em; } body.application #content .form-options dd { margin-bottom: 0.5em; } body.application #sidebar { display: none; } CSS
  99. 99. A GOOD CSS AND SASS ARCHITECTURE .css.scss
  100. 100. A GOOD CSS AND SASS ARCHITECTURE .css.scss
  101. 101. A GOOD CSS AND SASS ARCHITECTURE .css.scss
  102. 102. A GOOD CSS AND SASS ARCHITECTURE @extend
  103. 103. A GOOD CSS AND SASS ARCHITECTURE .plane { box-shadow: 0 2px 5px rgba(#000,.1); border-radius: 5px; } .box { @extend .plane; background-color: #FFF; } .box-alert { @extend .plane; background-color: #FCC; } Sass
  104. 104. A GOOD CSS AND SASS ARCHITECTURE .plane, .box, .box-alert { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: 5px; } .box { background-color: #FFF; } .box-alert { background-color: #FCC; } CSS
  105. 105. A GOOD CSS AND SASS ARCHITECTURE %plane { box-shadow: 0 2px 5px rgba(#000,.1); border-radius: 5px; } .box { @extend %plane; background-color: #FFF; } .box-alert { @extend %plane; background-color: #FCC; } Sass
  106. 106. A GOOD CSS AND SASS ARCHITECTURE .box, .box-alert { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: 5px; } .box { background-color: #FFF; } .box-alert { background-color: #FCC; } CSS
  107. 107. A GOOD CSS AND SASS ARCHITECTURE
  108. 108. A GOOD CSS AND SASS ARCHITECTURE .pic { display: inline-block; vertical-align: top; } .pic-cutout { border-radius: 50%; } .pic-photo { border: 4px solid #FFF; box-shadow: 2px 2px 3px #333;; } CSS
  109. 109. A GOOD CSS AND SASS ARCHITECTURE <!-- Author --> <img src="author.jpg" class="pic pic-cutout" alt="Hiroki Tani"> <!-- Post --> <img src="post.jpg" class="pic pic-photo" alt="ノーベルアイス">
  110. 110. A GOOD CSS AND SASS ARCHITECTURE %pic { display: inline-block; vertical-align: top; } %pic-cutout { border-radius: 50%; } %pic-photo { border: 4px solid #FFF; box-shadow: 2px 2px 3px #333;; } .my-avatar { @extend %pic; @extend %pic-cutout; } .post-photo { @extend %pic; @extend %pic-photo; } Sass
  111. 111. A GOOD CSS AND SASS ARCHITECTURE .my-avatar, .post-photo { display: inline-block; vertical-align: top; } .my-avatar { border-radius: 50%; } .post-photo { border: 4px solid white; box-shadow: 2px 2px 3px #333333; } CSS
  112. 112. A GOOD CSS AND SASS ARCHITECTURE <!-- Author --> <img src="author.jpg" class="my-avatar" alt="Hiroki Tani"> <!-- Post --> <img src="post.jpg" class="post-photo" alt="ノーベルアイス">
  113. 113. A GOOD CSS AND SASS ARCHITECTURE
  114. 114. A GOOD CSS AND SASS ARCHITECTURE %pic { } %pic-cutout { } %pic-photo { } .my-avatar { @extend %pic; @extend %pic-cutout; } .post-photo { @extend %pic; @extend %pic-photo; } .friend-avatar { @extend .pic; @extend .pic-cutout; box-shadow: 2px 2px 3px #333;; } Sass
  115. 115. A GOOD CSS AND SASS ARCHITECTURE .my-avatar, .post-photo, .friend-avatar { display: inline-block; vertical-align: top; } .my-avatar, .friend-avatar { border-radius: 50%; } .post-photo { border: 4px solid white; box-shadow: 2px 2px 3px #333333; } .friend-avatar { box-shadow: 2px 2px 3px #333333; } CSS
  116. 116. A GOOD CSS AND SASS ARCHITECTURE <!-- Author --> <img src="author.jpg" class="my-avatar" alt="Hiroki Tani"> <!-- Post --> <img src="post.jpg" class="post-photo" alt="ノーベルアイ ス"> <!-- Likers --> <img src="likers01.jpg" class="friend-avatar" alt="Satoru Hiraki"> <img src="likers02.jpg" class="friend-avatar" alt="Hayato Mizuno"> <img src="likers02.jpg" class="friend-avatar" alt="Ayumu Sato">
  117. 117. A GOOD CSS AND SASS ARCHITECTURE
  118. 118. A GOOD CSS AND SASS ARCHITECTURE Sass.btn_type2_A { @extend .clearfix; } .bnavi ul { @extend .clearfix; } .box_3col { @extend .clearfix; } .userData { @extend .clearfix; } .myData { @extend .clearfix; } .ul#popup_message { @extend .clearfix; }
  119. 119. A GOOD CSS AND SASS ARCHITECTURE .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:after,.mo nth2:after,.about:after,.sort:after,.mainList ul:after,.mainList2 li ul:after,.bnr_2col:after,.likeTool_lp:after,.flow:after,.radio:a fter,.btn_entry_2col:after,.sort2:after,ul#popup_message:after,. sort3:after,.f_circleList:after,.f_circleList a:after,.mainList3 dl:after,.mainList3 ul:after,.box_2col:after,.frame_desc dl:after { content: ""; display: block; clear: both; height: 0; } CSS
  120. 120. A GOOD CSS AND SASS ARCHITECTURE セマンティック = コンテンツ派生?
  121. 121. A GOOD CSS AND SASS ARCHITECTURE “ Nicolas Gallagher - About HTML semantics and front-end architecture http://nicolasgallagher.com/about-html-semantics-front-end-architecture http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/ どんな名前が使われようと 意味があり目的がある。 Not all semantics need to be content-derived. Class names cannot be “unsemantic”. Whatever names are being used: they have meaning, they have purpose.
  122. 122. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS FOR MUCH BETTER CODING AND SASS
  123. 123. A GOOD CSS AND SASS ARCHITECTURE 不要な子孫セレクタを減らす タグ+ID,クラスセレクタを無くす カテゴリに分類する HTMLに構造に依存したセレクタを見直す 再利用しやすいクラスセレクタに置き換える 繰り返すルールセットをモジュールにする プロパティの継承を利用する 不要な!importantを減らす プロパティの順番をそろえる
  124. 124. A GOOD CSS AND SASS ARCHITECTURE 不要な子孫セレクタを減らす タグ+ID,クラスセレクタを無くす カテゴリに分類する HTMLに構造に依存したセレクタを見直す 再利用しやすいクラスセレクタに置き換える 繰り返すルールセットをモジュールにする プロパティの継承を利用する 不要な!importantを減らす プロパティの順番をそろえる
  125. 125. A GOOD CSS AND SASS ARCHITECTURE div.header ul.list {} .widget ul li a {}
  126. 126. A GOOD CSS AND SASS ARCHITECTURE div.header ul.list {} .widget ul li a {} .header .list {} .widget li > a {}
  127. 127. A GOOD CSS AND SASS ARCHITECTURE 不要な子孫セレクタを減らす タグ+ID,クラスセレクタを無くす カテゴリに分類する HTMLに構造に依存したセレクタを見直す 再利用しやすいクラスセレクタに置き換える 繰り返すルールセットをモジュールにする プロパティの継承を利用する 不要な!importantを減らす プロパティの順番をそろえる
  128. 128. A GOOD CSS AND SASS ARCHITECTURE 不要な子孫セレクタを減らす タグ+ID,クラスセレクタを無くす カテゴリに分類する HTMLに構造に依存したセレクタを見直す 再利用しやすいクラスセレクタに置き換える 繰り返すルールセットをモジュールにする プロパティの継承を利用する 不要な!importantを減らす プロパティの順番をそろえる
  129. 129. A GOOD CSS AND SASS ARCHITECTURE 不要な子孫セレクタを減らす タグ+ID,クラスセレクタを無くす HTMLに構造に依存したセレクタを見直す 再利用しやすいクラスセレクタに置き換える 繰り返すルールセットをモジュールにする プロパティの継承を利用する 不要な!importantを減らす プロパティの順番をそろえる カテゴリに分類する
  130. 130. A GOOD CSS AND SASS ARCHITECTURE
  131. 131. A GOOD CSS AND SASS ARCHITECTURE BASE MODULE LAYOUT STATE THEME
  132. 132. A GOOD CSS AND SASS ARCHITECTURE BASE html,body,p,ul,li....
  133. 133. A GOOD CSS AND SASS ARCHITECTURE LAYOUT .l-header,.l-footer,.grid...
  134. 134. A GOOD CSS AND SASS ARCHITECTURE MODULE .btn,.nav,.msg...
  135. 135. A GOOD CSS AND SASS ARCHITECTURE STATE .is-hidden,.is-error,.is-selected
  136. 136. A GOOD CSS AND SASS ARCHITECTURE THEME .theme-spring.theme-special...
  137. 137. A GOOD CSS AND SASS ARCHITECTURE /* %BASE ==================== */ html,body {...} /* %LAYOUT ==================== */ .l-header {...} .l-footer {...} /* %MODULE ==================== */ .btn {...} .msg {...} /* %STATE ==================== */ .is-hidden {...} .is-error {...} /* %THEME ==================== */ .theme-spring {...} .theme-summer {...}
  138. 138. A GOOD CSS AND SASS ARCHITECTURE // master.scss // Base @import "base"; // _base.scss // Layout @import "layout"// _layout.scss // Module @import "module"; // _module.scss // State @import "state"; // _state.scss // Theme @import "theme"; // _theme.scss
  139. 139. A GOOD CSS AND SASS ARCHITECTURE sass/ _base.scss _layout.scss _module.scss _state.scss _theme.scss master.scss
  140. 140. A GOOD CSS AND SASS ARCHITECTURE sass/ _base.scss _layout.scss module/ _state.scss _theme.scss master.scss _navigation.scss _message.scss _button.scss
  141. 141. A GOOD CSS AND SASS ARCHITECTURE // master.scss // Base @import "base"; // Layout @import "layout" // Module @import "module/button"; @import "module/navigation"; @import "module/message"; // State @import "state"; // Theme @import "theme";
  142. 142. A GOOD CSS AND SASS ARCHITECTURE カテゴリに分類する HTMLに構造に依存したセレクタを見直す 再利用しやすいクラスセレクタに置き換える 繰り返すルールセットをモジュールにする 不要な子孫セレクタを減らす タグ+ID,クラスセレクタを無くす プロパティの継承を利用する 不要な!importantを減らす プロパティの順番をそろえる
  143. 143. A GOOD CSS AND SASS ARCHITECTURE “ 時期尚早な最適化は すべての悪の根源である Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%. Donald E, Knuth - Structured Programming With Go To Statements http://pplab.snu.ac.kr/courses/adv_pl05/papers/p261-knuth.pdf
  144. 144. A GOOD CSS AND SASS ARCHITECTURE Refactoring: Improving the Design of Existing Code http://www.amazon.com/dp/0201485672/
  145. 145. A GOOD CSS AND SASS ARCHITECTURE 3, 6, 9, 12, 15
  146. 146. A GOOD CSS AND SASS ARCHITECTURE 3, 6, 9, 12, 15
  147. 147. A GOOD CSS AND SASS ARCHITECTURE 3, 6, 12, 24, 48
  148. 148. A GOOD CSS AND SASS ARCHITECTURE 3, 6, 9, 12, 15
  149. 149. A GOOD CSS AND SASS ARCHITECTURE 3, 6, 9, 12, 15
  150. 150. A GOOD CSS AND SASS ARCHITECTURE
  151. 151. A GOOD CSS AND SASS ARCHITECTURE Starbucks Coffee - Style Guide http://www.starbucks.com/static/reference/styleguide/
  152. 152. A GOOD CSS AND SASS ARCHITECTURE Pears http://pea.rs/
  153. 153. A GOOD CSS AND SASS ARCHITECTURE BBC - GEL (Global Experience Language) http://www.bbc.co.uk/gel
  154. 154. A GOOD CSS AND SASS ARCHITECTURE
  155. 155. A GOOD CSS AND SASS ARCHITECTURE StyleDocco http://jacobrask.github.io/styledocco/
  156. 156. A GOOD CSS AND SASS ARCHITECTURE ステキなCSSスタイルガイドを生成する「styleDocco」の導 入とgrunt.jsでの自動化のメモ http://mnemoniqs.com/web/styledocco/ StyleDoccoによるCSSスタイルガイドの導入 http://ameblo.jp/ca-1pixel/entry-11453624925.html
  157. 157. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS AND SASS FOR MUCH BETTER CODING
  158. 158. A GOOD CSS AND SASS ARCHITECTURE THANK YOU! twitter.com/hiloki github.com/hiloki inkdesign.jp
  159. 159. A GOOD CSS AND SASS ARCHITECTURE CREDIT http://www.flickr.com/photos/26026745@N00/5378467111/ http://www.flickr.com/photos/bdesham/2432400623/ http://www.flickr.com/photos/franksvalli/7572634222/ http://www.flickr.com/photos/franksvalli/5173283924/ http://www.flickr.com/photos/darice/8526800143/ http://www.flickr.com/photos/hfiguiere/4802869688/

×