49. A GOOD CSS AND SASS ARCHITECTURE
#main-nav ul li ul { }
#content article h1:first-child { }
#sidebar > div > h3 + p { }
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. A GOOD CSS AND SASS ARCHITECTURE
.widget {}
.widget .title {}
.widget .content {}
.widget .action {}
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 sit
amet euismod ligula ornare.
Vivamus elementum accumsan dignissim.
<button class="action">Click Me!</button>
</div>
</div>
53. A GOOD CSS AND SASS ARCHITECTURE
.widget .title {
background-color: green;
color: #FFFFFF;
}
.widget .title
54. A GOOD CSS AND SASS ARCHITECTURE
.title {
border-left: 10px solid black;
padding: 5px 10px;
font-size: 24px;
}
.title
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. A GOOD CSS AND SASS ARCHITECTURE
MODULAR
モジュール
57. A GOOD CSS AND SASS ARCHITECTURE
Nicole Sullivan - OOCSS
https://github.com/stubbornella/oocss
58. A GOOD CSS AND SASS ARCHITECTURE
Jonathan Snook - SMACSS
http://smacss.com/
59. A GOOD CSS AND SASS ARCHITECTURE
Jonathan Snook - SMACSS
http://smacss.com/
60. A GOOD CSS AND SASS ARCHITECTURE
DE-COUPLING
疎結合
NAME CONVENTION
命名規則
61. A GOOD CSS AND SASS ARCHITECTURE
DE-COUPLING
装飾 構造
コンテンツ コンテナー
HTML CSS
62. A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS
FOR MUCH BETTER CODING
AND SASS
63. A GOOD CSS AND SASS ARCHITECTURE
/* Bad */
.widget { }
#sidebar .widget { }
/* Good */
.widget { }
.widget-sidebar { }
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. A GOOD CSS AND SASS ARCHITECTURE
/* Grenade */
#main-nav ul li ul { }
/* Sniper Rifle */
.subnav { }
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. 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. A GOOD CSS AND SASS ARCHITECTURE
/* High risk */
.widget { }
.widget .title { }
/* Low risk */
.widget { }
.widget-title { }
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 sit
amet euismod ligula ornare.
Vivamus elementum accumsan dignissim.
<button class="widget-action">Click Me!</
button>
</div>
</div>
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
72. A GOOD CSS AND SASS ARCHITECTURE
.widget { }
.widget-sidebar { }
.widget-title { }
73. A GOOD CSS AND SASS ARCHITECTURE
.widget { } .widget
.widget-sidebar
.widget
.widget-title
.widget-sidebar { }
.widget-title { }
74. A GOOD CSS AND SASS ARCHITECTURE
.widget { } .widget
.widget-sidebar
.widget
.widget-title
.widget-sidebar { }
.widget-title { }
Modifier
Sub-Component
75. A GOOD CSS AND SASS ARCHITECTURE
.widget-sidebar { }
.widget { }
76. A GOOD CSS AND SASS ARCHITECTURE
.widget-sidebar { }
.widget { }
Modifier OR Sub-Component ?
77. A GOOD CSS AND SASS ARCHITECTURE
.widget-sidebar { }
.widget { }
Modifier OR Sub-Component ?
.widget-sidebar .widget
.widget-sidebar
78. A GOOD CSS AND SASS ARCHITECTURE
Yandex - BEM
http://bem.info/
79. A GOOD CSS AND SASS ARCHITECTURE
Block Element Modifier
80. A GOOD CSS AND SASS ARCHITECTURE
.block__element_modifier {}
the BEM SYSTEM
81. A GOOD CSS AND SASS ARCHITECTURE
Influenced by the BEM SYSTEM
.component-name--modifier {}
.component-name__sub-component {}
Nicolas Gallagher - About HTML semantics and front-end architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture
http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
82. A GOOD CSS AND SASS ARCHITECTURE
/* Modifier */
.widget--sidebar { }
/* Sub-Component */
.widget__title { }
83. A GOOD CSS AND SASS ARCHITECTURE
“
class名が決まれば
我々の仕事の
90%は終わったも同然
@CSS Radar
http://twitter.com/cssradar
84. A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS
FOR MUCH BETTER CODING
AND SASS
87. A GOOD CSS AND SASS ARCHITECTURE
$ sudo gem install sass
$ sass --watch style:scss:style.css --style expanded
88. A GOOD CSS AND SASS ARCHITECTURE
.nav-breadcrumb {
> li {
display: inline;
& + li:before {
display: inline;
content: ">";
}
> a {
color: inherit;
}
}
}
Sass
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. A GOOD CSS AND SASS ARCHITECTURE
$containerSize: 960px;
$brandColor: #00CC11;
$subColor: #CC9988;
.keyvisual {
$pad: 10px;
padding: $pad;
width: $containerSize - $pad * 2;
}
Sass
91. A GOOD CSS AND SASS ARCHITECTURE
.keyvisual {
padding: 10px;
width: 940px;
}
CSS
92. A GOOD CSS AND SASS ARCHITECTURE
// master.scss
@import "resets"; // _resets.scss
@import "settings"; // _settings.scss
@import "common"; // _common.scss
Sass
93. A GOOD CSS AND SASS ARCHITECTURE
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, ...
/*
# COMMON
*/
html, body {
background: url(bg.png);
font-size: 14px;
}
...
CSS
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. A GOOD CSS AND SASS ARCHITECTURE
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
CSS
118. A GOOD CSS AND SASS ARCHITECTURE
Sass.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. A GOOD CSS AND SASS ARCHITECTURE
.clearfix:after,.btn_type2_A:after,.bnavi
ul:after,.box_3col:after,.userData
dl:after,.likeTool:after,.likeUser ul:after,.commentUser
ul:after,.userData:after,.circleList li
a:after,.time_count:after,.paging
ul:after,.myData:after,.status:after,.bar:after,.month:after,.mo
nth2:after,.about:after,.sort:after,.mainList
ul:after,.mainList2 li
ul:after,.bnr_2col:after,.likeTool_lp:after,.flow:after,.radio:a
fter,.btn_entry_2col:after,.sort2:after,ul#popup_message:after,.
sort3:after,.f_circleList:after,.f_circleList a:after,.mainList3
dl:after,.mainList3 ul:after,.box_2col:after,.frame_desc
dl:after {
content: "";
display: block;
clear: both;
height: 0;
}
CSS
120. A GOOD CSS AND SASS ARCHITECTURE
セマンティック = コンテンツ派生?
121. A GOOD CSS AND SASS ARCHITECTURE
“
Nicolas Gallagher - About HTML semantics and front-end architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture
http://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, they
have purpose.
122. A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS
FOR MUCH BETTER CODING
AND SASS
123. A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
124. A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
125. A GOOD CSS AND SASS ARCHITECTURE
div.header ul.list {}
.widget ul li a {}
126. A GOOD CSS AND SASS ARCHITECTURE
div.header ul.list {}
.widget ul li a {}
.header .list {}
.widget li > a {}
127. A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
128. A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
129. A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
カテゴリに分類する
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. A GOOD CSS AND SASS ARCHITECTURE
sass/
_base.scss
_layout.scss
_module.scss
_state.scss
_theme.scss
master.scss
140. A GOOD CSS AND SASS ARCHITECTURE
sass/
_base.scss
_layout.scss
module/
_state.scss
_theme.scss
master.scss
_navigation.scss
_message.scss
_button.scss
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. A GOOD CSS AND SASS ARCHITECTURE
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
143. A GOOD CSS AND SASS ARCHITECTURE
“
時期尚早な最適化は
すべての悪の根源である
Programmers waste enormous amounts of time thinking about, or
worrying about, the speed of noncritical parts of their programs, and
these attempts at efficiency actually have a strong negative impact when
debugging and maintenance are considered. We should forget about
small efficiencies, say about 97% of the time: premature optimization is
the root of all evil. Yet we should not pass up our opportunities in that
critical 3%.
Donald E, Knuth - Structured Programming With Go To Statements
http://pplab.snu.ac.kr/courses/adv_pl05/papers/p261-knuth.pdf
144. A GOOD CSS AND SASS ARCHITECTURE
Refactoring: Improving the Design of Existing Code
http://www.amazon.com/dp/0201485672/
145. A GOOD CSS AND SASS ARCHITECTURE
3, 6, 9, 12, 15
146. A GOOD CSS AND SASS ARCHITECTURE
3, 6, 9, 12, 15
147. A GOOD CSS AND SASS ARCHITECTURE
3, 6, 12, 24, 48
148. A GOOD CSS AND SASS ARCHITECTURE
3, 6, 9, 12, 15
149. A GOOD CSS AND SASS ARCHITECTURE
3, 6, 9, 12, 15
155. A GOOD CSS AND SASS ARCHITECTURE
StyleDocco
http://jacobrask.github.io/styledocco/
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. A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS AND SASS
FOR MUCH BETTER CODING
158. A GOOD CSS AND SASS ARCHITECTURE
THANK YOU!
twitter.com/hiloki
github.com/hiloki
inkdesign.jp
159. A GOOD CSS AND SASS ARCHITECTURE
CREDIT
http://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/