SlideShare a Scribd company logo
ًٝذشـٕד֮׶אבֽ׷׋׭ך$44鏣鎘 
8FCⵖ⡲罏ך׋׭ך$44鏣鎘ך侄猰剅$44ؔآ؟ٝ
http://www.slideshare.net/hiloki/thinking-about-css-architecture
靼䬪埠 Hiroki Tani 
Front-end Engineer 
! github.com/hiloki 
 twitter.com/hiloki 
inkdesign.jp
1994.10.10
http://codepen.io/hiloki/full/ahdEF
20 years of CSS 
鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ 
،صً٦ءّٝծؿ؍ٕةծFUD
20 years of CSS 
鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ 
،صً٦ءّٝծؿ؍ٕةծFUD
$44כ㠨׸װְׅ
㠨׸װְׅ ͑ 僒׃ְ
Easy 
.text { 
color: green; 
}
Easy 
.text { 
color: green; 
} 
! 
.lead .text { 
color: blue 
} 
div class=lead 
/div
too 
Fragile 
#main { ... } 
#main .article { ... } 
#main .article .title { #main .breaking .title { #header #logo img { ... #header li#logoTop { ... #header li#logoTop:after .article-header .datetime ul.member-list li.member .widget p,.widget ul { ... #sidebar .widget { ... } 
#sidebar li a.register{} 
body.landing #main section #slider-control  div { #bannerList li div#rotate
! ⏲ # 

㠨׸זְ㸣樴ז鏣鎘׾実׭׷ךדכזֻծ 
㠨׸׋הֹח⹃孡׾䭯׏ג⥜䗁דֹ׷鏣鎘׾ ˑ 
俕谏牂⛲
OOCSS 
Nicole Sullivan 
@stubbornella
http://codepen.io/hiloki/full/dnGeB
div class=speaker 
div class=image 
img src=tani.jpg 
/div 
div class=inner 
p class=name…/p 
div class=biography 
p.../p 
/div 
/div 
/div
.speaker { 
overflow: hidden; /* Clearfix */ 
padding: 20px; 
background-color: #fff; 
} 
.speaker .image { 
float: left; 
margin-right: 15px; 
} 
.speaker .image  img { 
border-radius: 60px; 
} 
.speaker .inner { 
overflow: hidden; 
} 
…
div class=book 
div class=cover 
img src=book.jpg 
/div 
div class=inner 
p class=title.../p 
p class=info 
... 
/p 
div class=intro 
p.../p 
/div 
ul class=shop 
li.../li 
/ul 
/div 
/div
.book { 
overflow: hidden; /* Clearfix */ 
padding: 20px; 
background-color: #9DBCB8; 
color: #FFF; 
} 
.book .cover { 
float: left; 
margin-right: 20px; 
} 
.book .inner { 
overflow: hidden; 
} 
.book .title { 
... 
} 
...
div class=event 
a href=event.html 
div class=thumbnail 
img src=event.jpg 
/div 
div class=inner 
p class=event__name 
… 
/p 
/div 
/a 
/div
.event  a { 
display: block; 
} 
.event .thumbnail { 
float: left; 
margin-right: 15px; 
} 
.event .inner { 
overflow: hidden; 
} 
…
%
/* Media */ 
.media { 
overflow: hidden; /* Clearfix */ 
} 
.media__image { 
float: left; 
margin-right: 15px; 
} 
.media__body { 
overflow: hidden; 
}
div class=media speaker 
div class=media__image image 
img src=tani.jpg 
/div 
div class=media__body inner 
p class=name…/p 
div class=biography 
p.../p 
/div 
/div 
/div
div class=media book 
div class=media__image cover 
img src=book.jpg 
/div 
div class=media__body inner 
p class=title.../p 
p class=info 
... 
/p 
div class=intro 
p.../p 
/div 
ul class=shop 
li.../li 
/ul 
/div 
/div
div class=media event 
a href=event.html 
div class=media__image thumbnail 
img src=event.jpg 
/div 
div class=media__body inner 
p class=event__name 
… 
/p 
/div 
/a 
/div
.speaker { 
overflow: hidden; /* Clearfix */ 
padding: 20px; 
background-color: #fff; 
} 
.speaker .image { 
float: left; 
margin-right: 15px; 
} 
.speaker .image  img { 
border-radius: 60px; 
} 
.speaker .inner { 
overflow: hidden; 
} 
…
.book { 
overflow: hidden; /* Clearfix */ 
padding: 20px; 
background-color: #9DBCB8; 
color: #FFF; 
} 
.book .cover { 
float: left; 
margin-right: 20px; 
} 
.book .inner { 
overflow: hidden; 
} 
.book .title { 
... 
} 
...
.event  a { 
display: block; 
} 
.event .thumbnail { 
float: left; 
margin-right: 15px; 
} 
.event .inner { 
overflow: hidden; 
} 
…
OOCSS
OOCSS 
SMACSS 
BEM 
SUIT CSS 
AMCSS 
MCSS 
FLOCSS
⥯ך 
$44鏣鎘ךه؎ٝز
1 إؙٖةכ崮ֻծ䠐㔳涸ח
2 ㄏせ鋉⵱׾䭯א
/* Media */ 
.media { 
overflow: hidden; /* Clearfix */ 
} 
.media__image { 
float: left; 
margin-right: 15px; 
} 
.media__body { 
overflow: hidden; 
}
/* Media */ 
.media { 
overflow: hidden; /* Clearfix */ 
} 
.media .image { 
float: left; 
margin-right: 15px; 
} 
.media .body { 
overflow: hidden; 
}
/* Media */ 
.media { 
overflow: hidden; /* Clearfix */ 
} 
.media  .image { 
float: left; 
margin-right: 15px; 
} 
.media  .body { 
overflow: hidden; 
}
/* Media */ 
.media { 
overflow: hidden; /* Clearfix */ 
} 
.media__image { 
float: left; 
margin-right: 15px; 
} 
.media__body { 
overflow: hidden; 
}
https://github.com/hiloki/flocss
/* Media */ 
.c-media { 
overflow: hidden; /* Clearfix */ 
} 
.c-media__image { 
float: left; 
margin-right: 15px; 
} 
.c-media__body { 
overflow: hidden; 
}
!-- 一般的でない略称は避ける -- 
div class=c-wdt p-rcmdTpcs__li 
よくわからない 
/div 
! 
div class=c-widget p-recommendTopics__list 
長い...が分かる 
/div
/* Emmet/Zen-codingのAliasを参考にする */ 
.u-mts { margin-top: 10px } /* margin-top small */ 
.u-vam { vertical-align: middle } 
.u-fl { float: left }
3 㔐粸׶鵤׃׋׵؝ٝه٦طٝزךⱄ鏣鎘
@
@
@



@
@


4 +4ךة٦؜حزחأة؎ٕ׾䭯׋ׇזְ
$('.profile .button') 
.on('click', function(e){ 
... 
});
div class=profile 
... 
button class=button 
Save! 
/button 
/div
div class=profile 
... 
button class=“profile__button” 
Save! 
/button 
/div
$('.js-save-profile') 
.on('click', function(e){ 
... 
});
/* スタイルを持たせてはいけない */ 
.js-save-profile { 
... 
}
div class=profile 
... 
button class=“button js-save-profile“ 
Save! 
/button 
/div
div class=profile 
... 
button class=“profile__button 
js-save-profile” 
Save! 
/button 
/div
button class=c-button js-tap” 
Tappable 
/button 
! 
!-- カスタムデータ属性を使う -- 
button class=c-button data-tap 
Tappable 
/button
5 TUZMF㾩䚍דך鎸鶢כ窫㼎׃זְ
div style=“margin-bottom: 242pxblah blah blah/div
6 ؝٦سךⱄⵃ欽ָׅץגדכזְ
h1 class=section heading 
The Heading 
/h1 
! 
div class=section 
The Box 
/div
.section { 
padding: 12px 16px; 
border-radius: 8px; 
background-color: #FFFFFF; 
box-shadow: 0 0 2px #000; 
} 
! 
.heading { 
margin-bottom: 20px; 
font-size: 18px; 
font-weight: bold; 
}
.section { 
padding: 12px 16px; 
border-radius: 8px; 
background-color: #FFFFFF; 
box-shadow: 0 0 2px #000; 
} 
! 
.heading { 
margin-bottom: 20px; 
padding: 12px 16px; 
border-radius: 8px; 
background-color: #FFFFFF; 
box-shadow: 0 0 2px #000; 
font-size: 18px; 
font-weight: bold; 
}
h1 class=heading 
The Heading 
/h1 
! 
div class=section 
The Box 
/div
.s-box { 
padding: 12px 16px; 
border-radius: 8px; 
background-color: #FFFFFF; 
box-shadow: 0 0 2px #000; 
}
h1 class=“s-box heading” 
The Heading 
/h1 
! 
div class=s-box section 
The Box 
/div
7 رؠ؎ش٦הך؝ىُص؛٦ءّٝ
$44فٔفٗإح؟כ鏣鎘ך㉏겗׾鍑寸ׅ׷
No. 

.btn { 
... 
} 
! 
.btn--primary { 
background-color: #F31; 
color: #FFF; 
} 
! 
.btn--large { 
font-size: 1.5em; 
}
a class=btn btn--primarySave/a 
! 
a class=btn btn--primary btn--largeRegister/a
%btn { 
display: inline-block; 
border-radius: 6px; 
vertical-align: middle; 
padding: .6em 1em; 
cursor: pointer; 
} 
! 
%btn--primary { 
background-color: #F31; 
color: #FFF; 
font-weight: 700; 
} 
! 
%btn--large { 
font-size: 1.5em; 
}
.save-button { 
@extend %btn; 
@extend %btn--primary; 
} 
! 
.register-button { 
@extend %btn; 
@extend %btn--primary; 
@extend %btn--large; 
}
.save-button, .register-button { 
display: inline-block; 
border-radius: 6px; 
vertical-align: middle; 
padding: .6em 1em; 
cursor: pointer; 
} 
! 
.save-button, .register-button { 
background-color: #F31; 
color: #FFF; 
font-weight: 700; 
} 
! 
.register-button { 
font-size: 1.5em; 
}
a class=save-buttonSave/a 
! 
a class=register-buttonRegister/a
Smart!
Smart! 
׃ַ׃䪔ְָꨇ׃ְ
.mod_listType1 { 
section { 
margin-bottom:1em; 
} 
h1 { 
margin:0 0 .5em .5em; 
font-size:fz(15); 
-webkit-text-shadow:0px 1px 0px rgba(255,255,255,0.75); 
text-shadow:0px 1px 0px rgba(255,255,255,0.75); 
} 
ul { 
background-color:#ffffff; 
border:#c3c3c3 1px solid; 
overflow:hidden; 
@include radius(12px); 
li { 
border-top:#C3C3C2 1px solid; 
margin-top:-1px; 
margin-bottom:1px; 
font-size:fz(16); 
:first-child { 
a.disable { 
@include radius-tr(12px); 
@include radius-tl(12px); 
}
/* listType */ 
.mod_listType1 section, .mod_listType3 section, .mod_listType4 section, .mod_listType5 
section, .mod_listType8 section, .mod_listType7 section { 
margin-bottom: 1em; 
} 
.mod_listType1 h1, .mod_listType3 h1, .mod_listType4 h1, .mod_listType5 h1, .mod_listType8 
h1, .mod_listType7 h1 { 
margin: 0 0 .5em .5em; 
font-size: 15px; 
-webkit-text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); 
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); 
} 
.mod_listType1 ul, .mod_H[JQ䖓 
listType3 ul, .mod_listType4 ul, .mod_listType5 ul, .mod_listType8 
ul, .mod_listType7 ul { 
background-border: overflow: border-440kb 
color: #ffffff; 
#c3c3c3 1px solid; 
hidden; 
radius: 12px; 
} 
.mod_listType1 ul li, .mod_listType3 ul li, .mod_listType4 ul li, .mod_listType5 ul li, .mod_listType8 ul 
li, .mod_listType7 ul li { 
border-top: #C3C3C2 1px solid; 
margin-top: -1px; 
margin-bottom: 1px; 
font-size: 16px; 
} 
.mod_listType1 ul li:first-child a.disable, .mod_listType3 ul li:first-child a.disable, .mod_listType4 ul 
li:first-child a.disable, .mod_listType5 ul li:first-child a.disable, .mod_listType8 ul li:first-child 
a.disable, .mod_listType7 ul li:first-child a.disable { 
border-radius: 12px; 
border-radius: 12px; 
} 
.mod_listType1 ul li:last-child a.disable, .mod_listType3 ul li:last-child a.disable, .mod_listType4 ul 
li:last-child a.disable, .mod_listType5 ul li:last-child a.disable, .mod_listType8 ul li:last-child 
a.disable, .mod_listType7 ul li:last-child a.disable { 
border-radius: 12px; 
border-radius: 12px;
Do 
1BSUJBM!JNQPSU 
知⽃ז!NJYJO 
ⵖꣲׁ׸׋طأز 
㢌侧 
Don’t 
!FYUFOE 
!醱꧟זNJYJO 
ؕآُ،ٕזطأز
Do 
1BSUJBM!JNQPSU 
知⽃ז!NJYJO 
ⵖꣲׁ׸׋طأز 
㢌侧 
Don’t 
!FYUFOE 
!醱꧟זNJYJO 
ؕآُ،ٕזطأز
.c-button--primary { 
$primaryColor: #F31; 
background-color: $primaryColor; 
:hover { 
background-color: mix($primaryColor,#FFF,80%); 
} 
}
Do 
1BSUJBM!JNQPSU 
知⽃ז!NJYJO 
ⵖꣲׁ׸׋طأز 
㢌侧 
Don’t 
!FYUFOE 
!醱꧟זNJYJO 
ؕآُ،ٕזطأز
// pc.app.scss 
// 
// Foundation 
@import foundation/normalize; 
@import foundation/variables; 
@import foundation/mixin; 
@import “foundation/base”; 
! 
// Layout 
@import layout/app; 
! 
// Object 
@import object/components/button; 
@import object/components/avatar; 
@import object/components/media; 
@import object/project/header; 
@import object/project/profile; 
@import object/project/articles;
// object/project/_profile.scss 
// 
// =============== 
// # Profile 
// =============== 
! 
.p-profile {...} 
.p-profile__avatar {...} 
.p-profile__name {...} 
.p-profile__biography {...} 
...
pc.app.scss pc.lp.scss sp.app.scss sp.lp.scss
pc.app.scss pc.lp.scss sp.app.scss sp.lp.scss
/** 
* Concatenation 
**/ 
concat: { 
pc: { 
files: { 
'temp/pc.app.scss': [ 
'app/stylesheets/foundation/*.scss', 
'app/stylesheets/layout/_app.scss', 
'app/stylesheets/object/component/*.scss', 
'app/stylesheets/object/project/*.scss', 
'app/stylesheets/object/utility/*.scss' 
] 
} 
}, 
sp: { 
files: { 
'temp/sp.app.scss': [ 
'app/stylesheets/foundation/*.scss', 
'app/stylesheets/layout/_app.scss', 
'app/stylesheets/object/component/sp/*.scss', 
'app/stylesheets/object/project/sp/*.scss', 
'app/stylesheets/object/utility/sp/*.scss'
The first draft ˑ of anything is shit 
قىؚٝؐؑ؎
Thank you! 
! github.com/hiloki 
 twitter.com/hiloki 
inkdesign.jp

More Related Content

What's hot

Johny see book update
Johny see book updateJohny see book update
Johny see book update
Ahmad Syaifudin
 
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rsHTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
Milovan Jovičić
 
Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0
Fernanda Bernardo
 
thiết kế website bằng blogspot
thiết kế website bằng blogspotthiết kế website bằng blogspot
thiết kế website bằng blogspot
Làm seo blogspot miễn phí
 
Johny coba dulu
Johny coba duluJohny coba dulu
Johny coba dulu
sipali
 
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready BeautyHow to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Robin Pokorny
 
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Román Hernández
 
Practica #4 equipo 4
Practica #4 equipo 4Practica #4 equipo 4
Practica #4 equipo 4caradetorta0
 
box model
box modelbox model
box model
jay li
 
CSS 101
CSS 101CSS 101
CSS 101
Sofish Lin
 
CSS-методологии от О до Б
CSS-методологии от О до БCSS-методологии от О до Б
CSS-методологии от О до Б
Nikolay Yasinskiy
 
Основы CSS препроцессоров и их использование в WordPress
Основы CSS препроцессоров и их использование в WordPressОсновы CSS препроцессоров и их использование в WordPress
Основы CSS препроцессоров и их использование в WordPress
Dmitry Mayorov
 
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1Atsushi Tadokoro
 
Microformats
MicroformatsMicroformats
Microformats
Matthias Pfefferle
 
Joomla Day Austin Part 3
Joomla Day Austin Part 3Joomla Day Austin Part 3
Joomla Day Austin Part 3
Kyle Ledbetter
 
Portafolio 2do Parcial
Portafolio 2do ParcialPortafolio 2do Parcial
Portafolio 2do Parcial
Sergio Muñiz
 
Code blogtangcan
Code blogtangcanCode blogtangcan
Code blogtangcan
Quyên Lê
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
Md Rubel Hossain
 

What's hot (20)

Johny see book update
Johny see book updateJohny see book update
Johny see book update
 
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rsHTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
 
Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0Jogos: indo além do simples CSS 3.0
Jogos: indo além do simples CSS 3.0
 
thiết kế website bằng blogspot
thiết kế website bằng blogspotthiết kế website bằng blogspot
thiết kế website bằng blogspot
 
Johny coba dulu
Johny coba duluJohny coba dulu
Johny coba dulu
 
Index
IndexIndex
Index
 
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready BeautyHow to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
 
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
 
Practica #4 equipo 4
Practica #4 equipo 4Practica #4 equipo 4
Practica #4 equipo 4
 
box model
box modelbox model
box model
 
Documento
DocumentoDocumento
Documento
 
CSS 101
CSS 101CSS 101
CSS 101
 
CSS-методологии от О до Б
CSS-методологии от О до БCSS-методологии от О до Б
CSS-методологии от О до Б
 
Основы CSS препроцессоров и их использование в WordPress
Основы CSS препроцессоров и их использование в WordPressОсновы CSS препроцессоров и их использование в WordPress
Основы CSS препроцессоров и их использование в WordPress
 
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
 
Microformats
MicroformatsMicroformats
Microformats
 
Joomla Day Austin Part 3
Joomla Day Austin Part 3Joomla Day Austin Part 3
Joomla Day Austin Part 3
 
Portafolio 2do Parcial
Portafolio 2do ParcialPortafolio 2do Parcial
Portafolio 2do Parcial
 
Code blogtangcan
Code blogtangcanCode blogtangcan
Code blogtangcan
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 

Viewers also liked

2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSTakeharu Igari
 
CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
 
Web design
Web designWeb design
Web design
kazuko kaneuchi
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
 
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみたプログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみただいすけ ふるかわ
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Sasaki Kouhei
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論tsukasa obara
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
 

Viewers also liked (18)

2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 
Web design
Web designWeb design
Web design
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
 
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみたプログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 

More from 拓樹 谷

Beyond CSS Architecture
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
 
モダンな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
拓樹 谷
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
 

More from 拓樹 谷 (6)

Beyond CSS Architecture
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
モダンな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
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
 

メンテナブルでありつづけるためのCSS設計

  • 3. 靼䬪埠 Hiroki Tani Front-end Engineer ! github.com/hiloki twitter.com/hiloki inkdesign.jp
  • 4.
  • 7. 20 years of CSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
  • 8. 20 years of CSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
  • 11. Easy .text { color: green; }
  • 12. Easy .text { color: green; } ! .lead .text { color: blue } div class=lead /div
  • 13. too Fragile #main { ... } #main .article { ... } #main .article .title { #main .breaking .title { #header #logo img { ... #header li#logoTop { ... #header li#logoTop:after .article-header .datetime ul.member-list li.member .widget p,.widget ul { ... #sidebar .widget { ... } #sidebar li a.register{} body.landing #main section #slider-control div { #bannerList li div#rotate
  • 14. ! ⏲ #
  • 16. OOCSS Nicole Sullivan @stubbornella
  • 18. div class=speaker div class=image img src=tani.jpg /div div class=inner p class=name…/p div class=biography p.../p /div /div /div
  • 19. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
  • 20. div class=book div class=cover img src=book.jpg /div div class=inner p class=title.../p p class=info ... /p div class=intro p.../p /div ul class=shop li.../li /ul /div /div
  • 21. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  • 22. div class=event a href=event.html div class=thumbnail img src=event.jpg /div div class=inner p class=event__name … /p /div /a /div
  • 23. .event a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  • 24. %
  • 25.
  • 26. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 27. div class=media speaker div class=media__image image img src=tani.jpg /div div class=media__body inner p class=name…/p div class=biography p.../p /div /div /div
  • 28. div class=media book div class=media__image cover img src=book.jpg /div div class=media__body inner p class=title.../p p class=info ... /p div class=intro p.../p /div ul class=shop li.../li /ul /div /div
  • 29. div class=media event a href=event.html div class=media__image thumbnail img src=event.jpg /div div class=media__body inner p class=event__name … /p /div /a /div
  • 30. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
  • 31. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  • 32. .event a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  • 33. OOCSS
  • 34. OOCSS SMACSS BEM SUIT CSS AMCSS MCSS FLOCSS
  • 38. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 39. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media .image { float: left; margin-right: 15px; } .media .body { overflow: hidden; }
  • 40. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media .image { float: left; margin-right: 15px; } .media .body { overflow: hidden; }
  • 41. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 43. /* Media */ .c-media { overflow: hidden; /* Clearfix */ } .c-media__image { float: left; margin-right: 15px; } .c-media__body { overflow: hidden; }
  • 44. !-- 一般的でない略称は避ける -- div class=c-wdt p-rcmdTpcs__li よくわからない /div ! div class=c-widget p-recommendTopics__list 長い...が分かる /div
  • 45. /* Emmet/Zen-codingのAliasを参考にする */ .u-mts { margin-top: 10px } /* margin-top small */ .u-vam { vertical-align: middle } .u-fl { float: left }
  • 46.
  • 49.
  • 50.
  • 52.
  • 54. $('.profile .button') .on('click', function(e){ ... });
  • 55. div class=profile ... button class=button Save! /button /div
  • 56. div class=profile ... button class=“profile__button” Save! /button /div
  • 59. div class=profile ... button class=“button js-save-profile“ Save! /button /div
  • 60. div class=profile ... button class=“profile__button js-save-profile” Save! /button /div
  • 61. button class=c-button js-tap” Tappable /button ! !-- カスタムデータ属性を使う -- button class=c-button data-tap Tappable /button
  • 64.
  • 66.
  • 67. h1 class=section heading The Heading /h1 ! div class=section The Box /div
  • 68. .section { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; font-size: 18px; font-weight: bold; }
  • 69. .section { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; font-size: 18px; font-weight: bold; }
  • 70. h1 class=heading The Heading /h1 ! div class=section The Box /div
  • 71. .s-box { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; }
  • 72. h1 class=“s-box heading” The Heading /h1 ! div class=s-box section The Box /div
  • 74.
  • 75.
  • 76.
  • 79.
  • 80. .btn { ... } ! .btn--primary { background-color: #F31; color: #FFF; } ! .btn--large { font-size: 1.5em; }
  • 81. a class=btn btn--primarySave/a ! a class=btn btn--primary btn--largeRegister/a
  • 82. %btn { display: inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! %btn--primary { background-color: #F31; color: #FFF; font-weight: 700; } ! %btn--large { font-size: 1.5em; }
  • 83. .save-button { @extend %btn; @extend %btn--primary; } ! .register-button { @extend %btn; @extend %btn--primary; @extend %btn--large; }
  • 84. .save-button, .register-button { display: inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! .save-button, .register-button { background-color: #F31; color: #FFF; font-weight: 700; } ! .register-button { font-size: 1.5em; }
  • 85. a class=save-buttonSave/a ! a class=register-buttonRegister/a
  • 88. .mod_listType1 { section { margin-bottom:1em; } h1 { margin:0 0 .5em .5em; font-size:fz(15); -webkit-text-shadow:0px 1px 0px rgba(255,255,255,0.75); text-shadow:0px 1px 0px rgba(255,255,255,0.75); } ul { background-color:#ffffff; border:#c3c3c3 1px solid; overflow:hidden; @include radius(12px); li { border-top:#C3C3C2 1px solid; margin-top:-1px; margin-bottom:1px; font-size:fz(16); :first-child { a.disable { @include radius-tr(12px); @include radius-tl(12px); }
  • 89. /* listType */ .mod_listType1 section, .mod_listType3 section, .mod_listType4 section, .mod_listType5 section, .mod_listType8 section, .mod_listType7 section { margin-bottom: 1em; } .mod_listType1 h1, .mod_listType3 h1, .mod_listType4 h1, .mod_listType5 h1, .mod_listType8 h1, .mod_listType7 h1 { margin: 0 0 .5em .5em; font-size: 15px; -webkit-text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); } .mod_listType1 ul, .mod_H[JQ䖓 listType3 ul, .mod_listType4 ul, .mod_listType5 ul, .mod_listType8 ul, .mod_listType7 ul { background-border: overflow: border-440kb color: #ffffff; #c3c3c3 1px solid; hidden; radius: 12px; } .mod_listType1 ul li, .mod_listType3 ul li, .mod_listType4 ul li, .mod_listType5 ul li, .mod_listType8 ul li, .mod_listType7 ul li { border-top: #C3C3C2 1px solid; margin-top: -1px; margin-bottom: 1px; font-size: 16px; } .mod_listType1 ul li:first-child a.disable, .mod_listType3 ul li:first-child a.disable, .mod_listType4 ul li:first-child a.disable, .mod_listType5 ul li:first-child a.disable, .mod_listType8 ul li:first-child a.disable, .mod_listType7 ul li:first-child a.disable { border-radius: 12px; border-radius: 12px; } .mod_listType1 ul li:last-child a.disable, .mod_listType3 ul li:last-child a.disable, .mod_listType4 ul li:last-child a.disable, .mod_listType5 ul li:last-child a.disable, .mod_listType8 ul li:last-child a.disable, .mod_listType7 ul li:last-child a.disable { border-radius: 12px; border-radius: 12px;
  • 90. Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  • 91. Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  • 92. .c-button--primary { $primaryColor: #F31; background-color: $primaryColor; :hover { background-color: mix($primaryColor,#FFF,80%); } }
  • 93. Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  • 94. // pc.app.scss // // Foundation @import foundation/normalize; @import foundation/variables; @import foundation/mixin; @import “foundation/base”; ! // Layout @import layout/app; ! // Object @import object/components/button; @import object/components/avatar; @import object/components/media; @import object/project/header; @import object/project/profile; @import object/project/articles;
  • 95. // object/project/_profile.scss // // =============== // # Profile // =============== ! .p-profile {...} .p-profile__avatar {...} .p-profile__name {...} .p-profile__biography {...} ...
  • 98.
  • 99. /** * Concatenation **/ concat: { pc: { files: { 'temp/pc.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/*.scss', 'app/stylesheets/object/project/*.scss', 'app/stylesheets/object/utility/*.scss' ] } }, sp: { files: { 'temp/sp.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/sp/*.scss', 'app/stylesheets/object/project/sp/*.scss', 'app/stylesheets/object/utility/sp/*.scss'
  • 100.
  • 101. The first draft ˑ of anything is shit قىؚٝؐؑ؎
  • 102. Thank you! ! github.com/hiloki twitter.com/hiloki inkdesign.jp