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

1. モダンなCSS設計パターンを考える
Modern CSS Architecture
Hiroki Tani
HTML5 Conference 2013

2. Hiroki Tani
CyberAgent, Inc.

3. http://frontrend.github.io/
Frontrend in Sapporo
Frontrend in Fukuoka
2013年12月7日
2013年1月

4. Why Architecture ?

5. 



6. 



7. 



8. #news h2 {
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;
}

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. .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. !important

16. Goals of Better CSS Architecture
- Predictable
- Reusable
- Maintainable
- Scalable
予測しやすい
再利用しやすい
保守しやすい
拡張しやすい
http://enja.studiomohawk.com/2013/07/06/css-architecture/

17. Modular CSS

18. OOCSS
Nicole Sullivan
https://github.com/stubbornella/oocss/wiki

23. OOCSS
- Separate structure and skin
構造と見た目の分離
- Separate container and content
コンテナとコンテンツの分離

24. Media object

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. <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>

28. .media {
/* Clearfix */
}
.media-image {
float: left;
margin-right: 10px;
}
.media-image img {
>
display: block;
}
.media-body {
overflow: hidden;
}

29. <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>

30. <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>

31. How to build modules ?

32. It depends.

33. Rule of Three
‘Refactoring’
http://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)

34. 3, 6

35. 3, 6, 9, 12, 15 ...

36. 3, 6, 12, 24, 48 ...

37. 3, 6, 9

38. 3, 6, 9, 12, 15 ...

40. .fontSize10 {
font-size: 10px
}
.colorRed {
color: red
}

41. <p class="fontSize18 colorRed">
入力内容に誤りがあります。
</p>

42. <p class="box radius10 fontSize18 colorRed">
入力内容に誤りがあります。
</p>

43. .colorRed {
color: red
}

44. .colorRed {
color: orange;
}
⚠

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

46. .fontSize18 {
font-size: 18px
}

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

48. .radius6 {
border-radius:
}
.radius10 {
border-radius:
}
.radius12 {
border-radius:
}
.radius14 {
border-radius:
}
6px;
10px;
12px;
14px;
⚠

49. How to maintain modules ?

50. SMACSS
Jonathan Snook
http://smacss.com/ja

51. 日本語、あります
SMACSS
Jonathan Snook
http://smacss.com/ja

52. SMACSS
- Categorization
カテゴライズ
- Naming Convention
命名規則
- Decoupling CSS from HTML
HTMLとCSSの分離

53. SMACSS Categories
- Base
- Layout
- State
- Theme
- Module

54. /* # Base */
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}

55. /* # 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;
}

56. /* # State */
.is-hidden {
display: none;
}
.is-error {
font-weight: bold;
color: red;
}
.is-tab-active {
border-bottom-color: transparent;
}

57. /* # Theme */
/* ## Spring Theme CSS */
.theme-header {
background-image: url("/theme/spring/
header.png");
}
.theme-border {
1px solid pink;
}

59. Message-box
http://cdpn.io/hKBkm

60. <div class="msg">
<p>...</p>
</div>
.msg {
display: block;
border: 1px solid #cccccc;
border-radius: 8px;
padding: 1em;
background-color: #efefef;
color: #333333;
}

62. <div class="msg msg-error">
<p>...</p>
</div>
.msg {
...
}
.msg-error {
border: 1px solid #c0392b;
background-color: #fe9282;
}

64. <div class="msg msg-success">
<p>...</p>
</div>
.msg {
...
}
.msg-success {
border: 1px solid #27ae60;
background-color: #99f3c9;
}

66. <div class="msg msg-error">
<h2>...</h2>
<p>...</p>
</div>

67. <div class="msg msg-error">
<h2>...</h2>
<p>...</p>
</div>
.msg h2 {
font-size: inherit;
font-weight: bold;
}
.msg p {
margin-top: 0.6em;
}

69. .msg h2 {
font-size: inherit;
font-weight: bold;
}
.msg ul,
.msg p {
margin-top: 0.6em;
}

70. .msg h2 {
font-size: inherit;
font-weight: bold;
}
.msg ul,
.msg p {
margin-top: 0.6em;
}
⚠

71. <div class="msg msg-error">
<h2 class="msg-title">
...
</h2>
<ul class="msg-body">
<li>...</li>
<li>...</li>
</ul>
</div>

72. .msg-title {
font-size: inherit;
font-weight: bold;
}
.msg-body {
margin-top: 0.6em;
}

73. <div class="msg msg-error">
<p class="msg-title">
...
</p>
<ul class="msg-body">
<li>...</li>
<li>...</li>
</ul>
</div>

75. <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>

76. .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;
}

77. %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;
}

79. 

80. .msg-error {
border: 1px solid #c0392b;
background-color: #fe9282;
}

82. 

83. .msg-title {
font-size: inherit;
font-weight: bold;
}
.msg-body {
margin-top: 0.6em;
}

84. .msg {
...
}
.msg-error {
border: 1px solid #c0392b;
background-color: #fe9282;
}
.msg-title {
font-size: inherit;
font-weight: bold;
}

85. BEM
Yandex
http://bem.info/

86. BEM stands for ...
- Block
- Element
- Modifier

87. Block

88. Element

89. Modifier

90. .block {
...
}
.block__element {
...
}
.block_modifier {
...
}
.block__element_modifier {
...
}

91. .nav {
...
}
.nav__item {
...
}
.nav_segmented {
...
}
.nav__item_segmented {
...
}

92. .nav {
...
}
.nav__item {
...
}
.nav--segmented {
...
}
.nav__item--segmented {
...
}
http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/

93. .msg {
...
}
.msg--error {
border: 1px solid #c0392b;
background-color: #fe9282;
}

94. .msg__title {
font-size: inherit;
font-weight: bold;
}
.msg__body {
margin-top: 0.6em;
}
.msg__title-icon {
vertical-align: -0.3em;
}

95. MCSS
- Base
- Project
- cosmetic
http://operatino.github.io/MCSS/en/

96. inuit.css
- Base
- Generic
- Objects
http://inuitcss.com/

97. SUIT
- Utilities
- Components
https://github.com/suitcss/suit

99. Front-end Styleguide

100. Starbucks Style Guide
http://www.starbucks.com/static/reference/styleguide/

101. Pattern Primer
http://patternprimer.adactio.com/

102. MailChimp Pattern Library
http://ux.mailchimp.com/patterns/

103. Twitter Bootstrap
http://getbootstrap.com

105. KSS
http://warpspire.com/kss/styleguides/

106. Kalei
http://kaleistyleguide.com/

107. StyleDocco
http://jacobrask.github.io/styledocco/

108. //
// # 見出し
//
// 説明文を書きます。マークダウン形式です。
//
// ```
// <button type="button" class="btn btn-default">
//
``` で囲んだ部分にデモのHTMLを記述します。
// </button>
// ```
.btn {
display: inline-block;
...
&:hover,
&:focus {
color: @btn-default-color;
text-decoration: none;
}
}

109. $ styledocco -n "ProjectName" css/
$ styledocco -n "ProjectName" -o "mydocs"
$ styledocco -n "ProjectName" --preprocessor "lessc" less/

111. Building Pages
🎬⚏
👤 👤


112. Building Pages
🎬⚏
👤 👤

🎬⚏



👤

113. Building Pages
Systems

🎬⚏

🎬⚏
👤 👤


👤

114. Developer vs Designer ?

115. 🎬⚏
👤 👤


116. 🎬⚏
👤 👤




117. 🎬⚏
👤 👤





118. 🎬⚏
👤 👤


 


119. 🎬⚏
👤 👤


 



120. 


🎬⚏
👤 👤
 



121. 



🎬⚏
👤 👤
 



122. Developer with Designer

123. Best Practice

124. Best Practices

125. “
どんなに多くの人が貢献したとしても
どのコードも一人で書いたようにする
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

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

127. Thanks.
- twitter.com/hiloki
- inkdesign.jp
- html5experts.jp/hiloki/

128. 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/