モダンなCSS設計パターンを考える
89 likes16,024 views
The document summarizes Hiroki Tani's presentation at the QCon Tokyo 2014 conference on modern CSS architecture. Some key points discussed include: - Adopting modular approaches like OOCSS and SMACSS to separate structure from skin/style and improve maintainability. - Using techniques like BEM naming to further decouple CSS from HTML. - Developing reusable CSS modules and components with flexible modifiers. - Maintaining styleguides and pattern libraries for consistent front-end development.
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to モダンなCSS設計パターンを考える (20)
More from 拓樹 谷 (7)
Recently uploaded (20)
モダンなCSS設計パターンを考える
- 1. QCon Tokyo 2014 Conference Modern CSS Architecture Hiroki Tani モダンなCSS設計パターンを考える
- 7. #news h2 { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
- 8. #news h2 { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } ! #faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
- 9. #news h2 { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } ! #faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } ! #service .feature .title { border: 1px solid black; padding: 0.5em; font-size: 16px; }
- 10. .column_2 #inbox .list { ... } .column_3 #inbox .list { ... } .column_3 #inbox .list .name { ... } .column_3 #inbox .list .name p { ... } .column_3 #inbox .list .name.reply { ... } .column_3 #inbox .list .name.reply a { ... } body#top .column_3 #inbox .list.left { ... }
- 11. !important
- 15. Goals of Better CSS Architecture -Predictable -Reusable -Maintainable -Scalable http://article.enja.io/articles/css-architecture.html 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい
- 16. Modular CSS
- 22. OOCSS -Separate structure and skin -Separate container and content 構造と見た目の分離 コンテナとコンテンツの分離
- 23. Media object
- 24. <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>
- 25. <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>
- 26. <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>
- 27. .media { /* Clearfix */ } .media-image { float: left; margin-right: 10px; } .media-image > img { display: block; } .media-body { overflow: hidden; }
- 28. <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>
- 29. <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>
- 30. ?How to build modules
- 31. It depends.
- 33. 3, 6
- 34. 3, 6, 9, 12, 15 ...
- 35. 3, 6, 12, 24, 48 ...
- 36. 3, 6, 9
- 37. 3, 6, 9, 12, 15 ...
- 39. .fontSize10 { font-size: 10px } .colorRed { color: red }
- 41. <p class="box radius10 fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
- 42. .fontSize18 { font-size: 18px }
- 43. .fontSize18 { font-size: 18px } ! @media only screen and (max-width : 320px) { .fontSize18 { font-size: 14px } } ⚠
- 44. .colorRed { color: red }
- 45. .colorRed { color: orange; } ⚠
- 46. .colorRed { color: orange; /* あとで直す */ } ⚠
- 47. ⚠
- 48. ?How to maintain modules
- 50. SMACSS -Categorization -Naming Convention -Decoupling CSS from HTML カテゴライズ 命名規則 HTMLとCSSの分離
- 52. /* # Base */ body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
- 53. /* # Layout */ #header { 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; }
- 54. /* # State */ .is-hidden { display: none; } .is-error { font-weight: bold; color: red; } .is-tab-active { border-bottom-color: transparent; }
- 55. /* # Theme */ /* ## Spring Theme CSS */ .theme-header { background-image: url("/theme/spring/ header.png"); } .theme-border { 1px solid pink; }
- 58. <div class="msg"> <p>...</p> </div> .msg { display: block; border: 1px solid #cccccc; border-radius: 8px; padding: 1em; background-color: #efefef; color: #333333; }
- 60. <div class="msg msg-error"> <p>...</p> </div> .msg { ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
- 62. <div class="msg msg-success"> <p>...</p> </div> .msg { ... } .msg-success { border: 1px solid #27ae60; background-color: #99f3c9; }
- 65. <div class="msg msg-error"> <h2>...</h2> <p>...</p> </div> .msg h2 { font-size: inherit; font-weight: bold; } ! .msg p { margin-top: 0.6em; }
- 67. .msg h2 { font-size: inherit; font-weight: bold; } ! .msg ul, .msg p { margin-top: 0.6em; } ⚠
- 68. <div class="msg msg-error"> <h2 class="msg-title"> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
- 69. .msg-title { font-size: inherit; font-weight: bold; } ! .msg-body { margin-top: 0.6em; }
- 70. <div class="msg msg-error"> <p class="msg-title"> ... </p> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
- 72. <div class="msg msg-error"> <h2 class="msg-title"> <i class="msg-title-icon ico ico-label ico-alert"></i> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
- 73. .msg-title-icon { vertical-align: -0.3em; } ! .ico { display: inline-block; } ! .ico-alert { background-image: url(...); width: 24px; height: 24px; } ! .ico-label { margin-right: 0.3em; }
- 74. %ico { display: inline-block; } ! %ico-alert { background-image: url(...); width: 24px; height: 24px; } ! %ico-label { margin-right: 0.3em; } ! .msg-error-icon { vertical-align: -0.3em; @extend %ico; @extend %ico-alert; @extend %ico-label; }
- 76. ! .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
- 78. .msg-title { font-size: inherit; font-weight: bold; } .msg-body { margin-top: 0.6em; }
- 79. .msg { ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; } .msg-title { font-size: inherit; font-weight: bold; }
- 81. BEM stands for ... -Block -Element -Modifier
- 82. Block
- 83. Element
- 84. Modifier
- 85. .block { ... } .block__element { ... } .block_modifier { ... } .block__element_modifier { ... }
- 86. .nav { ... } .nav__item { ... } .nav_segmented { ... } .nav__item_segmented { ... }
- 87. .nav { ... } .nav__item { ... } .nav--segmented { ... } .nav__item--segmented { ... } http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
- 88. .msg { ... } .msg--error { border: 1px solid #c0392b; background-color: #fe9282; }
- 89. .msg__title { font-size: inherit; font-weight: bold; } .msg__body { margin-top: 0.6em; } .msg__title-icon { vertical-align: -0.3em; }
- 94. Starbucks Style Guide http://www.starbucks.com/static/reference/styleguide/
- 100. Front-end Styleguide
- 106. // // # 見出し // // 説明文を書きます。マークダウン形式です。 // // ``` // <button type="button" class="btn btn-default"> // ``` で囲んだ部分にデモのHTMLを記述します。 // </button> // ``` ! .btn { display: inline-block; ... &:hover, &:focus { color: @btn-default-color; text-decoration: none; } }
- 107. $ styledocco -n "ProjectName" css/ $ styledocco -n "ProjectName" -o "mydocs" $ styledocco -n "ProjectName" --preprocessor "lessc" less/
- 110. ⚏🎬 👤👤 ⚏🎬 👤 Building Pages Systems
- 112. Developer vs Designer ?
- 113. ⚏🎬 👤👤
- 115. Best Practice
- 116. Best Practices
- 117. どんなに多くの人が貢献したとしても どのコードも一人で書いたようにする https://github.com/necolas/idiomatic-css - Idiomatic CSS All code in any code-base should look like a single person typed it, even when many people are contributing to it. “ ”
- 119. Thanks. - twitter.com/hiloki - inkdesign.jp - slideshare.net/hiloki
- 120. Photo credit - http://www.flickr.com/photos/bpotstra/3490333174/sizes/l/ - http://www.flickr.com/photos/bettybroadbent/3704523854/sizes/o/ - http://www.flickr.com/photos/drewmaughan/8209503226/sizes/l/ - http://www.flickr.com/photos/biodork/6849406792/ - http://www.flickr.com/photos/43266097@N03/9444574320/sizes/l/ - http://www.flickr.com/photos/90585146@N08/8234225693/sizes/l/ - http://www.flickr.com/photos/lwr/6778863776/sizes/l/ - http://www.flickr.com/photos/jezpage/4696962046/ - http://www.flickr.com/photos/april-mo/8485249298/sizes/l/ - http://www.flickr.com/photos/4st4roth/2366615948/ - http://www.flickr.com/photos/sharman/4570412801/sizes/l/ - http://www.flickr.com/photos/kaptainkobold/3771497484/ - http://www.flickr.com/photos/laurie_pink/2549598674/sizes/l/ - http://www.flickr.com/photos/dansdata/3266946102/ - http://www.flickr.com/photos/ochre_jelly/6839227477/sizes/l/ - http://www.flickr.com/photos/in-duce/2232109985/sizes/o/ - http://www.flickr.com/photos/pgoyette/5911926699/sizes/z/ - http://www.flickr.com/photos/conradoplg/10091603396/sizes/l/ - http://www.flickr.com/photos/kaptainkobold/4441509147/sizes/l/