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

45,112 views
46,361 views

Published on

TalkNote Vol.8 発表スライド

2013/06/30 追記:
本スライドで紹介しているSMACSS日本語訳(電子書籍)が発売されたので、興味のある方はご覧ください。
SMACSS
https://smacss.com/

Published in: Technology, Education
1 Comment
311 Likes
Statistics
Notes
  • More than 5000 IT Certified ( SAP,Oracle,Mainframe,Microsoft and IBM Technologies etc...)Consultants registered. Register for IT courses at http://www.todaycourses.com Most of our companies will help you in processing H1B Visa, Work Permit and Job Placements
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
45,112
On SlideShare
0
From Embeds
0
Number of Embeds
12,127
Actions
Shares
0
Downloads
74
Comments
1
Likes
311
Embeds 0
No embeds

No notes for slide

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

  1. 1. A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSS AND SASSFOR MUCH BETTER CODINGTalknote 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 ARCHITECTUREDESKTOP APP MOBILE APP / WEB MOBILE APP
  5. 5. A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSS AND SASSFOR MUCH BETTER CODING
  6. 6. A GOOD CSS AND SASS ARCHITECTURECSS
  7. 7. A GOOD CSS AND SASS ARCHITECTURECSSちゃんと設計しろ!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 ARCHITECTURECSS
  14. 14. A GOOD CSS AND SASS ARCHITECTURECSS HTML
  15. 15. A GOOD CSS AND SASS ARCHITECTURECSS 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 #sidebarwidth: 200px; // for #sidebartext-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 { // = #sidebarpadding: 6px 0;width: 200px;font-size: 16px; // Default font-size}
  27. 27. A GOOD CSS AND SASS ARCHITECTURECSSは、簡単に書ける
  28. 28. A GOOD CSS AND SASS ARCHITECTURECSSは、簡単に書ける冗長に、それらしく
  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 ARCHITECTUREARCHITECTUREA GOOD CSSFOR MUCH BETTER CODINGAND SASS
  41. 41. A GOOD CSS AND SASS ARCHITECTURECSS Architecturehttp://philipwalton.com/articles/css-architecture/
  42. 42. A GOOD CSS AND SASS ARCHITECTUREPREDICTABLE予測しやすい
  43. 43. A GOOD CSS AND SASS ARCHITECTUREREUSABLE再利用しやすい
  44. 44. A GOOD CSS AND SASS ARCHITECTUREMAINTAINABLE保守しやすい
  45. 45. A GOOD CSS AND SASS ARCHITECTURESCALABLE拡張しやすい
  46. 46. A GOOD CSS AND SASS ARCHITECTUREPREDICTABLE 予測しやすいREUSABLE 再利用しやすいMAINTAINABLE 保守しやすいSCALABLE 拡張しやすい
  47. 47. A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREFOR MUCH BETTER CODINGAND 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 sitamet 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 ARCHITECTUREMODULARモジュール
  57. 57. A GOOD CSS AND SASS ARCHITECTURENicole Sullivan - OOCSShttps://github.com/stubbornella/oocss
  58. 58. A GOOD CSS AND SASS ARCHITECTUREJonathan Snook - SMACSShttp://smacss.com/
  59. 59. A GOOD CSS AND SASS ARCHITECTUREJonathan Snook - SMACSShttp://smacss.com/
  60. 60. A GOOD CSS AND SASS ARCHITECTUREDE-COUPLING疎結合NAME CONVENTION命名規則
  61. 61. A GOOD CSS AND SASS ARCHITECTUREDE-COUPLING装飾 構造コンテンツ コンテナーHTML CSS
  62. 62. A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSSFOR MUCH BETTER CODINGAND 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 sitamet 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 { }ModifierSub-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 ARCHITECTUREYandex - BEMhttp://bem.info/
  79. 79. A GOOD CSS AND SASS ARCHITECTUREBlock Element Modifier
  80. 80. A GOOD CSS AND SASS ARCHITECTURE.block__element_modifier {}the BEM SYSTEM
  81. 81. A GOOD CSS AND SASS ARCHITECTUREInfluenced by the BEM SYSTEM.component-name--modifier {}.component-name__sub-component {}Nicolas Gallagher - About HTML semantics and front-end architecturehttp://nicolasgallagher.com/about-html-semantics-front-end-architecturehttp://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 Radarhttp://twitter.com/cssradar
  84. 84. A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSSFOR MUCH BETTER CODINGAND 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.scssSass
  93. 93. A GOOD CSS AND SASS ARCHITECTURE/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: 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 ARCHITECTUREbody.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 ARCHITECTUREbody.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="HirokiTani"><!-- 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="AyumuSato">
  117. 117. A GOOD CSS AND SASS ARCHITECTURE
  118. 118. A GOOD CSS AND SASS ARCHITECTURESass.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,.bnaviul:after,.box_3col:after,.userDatadl:after,.likeTool:after,.likeUser ul:after,.commentUserul:after,.userData:after,.circleList lia:after,.time_count:after,.pagingul:after,.myData:after,.status:after,.bar:after,.month:after,.month2:after,.about:after,.sort:after,.mainListul:after,.mainList2 liul: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_circleList a:after,.mainList3dl:after,.mainList3 ul:after,.box_2col:after,.frame_descdl: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 architecturehttp://nicolasgallagher.com/about-html-semantics-front-end-architecturehttp://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, theyhave purpose.
  122. 122. A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSSFOR MUCH BETTER CODINGAND 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 ARCHITECTUREdiv.header ul.list {}.widget ul li a {}
  126. 126. A GOOD CSS AND SASS ARCHITECTUREdiv.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 ARCHITECTUREBASEMODULELAYOUTSTATETHEME
  132. 132. A GOOD CSS AND SASS ARCHITECTUREBASEhtml,body,p,ul,li....
  133. 133. A GOOD CSS AND SASS ARCHITECTURELAYOUT.l-header,.l-footer,.grid...
  134. 134. A GOOD CSS AND SASS ARCHITECTUREMODULE.btn,.nav,.msg...
  135. 135. A GOOD CSS AND SASS ARCHITECTURESTATE.is-hidden,.is-error,.is-selected
  136. 136. A GOOD CSS AND SASS ARCHITECTURETHEME.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 ARCHITECTUREsass/_base.scss_layout.scss_module.scss_state.scss_theme.scssmaster.scss
  140. 140. A GOOD CSS AND SASS ARCHITECTUREsass/_base.scss_layout.scssmodule/_state.scss_theme.scssmaster.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, orworrying about, the speed of noncritical parts of their programs, andthese attempts at efficiency actually have a strong negative impact whendebugging and maintenance are considered. We should forget aboutsmall efficiencies, say about 97% of the time: premature optimization isthe root of all evil. Yet we should not pass up our opportunities in thatcritical 3%.Donald E, Knuth - Structured Programming With Go To Statementshttp://pplab.snu.ac.kr/courses/adv_pl05/papers/p261-knuth.pdf
  144. 144. A GOOD CSS AND SASS ARCHITECTURERefactoring: Improving the Design of Existing Codehttp://www.amazon.com/dp/0201485672/
  145. 145. A GOOD CSS AND SASS ARCHITECTURE3, 6, 9, 12, 15
  146. 146. A GOOD CSS AND SASS ARCHITECTURE3, 6, 9, 12, 15
  147. 147. A GOOD CSS AND SASS ARCHITECTURE3, 6, 12, 24, 48
  148. 148. A GOOD CSS AND SASS ARCHITECTURE3, 6, 9, 12, 15
  149. 149. A GOOD CSS AND SASS ARCHITECTURE3, 6, 9, 12, 15
  150. 150. A GOOD CSS AND SASS ARCHITECTURE
  151. 151. A GOOD CSS AND SASS ARCHITECTUREStarbucks Coffee - Style Guidehttp://www.starbucks.com/static/reference/styleguide/
  152. 152. A GOOD CSS AND SASS ARCHITECTUREPearshttp://pea.rs/
  153. 153. A GOOD CSS AND SASS ARCHITECTUREBBC - 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 ARCHITECTUREStyleDoccohttp://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 ARCHITECTUREARCHITECTUREA GOOD CSS AND SASSFOR MUCH BETTER CODING
  158. 158. A GOOD CSS AND SASS ARCHITECTURETHANK YOU!twitter.com/hilokigithub.com/hilokiinkdesign.jp
  159. 159. A GOOD CSS AND SASS ARCHITECTURECREDIThttp://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/

×