SlideShare a Scribd company logo
1 of 159
A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS AND SASS
FOR MUCH BETTER CODING
Talknote Vol.8 / Frontrend
A GOOD CSS AND SASS ARCHITECTUREA GOOD CSS AND SASS ARCHITECTURE
@hiloki
A GOOD CSS AND SASS ARCHITECTURE
@hiloki
@ahomu
@t32k
A GOOD CSS AND SASS ARCHITECTURE
DESKTOP APP MOBILE APP / WEB MOBILE APP
A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS AND SASS
FOR MUCH BETTER CODING
A GOOD CSS AND SASS ARCHITECTURE
CSS
A GOOD CSS AND SASS ARCHITECTURE
CSS
ちゃんと設計しろ!
Chanto Sekkei Siro!
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
CSS
A GOOD CSS AND SASS ARCHITECTURE
CSS HTML
A GOOD CSS AND SASS ARCHITECTURE
CSS HTML JavaScript
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
#header .applyButton {
border-radius: 4px;
padding: 10px 0;
width: 360px;
text-align: center;
font-size: 16px;
background-color: rgb(255,169,0);
color: #FFFFFF;
}
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
#sidebar .applyButton {
border-radius: 4px;
padding: 6px 0; // for #sidebar
width: 200px; // for #sidebar
text-align: center;
font-size: 16px;
background-color: rgb(255,169,0);
color: #FFFFFF;
}
A GOOD CSS AND SASS ARCHITECTURE
.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
background-color: rgb(255,169,0);
color: #FFFFFF;
}
#header .applyButton {
padding: 10px 0;
width: 360px;
}
#sidebar .applyButton {
padding: 6px 0;
width: 200px;
}
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
background-color: rgb(255,169,0);
color: #FFFFFF;
}
#content .applyButton {
padding: 12px 0;
width: 500px;
font-size: 24px;
}
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
background-color: rgb(255,169,0);
color: #FFFFFF;
}
#content .applyButton {
padding: 12px 0;
width: 500px;
font-size: 24px;
}
#content .cource .applyButton { // = #sidebar
padding: 6px 0;
width: 200px;
font-size: 16px; // Default font-size
}
A GOOD CSS AND SASS ARCHITECTURE
CSSは、簡単に書ける
A GOOD CSS AND SASS ARCHITECTURE
CSSは、簡単に書ける
冗長に、それらしく
A GOOD CSS AND SASS ARCHITECTURE
そのCSSには、問題がない
A GOOD CSS AND SASS ARCHITECTURE
あなたにとって
そのCSSには、問題がない
A GOOD CSS AND SASS ARCHITECTURE
そのCSSには、問題がない?
後任者にとって
A GOOD CSS AND SASS ARCHITECTURE
そのCSSには、問題がない
問題がある
後任者にとって
A GOOD CSS AND SASS ARCHITECTURE
そのCSSには、問題がない
明後日の自分にも
問題がある
A GOOD CSS AND SASS ARCHITECTURE
.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
background-color: rgb(255,169,0);
color: #FFFFFF;
}
#header .applyButton {
padding: 10px 0;
width: 360px;
}
#sidebar .applyButton {
padding: 6px 0;
width: 200px;
}
#content .applyButton {
padding: 12px 0;
width: 500px;
font-size: 24px;
}
#content .cource .applyButton {
padding: 6px 0;
width: 200px;
font-size: 16px;
}
#content .teacher .applyButton {
width: 160px;
}
A GOOD CSS AND SASS ARCHITECTURE
.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
background-color: rgb(255,169,0);
color: #FFFFFF;
}
#header .applyButton {
padding: 10px 0;
width: 360px;
}
#sidebar .applyButton {
padding: 6px 0;
width: 200px;
}
#content .applyButton {
padding: 12px 0;
width: 500px;
font-size: 24px;
}
#content .cource .applyButton {
padding: 6px 0;
width: 200px;
font-size: 16px;
}
#content .teacher .applyButton {
width: 160px;
}
body.home #content .applyButton {
...
}
#content .cource #mizuno .name,
#content .cource #satou .name,
#content .cource #hiraki .name,
#content .cource #tani .name {
...
}
A GOOD CSS AND SASS ARCHITECTURE
⌘ + A , DELETE
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
.btn {
border-radius: 4px;
text-align: center;
}
.btn-primary {
background-color: rgb(255,169,0);
color: #FFFFFF;
}
.btn-small {
padding: 6px 0;
width: 200px;
}
.btn-medium {
padding: 10px 0;
width: 360px;
}
.btn-large {
padding: 12px 0;
width: 500px;
font-size: 24px;
}
A GOOD CSS AND SASS ARCHITECTURE
<!-- #header -->
<a href="#" class="btn btn-primary btn-medium">
講座申し込み
</a>
<!-- #sidebar, #content > .cource -->
<a href="#" class="btn btn-primary btn-small">
講座申し込み
</a>
<!-- #content -->
<a href="#" class="btn btn-primary btn-large">
今すぐ講座に座申し込む
</a>
A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS
FOR MUCH BETTER CODING
AND SASS
A GOOD CSS AND SASS ARCHITECTURE
CSS Architecture
http://philipwalton.com/articles/css-architecture/
A GOOD CSS AND SASS ARCHITECTURE
PREDICTABLE
予測しやすい
A GOOD CSS AND SASS ARCHITECTURE
REUSABLE
再利用しやすい
A GOOD CSS AND SASS ARCHITECTURE
MAINTAINABLE
保守しやすい
A GOOD CSS AND SASS ARCHITECTURE
SCALABLE
拡張しやすい
A GOOD CSS AND SASS ARCHITECTURE
PREDICTABLE 予測しやすい
REUSABLE 再利用しやすい
MAINTAINABLE 保守しやすい
SCALABLE 拡張しやすい
A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTUREFOR MUCH BETTER CODING
AND SASSA BAD CSS
A GOOD CSS AND SASS ARCHITECTURE
.widget {
background: yellow;
border: 1px solid black;
color: black;
width: 50%;
}
#sidebar .widget {
width: 200px;
}
body.homepage .widget {
background: white;
}
A GOOD CSS AND SASS ARCHITECTURE
#main-nav ul li ul { }
#content article h1:first-child { }
#sidebar > div > h3 + p { }
A GOOD CSS AND SASS ARCHITECTURE
.widget {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}
A GOOD CSS AND SASS ARCHITECTURE
.widget {}
.widget .title {}
.widget .content {}
.widget .action {}
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>
A GOOD CSS AND SASS ARCHITECTURE
.widget .title {
background-color: green;
color: #FFFFFF;
}
.widget .title
A GOOD CSS AND SASS ARCHITECTURE
.title {
border-left: 10px solid black;
padding: 5px 10px;
font-size: 24px;
}
.title
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
A GOOD CSS AND SASS ARCHITECTURE
MODULAR
モジュール
A GOOD CSS AND SASS ARCHITECTURE
Nicole Sullivan - OOCSS
https://github.com/stubbornella/oocss
A GOOD CSS AND SASS ARCHITECTURE
Jonathan Snook - SMACSS
http://smacss.com/
A GOOD CSS AND SASS ARCHITECTURE
Jonathan Snook - SMACSS
http://smacss.com/
A GOOD CSS AND SASS ARCHITECTURE
DE-COUPLING
疎結合
NAME CONVENTION
命名規則
A GOOD CSS AND SASS ARCHITECTURE
DE-COUPLING
装飾 構造
コンテンツ コンテナー
HTML CSS
A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS
FOR MUCH BETTER CODING
AND SASS
A GOOD CSS AND SASS ARCHITECTURE
/* Bad */
.widget { }
#sidebar .widget { }
/* Good */
.widget { }
.widget-sidebar { }
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>
A GOOD CSS AND SASS ARCHITECTURE
/* Grenade */
#main-nav ul li ul { }
/* Sniper Rifle */
.subnav { }
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>
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;
}
A GOOD CSS AND SASS ARCHITECTURE
/* High risk */
.widget { }
.widget .title { }
/* Low risk */
.widget { }
.widget-title { }
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>
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
A GOOD CSS AND SASS ARCHITECTURE
.widget { }
A GOOD CSS AND SASS ARCHITECTURE
.widget { }
.widget-sidebar { }
.widget-title { }
A GOOD CSS AND SASS ARCHITECTURE
.widget { } .widget
.widget-sidebar
.widget
.widget-title
.widget-sidebar { }
.widget-title { }
A GOOD CSS AND SASS ARCHITECTURE
.widget { } .widget
.widget-sidebar
.widget
.widget-title
.widget-sidebar { }
.widget-title { }
Modifier
Sub-Component
A GOOD CSS AND SASS ARCHITECTURE
.widget-sidebar { }
.widget { }
A GOOD CSS AND SASS ARCHITECTURE
.widget-sidebar { }
.widget { }
Modifier OR Sub-Component ?
A GOOD CSS AND SASS ARCHITECTURE
.widget-sidebar { }
.widget { }
Modifier OR Sub-Component ?
.widget-sidebar .widget
.widget-sidebar
A GOOD CSS AND SASS ARCHITECTURE
Yandex - BEM
http://bem.info/
A GOOD CSS AND SASS ARCHITECTURE
Block Element Modifier
A GOOD CSS AND SASS ARCHITECTURE
.block__element_modifier {}
the BEM SYSTEM
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/
A GOOD CSS AND SASS ARCHITECTURE
/* Modifier */
.widget--sidebar { }
/* Sub-Component */
.widget__title { }
A GOOD CSS AND SASS ARCHITECTURE
“
class名が決まれば
我々の仕事の
90%は終わったも同然
@CSS Radar
http://twitter.com/cssradar
A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS
FOR MUCH BETTER CODING
AND SASS
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
$ sudo gem install sass
$ sass --watch style:scss:style.css --style expanded
A GOOD CSS AND SASS ARCHITECTURE
.nav-breadcrumb {
> li {
display: inline;
& + li:before {
display: inline;
content: ">";
}
> a {
color: inherit;
}
}
}
Sass
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
A GOOD CSS AND SASS ARCHITECTURE
$containerSize: 960px;
$brandColor: #00CC11;
$subColor: #CC9988;
.keyvisual {
$pad: 10px;
padding: $pad;
width: $containerSize - $pad * 2;
}
Sass
A GOOD CSS AND SASS ARCHITECTURE
.keyvisual {
padding: 10px;
width: 940px;
}
CSS
A GOOD CSS AND SASS ARCHITECTURE
// master.scss
@import "resets"; // _resets.scss
@import "settings"; // _settings.scss
@import "common"; // _common.scss
Sass
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
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
A GOOD CSS AND SASS ARCHITECTURE
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
CSS
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
body.application {
	 #content {
	 	 width: 100%;
	 	 .form-basic {
	 	 	 dt {
	 	 	 	 float: left;
	 	 	 	 margin-bottom: 0.5em;
	 	 	 	 width: 20%;
	 	 	 	 span {
	 	 	 	 	 display: block;
	 	 	 	 }
	 	 	 }
	 	 	 dd {
	 	 	 	 margin-bottom: 0.5em;
	 	 	 	 width: 80%;
	 	 	 }
	 	 }
	 	 .form-options {
	 	 	 dt {
	 	 	 	 display: block;
	 	 	 	 margin-bottom: 0.5em;
	 	 	 	 span {
	 	 	 	 	 margin-left: 0.2em;
	 	 	 	 }
	 	 	 }
	 	 	 dd {
	 	 	 	 margin-bottom: 0.5em;
	 	 	 }
	 	 }
	 }
	 #sidebar {
	 	 display: none;
	 }
}
Sass
A GOOD CSS AND SASS ARCHITECTURE
body.application #content {
width: 100%;
}
body.application #content .form-basic dt {
float: left;
margin-bottom: 0.5em;
width: 20%;
}
body.application #content .form-basic dt span {
display: block;
}
body.application #content .form-basic dd {
margin-bottom: 0.5em;
width: 80%;
}
body.application #content .form-options dt {
display: block;
margin-bottom: 0.5em;
}
body.application #content .form-options dt span {
margin-left: 0.2em;
}
body.application #content .form-options dd {
margin-bottom: 0.5em;
}
body.application #sidebar {
display: none;
}
CSS
A GOOD CSS AND SASS ARCHITECTURE
.css.scss
A GOOD CSS AND SASS ARCHITECTURE
.css.scss
A GOOD CSS AND SASS ARCHITECTURE
.css.scss
A GOOD CSS AND SASS ARCHITECTURE
@extend
A GOOD CSS AND SASS ARCHITECTURE
.plane {
box-shadow: 0 2px 5px rgba(#000,.1);
border-radius: 5px;
}
.box {
@extend .plane;
background-color: #FFF;
}
.box-alert {
@extend .plane;
background-color: #FCC;
}
Sass
A GOOD CSS AND SASS ARCHITECTURE
.plane, .box, .box-alert {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.box {
background-color: #FFF;
}
.box-alert {
background-color: #FCC;
}
CSS
A GOOD CSS AND SASS ARCHITECTURE
%plane {
box-shadow: 0 2px 5px rgba(#000,.1);
border-radius: 5px;
}
.box {
@extend %plane;
background-color: #FFF;
}
.box-alert {
@extend %plane;
background-color: #FCC;
}
Sass
A GOOD CSS AND SASS ARCHITECTURE
.box, .box-alert {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.box {
background-color: #FFF;
}
.box-alert {
background-color: #FCC;
}
CSS
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
.pic {
	 display: inline-block;
	 vertical-align: top;
}
.pic-cutout {
	 border-radius: 50%;
}
.pic-photo {
	 border: 4px solid #FFF;
	 box-shadow: 2px 2px 3px #333;;
}
CSS
A GOOD CSS AND SASS ARCHITECTURE
<!-- Author -->
<img src="author.jpg" class="pic pic-cutout"
alt="Hiroki Tani">
<!-- Post -->
<img src="post.jpg" class="pic pic-photo"
alt="ノーベルアイス">
A GOOD CSS AND SASS ARCHITECTURE
%pic {
	 display: inline-block;
	 vertical-align: top;
}
%pic-cutout {
	 border-radius: 50%;
}
%pic-photo {
	 border: 4px solid #FFF;
	 box-shadow: 2px 2px 3px #333;;
}
.my-avatar {
	 @extend %pic;
	 @extend %pic-cutout;
}
.post-photo {
	 @extend %pic;
	 @extend %pic-photo;
}
Sass
A GOOD CSS AND SASS ARCHITECTURE
.my-avatar, .post-photo {
display: inline-block;
vertical-align: top;
}
.my-avatar {
border-radius: 50%;
}
.post-photo {
border: 4px solid white;
box-shadow: 2px 2px 3px #333333;
}
CSS
A GOOD CSS AND SASS ARCHITECTURE
<!-- Author -->
<img src="author.jpg" class="my-avatar"
alt="Hiroki Tani">
<!-- Post -->
<img src="post.jpg" class="post-photo"
alt="ノーベルアイス">
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
%pic { }
%pic-cutout { }
%pic-photo { }
.my-avatar {
	 @extend %pic;
	 @extend %pic-cutout;
}
.post-photo {
	 @extend %pic;
	 @extend %pic-photo;
}
.friend-avatar {
	 @extend .pic;
	 @extend .pic-cutout;
	 box-shadow: 2px 2px 3px #333;;
}
Sass
A GOOD CSS AND SASS ARCHITECTURE
.my-avatar, .post-photo, .friend-avatar {
display: inline-block;
vertical-align: top;
}
.my-avatar, .friend-avatar {
border-radius: 50%;
}
.post-photo {
border: 4px solid white;
box-shadow: 2px 2px 3px #333333;
}
.friend-avatar {
box-shadow: 2px 2px 3px #333333;
}
CSS
A GOOD CSS AND SASS ARCHITECTURE
<!-- Author -->
<img src="author.jpg" class="my-avatar" alt="Hiroki
Tani">
<!-- Post -->
<img src="post.jpg" class="post-photo" alt="ノーベルアイ
ス">
<!-- Likers -->
<img src="likers01.jpg" class="friend-avatar"
alt="Satoru Hiraki">
<img src="likers02.jpg" class="friend-avatar"
alt="Hayato Mizuno">
<img src="likers02.jpg" class="friend-avatar" alt="Ayumu
Sato">
A GOOD CSS AND SASS ARCHITECTURE
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;
}
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
A GOOD CSS AND SASS ARCHITECTURE
セマンティック = コンテンツ派生?
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.
A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS
FOR MUCH BETTER CODING
AND SASS
A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
A GOOD CSS AND SASS ARCHITECTURE
div.header ul.list {}
.widget ul li a {}
A GOOD CSS AND SASS ARCHITECTURE
div.header ul.list {}
.widget ul li a {}
.header .list {}
.widget li > a {}
A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
A GOOD CSS AND SASS ARCHITECTURE
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
カテゴリに分類する
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
BASE
MODULE
LAYOUT
STATE
THEME
A GOOD CSS AND SASS ARCHITECTURE
BASE
html,body,p,ul,li....
A GOOD CSS AND SASS ARCHITECTURE
LAYOUT
.l-header,.l-footer,.grid...
A GOOD CSS AND SASS ARCHITECTURE
MODULE
.btn,.nav,.msg...
A GOOD CSS AND SASS ARCHITECTURE
STATE
.is-hidden,.is-error,.is-selected
A GOOD CSS AND SASS ARCHITECTURE
THEME
.theme-spring.theme-special...
A GOOD CSS AND SASS ARCHITECTURE
/* %BASE ==================== */
html,body {...}
/* %LAYOUT ==================== */
.l-header {...}
.l-footer {...}
/* %MODULE ==================== */
.btn {...}
.msg {...}
/* %STATE ==================== */
.is-hidden {...}
.is-error {...}
/* %THEME ==================== */
.theme-spring {...}
.theme-summer {...}
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
A GOOD CSS AND SASS ARCHITECTURE
sass/
_base.scss
_layout.scss
_module.scss
_state.scss
_theme.scss
master.scss
A GOOD CSS AND SASS ARCHITECTURE
sass/
_base.scss
_layout.scss
module/
_state.scss
_theme.scss
master.scss
_navigation.scss
_message.scss
_button.scss
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";
A GOOD CSS AND SASS ARCHITECTURE
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる
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
A GOOD CSS AND SASS ARCHITECTURE
Refactoring: Improving the Design of Existing Code
http://www.amazon.com/dp/0201485672/
A GOOD CSS AND SASS ARCHITECTURE
3, 6, 9, 12, 15
A GOOD CSS AND SASS ARCHITECTURE
3, 6, 9, 12, 15
A GOOD CSS AND SASS ARCHITECTURE
3, 6, 12, 24, 48
A GOOD CSS AND SASS ARCHITECTURE
3, 6, 9, 12, 15
A GOOD CSS AND SASS ARCHITECTURE
3, 6, 9, 12, 15
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
Starbucks Coffee - Style Guide
http://www.starbucks.com/static/reference/styleguide/
A GOOD CSS AND SASS ARCHITECTURE
Pears
http://pea.rs/
A GOOD CSS AND SASS ARCHITECTURE
BBC - GEL (Global Experience Language)
http://www.bbc.co.uk/gel
A GOOD CSS AND SASS ARCHITECTURE
A GOOD CSS AND SASS ARCHITECTURE
StyleDocco
http://jacobrask.github.io/styledocco/
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
A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS AND SASS
FOR MUCH BETTER CODING
A GOOD CSS AND SASS ARCHITECTURE
THANK YOU!
twitter.com/hiloki
github.com/hiloki
inkdesign.jp
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/

More Related Content

Viewers also liked

Viewers also liked (13)

CSS設計のお勉強
CSS設計のお勉強CSS設計のお勉強
CSS設計のお勉強
 
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへUXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへ
 
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkillsサルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
 
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season
 

More from 拓樹 谷

CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
 

More from 拓樹 谷 (11)

CSS設計の理想と現実
CSS設計の理想と現実CSS設計の理想と現実
CSS設計の理想と現実
 
Why Sass?
Why Sass?Why Sass?
Why Sass?
 
Beyond CSS Architecture
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture
 
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
 
CSS Components
CSS ComponentsCSS Components
CSS Components
 
How to Win the Heart of CSS Boys
How to Win the Heart of CSS BoysHow to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
Try Web Components
Try Web ComponentsTry Web Components
Try Web Components
 
High Performance Webdesign
High Performance WebdesignHigh Performance Webdesign
High Performance Webdesign
 
Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
 

Recently uploaded

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
Overkill Security
 

Recently uploaded (20)

Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 

ちゃんとCSSを書くために - CSS/Sass設計の話

  • 1. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS AND SASS FOR MUCH BETTER CODING Talknote Vol.8 / Frontrend
  • 2. A GOOD CSS AND SASS ARCHITECTUREA GOOD CSS AND SASS ARCHITECTURE @hiloki
  • 3. A GOOD CSS AND SASS ARCHITECTURE @hiloki @ahomu @t32k
  • 4. A GOOD CSS AND SASS ARCHITECTURE DESKTOP APP MOBILE APP / WEB MOBILE APP
  • 5. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS AND SASS FOR MUCH BETTER CODING
  • 6. A GOOD CSS AND SASS ARCHITECTURE CSS
  • 7. A GOOD CSS AND SASS ARCHITECTURE CSS ちゃんと設計しろ! Chanto Sekkei Siro!
  • 8. A GOOD CSS AND SASS ARCHITECTURE
  • 9. A GOOD CSS AND SASS ARCHITECTURE
  • 10. A GOOD CSS AND SASS ARCHITECTURE
  • 11. A GOOD CSS AND SASS ARCHITECTURE
  • 12. A GOOD CSS AND SASS ARCHITECTURE
  • 13. A GOOD CSS AND SASS ARCHITECTURE CSS
  • 14. A GOOD CSS AND SASS ARCHITECTURE CSS HTML
  • 15. A GOOD CSS AND SASS ARCHITECTURE CSS HTML JavaScript
  • 16. A GOOD CSS AND SASS ARCHITECTURE
  • 17. A GOOD CSS AND SASS ARCHITECTURE
  • 18. A GOOD CSS AND SASS ARCHITECTURE
  • 19. A GOOD CSS AND SASS ARCHITECTURE #header .applyButton { border-radius: 4px; padding: 10px 0; width: 360px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; }
  • 20. A GOOD CSS AND SASS ARCHITECTURE
  • 21. A GOOD CSS AND SASS ARCHITECTURE #sidebar .applyButton { border-radius: 4px; padding: 6px 0; // for #sidebar width: 200px; // for #sidebar text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; }
  • 22. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #header .applyButton { padding: 10px 0; width: 360px; } #sidebar .applyButton { padding: 6px 0; width: 200px; }
  • 23. A GOOD CSS AND SASS ARCHITECTURE
  • 24. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #content .applyButton { padding: 12px 0; width: 500px; font-size: 24px; }
  • 25. A GOOD CSS AND SASS ARCHITECTURE
  • 26. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #content .applyButton { padding: 12px 0; width: 500px; font-size: 24px; } #content .cource .applyButton { // = #sidebar padding: 6px 0; width: 200px; font-size: 16px; // Default font-size }
  • 27. A GOOD CSS AND SASS ARCHITECTURE CSSは、簡単に書ける
  • 28. A GOOD CSS AND SASS ARCHITECTURE CSSは、簡単に書ける 冗長に、それらしく
  • 29. A GOOD CSS AND SASS ARCHITECTURE そのCSSには、問題がない
  • 30. A GOOD CSS AND SASS ARCHITECTURE あなたにとって そのCSSには、問題がない
  • 31. A GOOD CSS AND SASS ARCHITECTURE そのCSSには、問題がない? 後任者にとって
  • 32. A GOOD CSS AND SASS ARCHITECTURE そのCSSには、問題がない 問題がある 後任者にとって
  • 33. A GOOD CSS AND SASS ARCHITECTURE そのCSSには、問題がない 明後日の自分にも 問題がある
  • 34. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #header .applyButton { padding: 10px 0; width: 360px; } #sidebar .applyButton { padding: 6px 0; width: 200px; } #content .applyButton { padding: 12px 0; width: 500px; font-size: 24px; } #content .cource .applyButton { padding: 6px 0; width: 200px; font-size: 16px; } #content .teacher .applyButton { width: 160px; }
  • 35. A GOOD CSS AND SASS ARCHITECTURE .applyButton { border-radius: 4px; text-align: center; font-size: 16px; background-color: rgb(255,169,0); color: #FFFFFF; } #header .applyButton { padding: 10px 0; width: 360px; } #sidebar .applyButton { padding: 6px 0; width: 200px; } #content .applyButton { padding: 12px 0; width: 500px; font-size: 24px; } #content .cource .applyButton { padding: 6px 0; width: 200px; font-size: 16px; } #content .teacher .applyButton { width: 160px; } body.home #content .applyButton { ... } #content .cource #mizuno .name, #content .cource #satou .name, #content .cource #hiraki .name, #content .cource #tani .name { ... }
  • 36. A GOOD CSS AND SASS ARCHITECTURE ⌘ + A , DELETE
  • 37. A GOOD CSS AND SASS ARCHITECTURE
  • 38. A GOOD CSS AND SASS ARCHITECTURE .btn { border-radius: 4px; text-align: center; } .btn-primary { background-color: rgb(255,169,0); color: #FFFFFF; } .btn-small { padding: 6px 0; width: 200px; } .btn-medium { padding: 10px 0; width: 360px; } .btn-large { padding: 12px 0; width: 500px; font-size: 24px; }
  • 39. A GOOD CSS AND SASS ARCHITECTURE <!-- #header --> <a href="#" class="btn btn-primary btn-medium"> 講座申し込み </a> <!-- #sidebar, #content > .cource --> <a href="#" class="btn btn-primary btn-small"> 講座申し込み </a> <!-- #content --> <a href="#" class="btn btn-primary btn-large"> 今すぐ講座に座申し込む </a>
  • 40. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTURE A GOOD CSS FOR MUCH BETTER CODING AND SASS
  • 41. A GOOD CSS AND SASS ARCHITECTURE CSS Architecture http://philipwalton.com/articles/css-architecture/
  • 42. A GOOD CSS AND SASS ARCHITECTURE PREDICTABLE 予測しやすい
  • 43. A GOOD CSS AND SASS ARCHITECTURE REUSABLE 再利用しやすい
  • 44. A GOOD CSS AND SASS ARCHITECTURE MAINTAINABLE 保守しやすい
  • 45. A GOOD CSS AND SASS ARCHITECTURE SCALABLE 拡張しやすい
  • 46. A GOOD CSS AND SASS ARCHITECTURE PREDICTABLE 予測しやすい REUSABLE 再利用しやすい MAINTAINABLE 保守しやすい SCALABLE 拡張しやすい
  • 47. A GOOD CSS AND SASS ARCHITECTURE ARCHITECTUREFOR MUCH BETTER CODING AND SASSA BAD CSS
  • 48. A GOOD CSS AND SASS ARCHITECTURE .widget { background: yellow; border: 1px solid black; color: black; width: 50%; } #sidebar .widget { width: 200px; } body.homepage .widget { background: white; }
  • 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
  • 71. A GOOD CSS AND SASS ARCHITECTURE .widget { }
  • 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
  • 85. A GOOD CSS AND SASS ARCHITECTURE
  • 86. A GOOD CSS AND SASS ARCHITECTURE
  • 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
  • 96. A GOOD CSS AND SASS ARCHITECTURE
  • 97. A GOOD CSS AND SASS ARCHITECTURE body.application { #content { width: 100%; .form-basic { dt { float: left; margin-bottom: 0.5em; width: 20%; span { display: block; } } dd { margin-bottom: 0.5em; width: 80%; } } .form-options { dt { display: block; margin-bottom: 0.5em; span { margin-left: 0.2em; } } dd { margin-bottom: 0.5em; } } } #sidebar { display: none; } } Sass
  • 98. A GOOD CSS AND SASS ARCHITECTURE body.application #content { width: 100%; } body.application #content .form-basic dt { float: left; margin-bottom: 0.5em; width: 20%; } body.application #content .form-basic dt span { display: block; } body.application #content .form-basic dd { margin-bottom: 0.5em; width: 80%; } body.application #content .form-options dt { display: block; margin-bottom: 0.5em; } body.application #content .form-options dt span { margin-left: 0.2em; } body.application #content .form-options dd { margin-bottom: 0.5em; } body.application #sidebar { display: none; } CSS
  • 99. A GOOD CSS AND SASS ARCHITECTURE .css.scss
  • 100. A GOOD CSS AND SASS ARCHITECTURE .css.scss
  • 101. A GOOD CSS AND SASS ARCHITECTURE .css.scss
  • 102. A GOOD CSS AND SASS ARCHITECTURE @extend
  • 103. A GOOD CSS AND SASS ARCHITECTURE .plane { box-shadow: 0 2px 5px rgba(#000,.1); border-radius: 5px; } .box { @extend .plane; background-color: #FFF; } .box-alert { @extend .plane; background-color: #FCC; } Sass
  • 104. A GOOD CSS AND SASS ARCHITECTURE .plane, .box, .box-alert { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: 5px; } .box { background-color: #FFF; } .box-alert { background-color: #FCC; } CSS
  • 105. A GOOD CSS AND SASS ARCHITECTURE %plane { box-shadow: 0 2px 5px rgba(#000,.1); border-radius: 5px; } .box { @extend %plane; background-color: #FFF; } .box-alert { @extend %plane; background-color: #FCC; } Sass
  • 106. A GOOD CSS AND SASS ARCHITECTURE .box, .box-alert { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: 5px; } .box { background-color: #FFF; } .box-alert { background-color: #FCC; } CSS
  • 107. A GOOD CSS AND SASS ARCHITECTURE
  • 108. A GOOD CSS AND SASS ARCHITECTURE .pic { display: inline-block; vertical-align: top; } .pic-cutout { border-radius: 50%; } .pic-photo { border: 4px solid #FFF; box-shadow: 2px 2px 3px #333;; } CSS
  • 109. A GOOD CSS AND SASS ARCHITECTURE <!-- Author --> <img src="author.jpg" class="pic pic-cutout" alt="Hiroki Tani"> <!-- Post --> <img src="post.jpg" class="pic pic-photo" alt="ノーベルアイス">
  • 110. A GOOD CSS AND SASS ARCHITECTURE %pic { display: inline-block; vertical-align: top; } %pic-cutout { border-radius: 50%; } %pic-photo { border: 4px solid #FFF; box-shadow: 2px 2px 3px #333;; } .my-avatar { @extend %pic; @extend %pic-cutout; } .post-photo { @extend %pic; @extend %pic-photo; } Sass
  • 111. A GOOD CSS AND SASS ARCHITECTURE .my-avatar, .post-photo { display: inline-block; vertical-align: top; } .my-avatar { border-radius: 50%; } .post-photo { border: 4px solid white; box-shadow: 2px 2px 3px #333333; } CSS
  • 112. A GOOD CSS AND SASS ARCHITECTURE <!-- Author --> <img src="author.jpg" class="my-avatar" alt="Hiroki Tani"> <!-- Post --> <img src="post.jpg" class="post-photo" alt="ノーベルアイス">
  • 113. A GOOD CSS AND SASS ARCHITECTURE
  • 114. A GOOD CSS AND SASS ARCHITECTURE %pic { } %pic-cutout { } %pic-photo { } .my-avatar { @extend %pic; @extend %pic-cutout; } .post-photo { @extend %pic; @extend %pic-photo; } .friend-avatar { @extend .pic; @extend .pic-cutout; box-shadow: 2px 2px 3px #333;; } Sass
  • 115. A GOOD CSS AND SASS ARCHITECTURE .my-avatar, .post-photo, .friend-avatar { display: inline-block; vertical-align: top; } .my-avatar, .friend-avatar { border-radius: 50%; } .post-photo { border: 4px solid white; box-shadow: 2px 2px 3px #333333; } .friend-avatar { box-shadow: 2px 2px 3px #333333; } CSS
  • 116. A GOOD CSS AND SASS ARCHITECTURE <!-- Author --> <img src="author.jpg" class="my-avatar" alt="Hiroki Tani"> <!-- Post --> <img src="post.jpg" class="post-photo" alt="ノーベルアイ ス"> <!-- Likers --> <img src="likers01.jpg" class="friend-avatar" alt="Satoru Hiraki"> <img src="likers02.jpg" class="friend-avatar" alt="Hayato Mizuno"> <img src="likers02.jpg" class="friend-avatar" alt="Ayumu Sato">
  • 117. A GOOD CSS AND SASS ARCHITECTURE
  • 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を減らす プロパティの順番をそろえる カテゴリに分類する
  • 130. A GOOD CSS AND SASS ARCHITECTURE
  • 131. A GOOD CSS AND SASS ARCHITECTURE BASE MODULE LAYOUT STATE THEME
  • 132. A GOOD CSS AND SASS ARCHITECTURE BASE html,body,p,ul,li....
  • 133. A GOOD CSS AND SASS ARCHITECTURE LAYOUT .l-header,.l-footer,.grid...
  • 134. A GOOD CSS AND SASS ARCHITECTURE MODULE .btn,.nav,.msg...
  • 135. A GOOD CSS AND SASS ARCHITECTURE STATE .is-hidden,.is-error,.is-selected
  • 136. A GOOD CSS AND SASS ARCHITECTURE THEME .theme-spring.theme-special...
  • 137. A GOOD CSS AND SASS ARCHITECTURE /* %BASE ==================== */ html,body {...} /* %LAYOUT ==================== */ .l-header {...} .l-footer {...} /* %MODULE ==================== */ .btn {...} .msg {...} /* %STATE ==================== */ .is-hidden {...} .is-error {...} /* %THEME ==================== */ .theme-spring {...} .theme-summer {...}
  • 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
  • 150. A GOOD CSS AND SASS ARCHITECTURE
  • 151. A GOOD CSS AND SASS ARCHITECTURE Starbucks Coffee - Style Guide http://www.starbucks.com/static/reference/styleguide/
  • 152. A GOOD CSS AND SASS ARCHITECTURE Pears http://pea.rs/
  • 153. A GOOD CSS AND SASS ARCHITECTURE BBC - GEL (Global Experience Language) http://www.bbc.co.uk/gel
  • 154. A GOOD CSS AND SASS ARCHITECTURE
  • 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/