モダンなCSS設計パターンを考える

Modern CSS Architecture
Hiroki Tani

HTML5 Conference 2013
Hiroki Tani
CyberAgent, Inc.
http://frontrend.github.io/

Frontrend in Sapporo
Frontrend in Fukuoka

2013年12月7日
2013年1月
Why Architecture ?















#news h2 {
	 border-bottom: 1px solid black;
	 padding: 1em 0.5em;
	 font-size: 18px;
	 font-weight: bold;
}
#news h2 {
	 border-bottom: 1px solid black;
	 padding: 1em 0.5em;
	 font-size: 18px;
	 font-weight: bold;
}
#faq .title {...
#news h2 {
	 border-bottom: 1px solid black;
	 padding: 1em 0.5em;
	 font-size: 18px;
	 font-weight: bold;
}
#faq .title {...
.column_2 #inbox .list { ... }
.column_3 #inbox .list { ... }
.column_3 #inbox .list .name { ... }
.column_3 #inbox .list ...
!important
Goals of Better CSS Architecture

- Predictable
- Reusable
- Maintainable
- Scalable

予測しやすい

再利用しやすい
保守しやすい

拡張しやすい

http...
Modular CSS
OOCSS
Nicole Sullivan

https://github.com/stubbornella/oocss/wiki
OOCSS
- Separate structure and skin
構造と見た目の分離

- Separate container and content
コンテナとコンテンツの分離
Media object
<div class="media">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body...
<div class="media">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body...
<div class="media">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body...
.media {
	 /* Clearfix */
}
.media-image {
	 float: left;
	 margin-right: 10px;
}
.media-image 	 img {
>
	 display: block;...
<div class="media skin-a">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="med...
<div class="media skin-b">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="med...
How to build modules ?
It depends.
Rule of Three
‘Refactoring’

http://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)
3, 6
3, 6, 9, 12, 15 ...
3, 6, 12, 24, 48 ...
3, 6, 9
3, 6, 9, 12, 15 ...
.fontSize10 {
	 font-size: 10px
}
.colorRed {
	 color: red
}
<p class="fontSize18 colorRed">
入力内容に誤りがあります。
</p>
<p class="box radius10 fontSize18 colorRed">
入力内容に誤りがあります。
</p>
.colorRed {
	 color: red
}
.colorRed {
	 color: orange;
}

⚠
.colorRed {
	 color: orange; /* あとで直す */
}

⚠
.fontSize18 {
	 font-size: 18px
}
.fontSize18 {
	 font-size: 18px
}
@media only screen and (max-width : 320px) {
	 .fontSize18 {
	 	 font-size: 14px
	 }
}

...
.radius6 {
	 border-radius:
}
.radius10 {
	 border-radius:
}
.radius12 {
	 border-radius:
}
.radius14 {
	 border-radius:
}...
How to maintain modules ?
SMACSS
Jonathan Snook

http://smacss.com/ja
日本語、あります

SMACSS
Jonathan Snook

http://smacss.com/ja
SMACSS
- Categorization
カテゴライズ

- Naming Convention
命名規則

- Decoupling CSS from HTML
HTMLとCSSの分離
SMACSS Categories
- Base
- Layout
- State
- Theme
- Module
/* # Base */
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}
/* # Layout */
#header {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-width: 1px 0 0;
}
.l-grid {...
/* # State */
.is-hidden {
	 display: none;
}
.is-error {
	 font-weight: bold;
	 color: red;
}
.is-tab-active {
	 border-b...
/* # Theme */
/* ## Spring Theme CSS */
.theme-header {
	 background-image: url("/theme/spring/
header.png");
}
.theme-bor...
Message-box
http://cdpn.io/hKBkm
<div class="msg">
<p>...</p>
</div>
.msg {
display: block;
border: 1px solid #cccccc;
border-radius: 8px;
padding: 1em;
ba...
<div class="msg msg-error">
<p>...</p>
</div>
.msg {
...
}
.msg-error {
border: 1px solid #c0392b;
background-color: #fe92...
<div class="msg msg-success">
<p>...</p>
</div>
.msg {
...
}
.msg-success {
border: 1px solid #27ae60;
background-color: #...
<div class="msg msg-error">
<h2>...</h2>
<p>...</p>
</div>
<div class="msg msg-error">
<h2>...</h2>
<p>...</p>
</div>
.msg h2 {
font-size: inherit;
font-weight: bold;
}
.msg p {
mar...
.msg h2 {
font-size: inherit;
font-weight: bold;
}
.msg ul,
.msg p {
margin-top: 0.6em;
}
.msg h2 {
font-size: inherit;
font-weight: bold;
}
.msg ul,
.msg p {
margin-top: 0.6em;
}

⚠
<div class="msg msg-error">
<h2 class="msg-title">
...
</h2>
<ul class="msg-body">
<li>...</li>
<li>...</li>
</ul>
</div>
.msg-title {
font-size: inherit;
font-weight: bold;
}
.msg-body {
margin-top: 0.6em;
}
<div class="msg msg-error">
<p class="msg-title">
...
</p>
<ul class="msg-body">
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="msg msg-error">
<h2 class="msg-title">
<i class="msg-title-icon ico ico-label ico-alert"></i>
...
</h2>
<ul cl...
.msg-title-icon {
vertical-align: -0.3em;
}
.ico {
display: inline-block;
}
.ico-alert {
background-image: url(...);
width...
%ico {
display: inline-block;
}
%ico-alert {
background-image: url(...);
width: 24px;
height: 24px;
}
%ico-label {
margin-...

.msg-error {
border: 1px solid #c0392b;
background-color: #fe9282;
}

.msg-title {
font-size: inherit;
font-weight: bold;
}
.msg-body {
margin-top: 0.6em;
}
.msg {
...
}
.msg-error {
border: 1px solid #c0392b;
background-color: #fe9282;
}
.msg-title {
font-size: inherit;
font-we...
BEM
Yandex

http://bem.info/
BEM stands for ...
- Block
- Element
- Modifier
Block
Element
Modifier
.block {
	 ...
}
.block__element {
	 ...
}
.block_modifier {
	 ...
}
.block__element_modifier {
	 ...
}
.nav {
	 ...
}
.nav__item {
	 ...
}
.nav_segmented {
	 ...
}
.nav__item_segmented {
	 ...
}
.nav {
	 ...
}
.nav__item {
	 ...
}
.nav--segmented {
	 ...
}
.nav__item--segmented {
	 ...
}
http://enja.studiomohawk.com...
.msg {
...
}
.msg--error {
border: 1px solid #c0392b;
background-color: #fe9282;
}
.msg__title {
font-size: inherit;
font-weight: bold;
}
.msg__body {
margin-top: 0.6em;
}
.msg__title-icon {
vertical-align...
MCSS
- Base
- Project
- cosmetic

http://operatino.github.io/MCSS/en/
inuit.css
- Base
- Generic
- Objects

http://inuitcss.com/
SUIT
- Utilities
- Components

https://github.com/suitcss/suit
Front-end Styleguide
Starbucks Style Guide
http://www.starbucks.com/static/reference/styleguide/
Pattern Primer
http://patternprimer.adactio.com/
MailChimp Pattern Library
http://ux.mailchimp.com/patterns/
Twitter Bootstrap
http://getbootstrap.com
KSS
http://warpspire.com/kss/styleguides/
Kalei
http://kaleistyleguide.com/
StyleDocco
http://jacobrask.github.io/styledocco/
//
// # 見出し
//
// 説明文を書きます。マークダウン形式です。
//
// ```
// <button type="button" class="btn btn-default">
//
``` で囲んだ部分にデモのHTMLを記...
$ styledocco -n "ProjectName" css/
$ styledocco -n "ProjectName" -o "mydocs"
$ styledocco -n "ProjectName" --preprocessor ...
Building Pages

🎬⚏
👤 👤


Building Pages

🎬⚏
👤 👤



🎬⚏






👤
Building Pages
Systems



🎬⚏



🎬⚏
👤 👤





👤
Developer vs Designer ?
🎬⚏
👤 👤


🎬⚏
👤 👤






🎬⚏
👤 👤







🎬⚏
👤 👤





 

🎬⚏
👤 👤





 








🎬⚏
👤 👤

 










🎬⚏
👤 👤

 


Developer with Designer
Best Practice
Best Practices
“

どんなに多くの人が貢献したとしても
どのコードも一人で書いたようにする
All code in any code-base should look like a single person
typed it, even when many...
“

壊れない完璧な設計を求めるのではなく
壊れたときに勇気をもって修復できる設計を
- Anonymous

”
Thanks.
- twitter.com/hiloki
- inkdesign.jp
- html5experts.jp/hiloki/
Photo credit
-

http://www.flickr.com/photos/bpotstra/3490333174/sizes/l/
http://www.flickr.com/photos/bettybroadbent/370452...
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
Upcoming SlideShare
Loading in...5
×

モダンなCSS設計パターンを考える

26,718

Published on

HTML5 Conference 2013 "モダンなCSS設計パターンを考える" のセッションスライドです。

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

No Downloads
Views
Total Views
26,718
On Slideshare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
155
Comments
0
Likes
146
Embeds 0
No embeds

No notes for slide

モダンなCSS設計パターンを考える

  1. 1. モダンなCSS設計パターンを考える Modern CSS Architecture Hiroki Tani HTML5 Conference 2013
  2. 2. Hiroki Tani CyberAgent, Inc.
  3. 3. http://frontrend.github.io/ Frontrend in Sapporo Frontrend in Fukuoka 2013年12月7日 2013年1月
  4. 4. Why Architecture ?
  5. 5.   
  6. 6.   
  7. 7.   
  8. 8. #news h2 { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
  9. 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; }
  10. 10. #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; }
  11. 11. .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 } ... } { ... } { ... }
  12. 12. !important
  13. 13. Goals of Better CSS Architecture - Predictable - Reusable - Maintainable - Scalable 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい http://enja.studiomohawk.com/2013/07/06/css-architecture/
  14. 14. Modular CSS
  15. 15. OOCSS Nicole Sullivan https://github.com/stubbornella/oocss/wiki
  16. 16. OOCSS - Separate structure and skin 構造と見た目の分離 - Separate container and content コンテナとコンテンツの分離
  17. 17. Media object
  18. 18. <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>
  19. 19. <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>
  20. 20. <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>
  21. 21. .media { /* Clearfix */ } .media-image { float: left; margin-right: 10px; } .media-image img { > display: block; } .media-body { overflow: hidden; }
  22. 22. <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>
  23. 23. <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>
  24. 24. How to build modules ?
  25. 25. It depends.
  26. 26. Rule of Three ‘Refactoring’ http://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)
  27. 27. 3, 6
  28. 28. 3, 6, 9, 12, 15 ...
  29. 29. 3, 6, 12, 24, 48 ...
  30. 30. 3, 6, 9
  31. 31. 3, 6, 9, 12, 15 ...
  32. 32. .fontSize10 { font-size: 10px } .colorRed { color: red }
  33. 33. <p class="fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
  34. 34. <p class="box radius10 fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
  35. 35. .colorRed { color: red }
  36. 36. .colorRed { color: orange; } ⚠
  37. 37. .colorRed { color: orange; /* あとで直す */ } ⚠
  38. 38. .fontSize18 { font-size: 18px }
  39. 39. .fontSize18 { font-size: 18px } @media only screen and (max-width : 320px) { .fontSize18 { font-size: 14px } } ⚠
  40. 40. .radius6 { border-radius: } .radius10 { border-radius: } .radius12 { border-radius: } .radius14 { border-radius: } 6px; 10px; 12px; 14px; ⚠
  41. 41. How to maintain modules ?
  42. 42. SMACSS Jonathan Snook http://smacss.com/ja
  43. 43. 日本語、あります SMACSS Jonathan Snook http://smacss.com/ja
  44. 44. SMACSS - Categorization カテゴライズ - Naming Convention 命名規則 - Decoupling CSS from HTML HTMLとCSSの分離
  45. 45. SMACSS Categories - Base - Layout - State - Theme - Module
  46. 46. /* # Base */ body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
  47. 47. /* # 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; }
  48. 48. /* # State */ .is-hidden { display: none; } .is-error { font-weight: bold; color: red; } .is-tab-active { border-bottom-color: transparent; }
  49. 49. /* # Theme */ /* ## Spring Theme CSS */ .theme-header { background-image: url("/theme/spring/ header.png"); } .theme-border { 1px solid pink; }
  50. 50. Message-box http://cdpn.io/hKBkm
  51. 51. <div class="msg"> <p>...</p> </div> .msg { display: block; border: 1px solid #cccccc; border-radius: 8px; padding: 1em; background-color: #efefef; color: #333333; }
  52. 52. <div class="msg msg-error"> <p>...</p> </div> .msg { ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
  53. 53. <div class="msg msg-success"> <p>...</p> </div> .msg { ... } .msg-success { border: 1px solid #27ae60; background-color: #99f3c9; }
  54. 54. <div class="msg msg-error"> <h2>...</h2> <p>...</p> </div>
  55. 55. <div class="msg msg-error"> <h2>...</h2> <p>...</p> </div> .msg h2 { font-size: inherit; font-weight: bold; } .msg p { margin-top: 0.6em; }
  56. 56. .msg h2 { font-size: inherit; font-weight: bold; } .msg ul, .msg p { margin-top: 0.6em; }
  57. 57. .msg h2 { font-size: inherit; font-weight: bold; } .msg ul, .msg p { margin-top: 0.6em; } ⚠
  58. 58. <div class="msg msg-error"> <h2 class="msg-title"> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
  59. 59. .msg-title { font-size: inherit; font-weight: bold; } .msg-body { margin-top: 0.6em; }
  60. 60. <div class="msg msg-error"> <p class="msg-title"> ... </p> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
  61. 61. <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>
  62. 62. .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; }
  63. 63. %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; }
  64. 64.
  65. 65. .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
  66. 66.
  67. 67. .msg-title { font-size: inherit; font-weight: bold; } .msg-body { margin-top: 0.6em; }
  68. 68. .msg { ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; } .msg-title { font-size: inherit; font-weight: bold; }
  69. 69. BEM Yandex http://bem.info/
  70. 70. BEM stands for ... - Block - Element - Modifier
  71. 71. Block
  72. 72. Element
  73. 73. Modifier
  74. 74. .block { ... } .block__element { ... } .block_modifier { ... } .block__element_modifier { ... }
  75. 75. .nav { ... } .nav__item { ... } .nav_segmented { ... } .nav__item_segmented { ... }
  76. 76. .nav { ... } .nav__item { ... } .nav--segmented { ... } .nav__item--segmented { ... } http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
  77. 77. .msg { ... } .msg--error { border: 1px solid #c0392b; background-color: #fe9282; }
  78. 78. .msg__title { font-size: inherit; font-weight: bold; } .msg__body { margin-top: 0.6em; } .msg__title-icon { vertical-align: -0.3em; }
  79. 79. MCSS - Base - Project - cosmetic http://operatino.github.io/MCSS/en/
  80. 80. inuit.css - Base - Generic - Objects http://inuitcss.com/
  81. 81. SUIT - Utilities - Components https://github.com/suitcss/suit
  82. 82. Front-end Styleguide
  83. 83. Starbucks Style Guide http://www.starbucks.com/static/reference/styleguide/
  84. 84. Pattern Primer http://patternprimer.adactio.com/
  85. 85. MailChimp Pattern Library http://ux.mailchimp.com/patterns/
  86. 86. Twitter Bootstrap http://getbootstrap.com
  87. 87. KSS http://warpspire.com/kss/styleguides/
  88. 88. Kalei http://kaleistyleguide.com/
  89. 89. StyleDocco http://jacobrask.github.io/styledocco/
  90. 90. // // # 見出し // // 説明文を書きます。マークダウン形式です。 // // ``` // <button type="button" class="btn btn-default"> // ``` で囲んだ部分にデモのHTMLを記述します。 // </button> // ``` .btn { display: inline-block; ... &:hover, &:focus { color: @btn-default-color; text-decoration: none; } }
  91. 91. $ styledocco -n "ProjectName" css/ $ styledocco -n "ProjectName" -o "mydocs" $ styledocco -n "ProjectName" --preprocessor "lessc" less/
  92. 92. Building Pages 🎬⚏ 👤 👤 
  93. 93. Building Pages 🎬⚏ 👤 👤  🎬⚏    👤
  94. 94. Building Pages Systems  🎬⚏  🎬⚏ 👤 👤   👤
  95. 95. Developer vs Designer ?
  96. 96. 🎬⚏ 👤 👤 
  97. 97. 🎬⚏ 👤 👤   
  98. 98. 🎬⚏ 👤 👤    
  99. 99. 🎬⚏ 👤 👤     
  100. 100. 🎬⚏ 👤 👤      
  101. 101.    🎬⚏ 👤 👤    
  102. 102.     🎬⚏ 👤 👤    
  103. 103. Developer with Designer
  104. 104. Best Practice
  105. 105. Best Practices
  106. 106. “ どんなに多くの人が貢献したとしても どのコードも一人で書いたようにする All code in any code-base should look like a single person typed it, even when many people are contributing to it. ” - Idiomatic CSS https://github.com/necolas/idiomatic-css
  107. 107. “ 壊れない完璧な設計を求めるのではなく 壊れたときに勇気をもって修復できる設計を - Anonymous ”
  108. 108. Thanks. - twitter.com/hiloki - inkdesign.jp - html5experts.jp/hiloki/
  109. 109. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×