QCon Tokyo 2014 Conference
Modern CSS Architecture
Hiroki Tani
モダンなCSS設計パターンを考える
Hiroki Tani
Front-end Engineer
CyberAgent, Inc.
?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 ...
#news h2 {	
	 border-bottom: 1px solid black;	
	 padding: 1em 0.5em;	
	 font-size: 18px;	
	 font-weight: bold;	
}	
!
#faq ...
.column_2 #inbox .list { ... }	
.column_3 #inbox .list { ... }	
.column_3 #inbox .list .name { ... }	
.column_3 #inbox .li...
!important
Goals of Better CSS Architecture
-Predictable
-Reusable
-Maintainable
-Scalable
http://article.enja.io/articles/css-archit...
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-...
<div class="media">	
	 <div class="media-image">	
	 	 <img src="/img/seminar/15/tani.jpg">	
	 </div>	
	 <div class="media-...
<div class="media">	
	 <div class="media-image">	
	 	 <img src="/img/seminar/15/tani.jpg">	
	 </div>	
	 <div class="media-...
.media {	
	 /* Clearfix */	
}	
.media-image {	
	 float: left;	
	 margin-right: 10px;	
}	
.media-image 	> img {	
	 display:...
<div class="media skin-a">	
	 <div class="media-image">	
	 	 <img src="/img/seminar/15/tani.jpg">	
	 </div>	
	 <div class=...
<div class="media skin-b">	
	 <div class="media-image">	
	 	 <img src="/img/seminar/15/tani.jpg">	
	 </div>	
	 <div class=...
?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>
.fontSize18 {	
	 font-size: 18px	
}
.fontSize18 {	
	 font-size: 18px	
}	
!
@media only screen and (max-width : 320px) {	
	 .fontSize18 {	
	 	 font-size: 14px	...
.colorRed {	
	 color: red	
}
.colorRed {	
	 color: orange;	
}
⚠
.colorRed {	
	 color: orange; /* あとで直す */	
}
⚠
⚠
?How to maintain modules
SMACSS
Jonathan Snook
http://smacss.com/ja
日本語、あります
SMACSS
-Categorization
-Naming Convention
-Decoupling CSS from HTML
カテゴライズ
命名規則
HTMLとCSSの分離
SMACSS Categories
-Base
-Layout
-Module
-State
-Theme
/* # 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;	
}	
...
/* # State */	
.is-hidden {	
	 display: none;	
}	
.is-error {	
	 font-weight: bold;	
	 color: red;	
}	
.is-tab-active {	
	...
/* # Theme */	
/* ## Spring Theme CSS */	
.theme-header {	
	 background-image: url("/theme/spring/
header.png");	
}	
.them...
Message-box
http://cdpn.io/hKBkm
<div class="msg">	
<p>...</p>	
</div>
.msg {	
display: block;	
border: 1px solid #cccccc;	
border-radius: 8px;	
padding: 1...
<div class="msg msg-error">	
<p>...</p>	
</div>
.msg {	
...	
}	
.msg-error {	
border: 1px solid #c0392b;	
background-color...
<div class="msg msg-success">	
<p>...</p>	
</div>
.msg {	
...	
}	
.msg-success {	
border: 1px solid #27ae60;	
background-c...
<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;	
}	
!
.ms...
.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>	...
.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 class="msg msg-error">	
<h2 class="msg-title">	
<i class="msg-title-icon ico ico-label ico-alert"></i>	
...	
</h2>	
<...
.msg-title-icon {	
vertical-align: -0.3em;	
}	
!
.ico {	
display: inline-block;	
}	
!
.ico-alert {	
background-image: url(...
%ico {	
display: inline-block;	
}	
!
%ico-alert {	
background-image: url(...);	
width: 24px;	
height: 24px;	
}	
!
%ico-lab...
!
.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;...
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.studi...
.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 {	
vertic...
MCSS
-Base
-Project
-cosmetic
http://operatino.github.io/MCSS/en/
FLOCSS
-Foundation
-Layout
-Object
https://github.com/hiloki/flocss
-Component
-Project
-Utility
Front-end Styleguide
Starbucks Style Guide
http://www.starbucks.com/static/reference/styleguide/
MailChimp Pattern Library
http://ux.mailchimp.com/patterns/
Twitter Bootstrap
http://getbootstrap.com
A Pattern Apart
http://patterns.alistapart.com/
http://alistapart.com/blog/post/getting-started-with-pattern-libraries
Code Example view
http://alistapart.com/blog/post/getting-started-with-pattern-libraries
Patchwork view
Front-end Styleguide
Front-end Styleguide
Living
KSS
http://warpspire.com/kss/styleguides/
Kalei
http://kaleistyleguide.com/
StyleDocco
http://jacobrask.github.io/styledocco/
//	
// # 見出し	
//	
// 説明文を書きます。マークダウン形式です。	
//	
// ```	
// <button type="button" class="btn btn-default">	
// ``` で囲んだ部分にデモ...
$ styledocco -n "ProjectName" css/	
$ styledocco -n "ProjectName" -o "mydocs"	
$ styledocco -n "ProjectName" --preprocesso...
http://d.pr/v/46BF
⚏🎬 👤👤 ⚏🎬
👤
Building Pages
Systems
Styleguide Driven Development
http://www.stubbornella.org/content/2014/04/09/style-guide-driven-development/
Developer vs Designer ?
⚏🎬 👤👤
Developer with Designer
Best Practice
Best Practices
どんなに多くの人が貢献したとしても
どのコードも一人で書いたようにする
https://github.com/necolas/idiomatic-css
- Idiomatic CSS
All code in any code-base sho...
壊れない完璧な設計を求めるのではなく
壊れたときに勇気をもって修復できる設計を
“
”
- Anonymous
Thanks.
- twitter.com/hiloki
- inkdesign.jp
- slideshare.net/hiloki
Photo credit
- http://www.flickr.com/photos/bpotstra/3490333174/sizes/l/
- http://www.flickr.com/photos/bettybroadbent/37045...
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
モダンな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設計パターンを考える

9,430

Published on

HTML5 Conference 2013 "モダンなCSS設計パターンを考える" の一部を改変したQCon Tokyo 2014 版スライドです。

Published in: Design
1 Comment
79 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,430
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
60
Comments
1
Likes
79
Embeds 0
No embeds

No notes for slide

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

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

×