SlideShare a Scribd company logo
CsS
ThInKiNg
ARcHiTeCtUrE
FRoNtReNdiNOSaKa
Re:cReatEr’S kAnSaI
SAtUrDaY, sEpTeMbEr 14 2013
AbOuT
HirOkI taNi
CYbEragEnT, inC.
タイトル
@T32K
@AhOmU
@HiLoKi@HiLoKi
APp
WeB
¤なぜ設計を学ぶべきなのか
ARcHiTeCtUrE
k
1BRoWsEr
0PsD
q k u
¤
¥
.text {
	 color: black;
}
.catchcopy {
	 color: red;
}
#message .text {
	 color: green;
}
10mIn
11l12
9 3
6
¥
k11l12
9 3
6
10mIn 60mIn...aNd MoRe
11l12
9 3
6
11l12
9 3
6
111
11l12
9 3
6
11l12
9 3
6
11l12
9 3
6
11l12
9 3
6
¤
¥
k
10mIn BUgS...
1 1 1
±'
lll
lll
H
H
±'
lll
lll
H
H
±'
lll
lll
H
H
11l12
9 3
6
¤
¥
L
?SOmEoNe
L N
? YOu
k1112
9
6
3
l
30mIn
1112
9
6
3
l
30mIn
¤
¥
1CsS
1HtMl
1CsS
1Js
e良いCSS設計のゴールとは
GoAl
®©°
®©°PHiLiP waLtOn
CsS arChItEcTuRe
®©°
®©°PHiLiP waLtOn
CsS arChItEcTuRe
&
PReDiCtAbLe
REuSaBlE
MAiNtAiNaBlE
SCaLaBlE
#content article h1:first-child { ... }
<div id="content">
	 <article>
	 	 <h1>Article Title</h1>
	 </article>
</div>
<div id="content">
	 <section>
	 	 <h1>Article Title</h1>
	 </section>
</div>
<div id="content">
	 <article>
	 	 <p>2013/09/13</p>
	 	 <h1>Article Title</h1>
	 </article>
</div>
D¤
.entry-title { ... }
<div id="content">
	 <article>
	 	 <p>2013/09/13</p>
	 	 <h1 class="entry-title">Article Title</
h1>
	 </article>
</div>
<div id="content">
	 <div>
	 	 <p>2013/09/13</p>
	 	 <h2 class="entry-title">Article Title</
h2>
	 </div>
</div>
POCSSは壊れやすい
CsS Is ToO FrAgIlE
®©°®©°OoCsS
bY niCoLe suLlIvAn
SEpArAtE CoNtAiNeR AnD CoNtEnT
SEpArAtE StRuCtUrE AnD SkIn
SEpArAtE CoNtAiNeR AnD CoNtEnT
SEpArAtE StRuCtUrE AnD SkIn
®©°
MEdIa obJeCt
<div class="media">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body">
	 	 <p>...</p>
	 	 <ul>
	 	 	 <li><a>...</a></li>
	 	 </ul>
	 	 <p>...</p>
	 </div>
</div>
<div class="media">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body">
	 	 <p>...</p>
	 	 <ul>
	 	 	 <li><a>...</a></li>
	 	 </ul>
	 	 <p>...</p>
	 </div>
</div>
<div class="media">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body">
	 	 <p>...</p>
	 	 <ul>
	 	 	 <li><a>...</a></li>
	 	 </ul>
	 	 <p>...</p>
	 </div>
</div>
.media {
	 overflow: hidden; // Clearfix
	 *zoom: 1; // Clearfix
}
.media-image {
	 float: left;
	 margin-right: 10px;
}
.media-image 	> img {
	 display: block;
}
.media-body {
	 overflow: hidden;
}
<div class="media skin-a">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body">
	 	 <p>...</p>
	 	 <ul>
	 	 	 <li><a>...</a></li>
	 	 </ul>
	 	 <p>...</p>
	 </div>
</div>
<div class="media skin-b">
	 <div class="media-image">
	 	 <img src="/img/seminar/15/tani.jpg">
	 </div>
	 <div class="media-body">
	 	 <p>...</p>
	 	 <ul>
	 	 	 <li><a>...</a></li>
	 	 </ul>
	 	 <p>...</p>
	 </div>
</div>
SEpArAtE CoNtAiNeR AnD CoNtEnT
SEpArAtE StRuCtUrE AnD SkIn
h2 {
	 font-weight: bold;
	 font-size: 16px;
}
#news h2 {
	 border-bottom: 1px solid black;
	 padding-bottom: 0.5em;
}
h2 {
	 font-weight: bold;
	 font-size: 16px;
}
#news h2,
#speakers h2 {
	 border-bottom: 1px solid black;
	 padding-bottom: 0.5em;
}
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2>Session Title</h2>
	 <div>
	 	 <p>Summary</p>
	 </div>
</div>
®©°
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2>Session Title</h2>
	 <div>
	 	 <p>...</p>
	 </div>
	 <div>
	 	 <h2>Books</h2>
	 	 <ul>
	 	 	 <li>...</li>
	 	 </ul>
	 </div>
</div>
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2>Session Title</h2>
	 <div>
	 	 <p>...</p>
	 </div>
	 <div>
	 	 <h2>Books</h2>
	 	 <ul>
	 	 	 <li>...</li>
	 	 </ul>
	 </div>
</div>
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2>Session Title</h2>
	 <div>
	 	 <p>...</p>
	 </div>
	 <div>
	 	 <h2>Books</h2>
	 	 <ul>
	 	 	 <li>...</li>
	 	 </ul>
	 </div>
</div>
D¤
h2 {
	 font-weight: bold;
	 font-size: 16px;
}
.headline {
	 border-bottom: 1px solid black;
	 padding-bottom: 0.5em;
}
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2 class="headline">Session Title</h2>
	 <div>
	 	 <p>...</p>
	 </div>
	 <div>
	 	 <h2>Books</h2>
	 	 <ul>
	 	 	 <li>...</li>
	 	 </ul>
	 </div>
</div>
.heading {
	 font-weight: bold;
	 font-size: 16px;
}
.headline {
	 border-bottom: 1px solid black;
	 padding-bottom: 0.5em;
}
<div id="speakers">
	 <h1>Hiroki Tani</h1>
	 <h2 class="heading headline">Session
Title</h2>
	 <div>
	 	 <p>...</p>
	 </div>
	 <div>
	 	 <h2 class="heading">Books</h2>
	 	 <ul>
	 	 	 <li>...</li>
	 	 </ul>
	 </div>
</div>
®©°=DoN’t uSe iD!
*
®©°3SHoUlDn'T
uSe iD seLeCtOr
11
®©°=.colorRed {
color: red;
}
*
®©°311
.note {
color: red;
}
®©°3iF YoU NeEd It.
11
®©°
®©°SmAcSs
BY joNaThAn snOoK
cAtEgOrIzAtIoN
nAmInG CoNvEnTiOn
dEcOuPlInG CsS FrOm HtMl
cAtEgOrIzAtIoN
BAsE MOdUlE THeMeSTaTeLAyOuT
/* # Base */
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}
/* # Layout */
.l-header, l-article, l-footer {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-width: 1px 0 0;
}
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
/* # Layout */
#header, #article, #footer {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-width: 1px 0 0;
}
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
/* # Layout */
.l-container {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-width: 1px 0 0;
}
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
/* # State */
.is-hidden {
	 display: none;
}
.is-error {
	 font-weight: bold;
	 color: red;
}
.is-tab-active {
	 border-bottom-color: transparent;
}
/* # Theme */
/* ## Pink Theme CSS */
.theme-header {
	 background-image: url("/theme/pink/
header.png");
}
.theme-border {
	 1px solid pink;	
}
/* # Module */
/* ## Button */
.btn { ... }
.btn-primary { ... }
.btn-small { ... }
/* ## UIlist */
.uilist { ... }
.uilist-item { ... }
.uilist-item-icon { ... }
/* ## Widget */
.widget { ... }
.widget-title { ... }
.widget-body { ... }
<button class="btn btn-primary">Submit</button>
<a href="/help" class="btn btn-small">Help</a>
<button class="btn btn-success btn-large">
Complete!
</button>
<div class="widget">
	 <h2>Title</h2>
	 <p>Text</p>
</div>
.widget { ... }
.widget p {
	 margin-top: 10px;
	 margin-bottom: 10px;
}
<div class="widget">
	 <h2>Title</h2>
	 <ul>
	 	 <li>ListItem</li>
	 	 <li>ListItem</li>
	 	 <li>ListItem</li>
	 </ul>
</div>
.widget { ... }
.widget p,
.widget ul {
	 margin-top: 10px;
	 margin-bottom: 10px;
}
<div class="widget">
	 <h2>Title</h2>
	 <ul class="widget-body">
	 	 <li>ListItem</li>
	 	 <li>ListItem</li>
	 	 <li>ListItem</li>
	 </ul>
</div>
.widget { ... }
.widget-body {
	 margin-top: 10px;
	 margin-bottom: 10px;
}
®©°>
®©°,
‘RUlE Of ThReE’
®©°
3, 6, 9, 12, 15
,
‘RUlE Of ThReE’
®©°
3, 6, 9, 12, 15
,
‘RUlE Of ThReE’
®©°
3, 6, 12, 24, 48
,
‘RUlE Of ThReE’
®©°
3, 6, 9, 12, 15
,
‘RUlE Of ThReE’
®©°,
‘RUlE Of ThReE’
3, 6, 9, 12, 15
®©°DOnAlD e, knUtH
時期尚早な最適化は
諸悪の根源である。
... PrEmAtUrE OpTiMiZaTiOn Is ThE RoOt Of AlL EvIl.
®©°
®©°=NOt SeMaNtIcS!
*
®©°
すべてのセマンティックが
コンテンツ派生である必要はない。
... NoT AlL SeMaNtIcS NeEd To Be CoNtEnT-DeRiVeD.
NIcOlAs gaLlAgHeR
<div class="review">
<h1>CSS Architecture</h1>
<p class="reviewer">Review: <span>Hiroki Tani</
span></p>
<time datetime="2013-09-14">2013/09/14</time>
<p class="review-summary">CSS Bible!</p>
<p class="review-description">...</p>
Rating: <span class="rating">4.5</span>
</div>
<div itemscope itemtype="http://data-
vocabulary.org/Review">
<h1 itemprop="itemreviewed">CSS Architecture</
h1>
<p>Review: <span itemprop="reviewer">Hiroki
Tani</span></p>
<time itemprop="dtreviewed"
datetime="2013-09-14">2013/09/14</time>
<p itemprop="summary">CSS Bible!</p>
<p itemprop="description">...</p>
Rating: <span itemprop="rating">4.5</span>
</div>
®©°=*
ClAsS!ClAsS!ClAsS! ...
®©°311
/* Sass(.scss) */
%btn {
border-radius: 6px;
padding: 0.5em 1em;
background-color: #CCC;
}
.btn-primary {
@extend %btn;
background-image: linear-gradient(...);
color: #FFF;
}
/* CSS */
.btn-primary {
border-radius: 6px;
adding: 0.5em 1em;
background-color: #CCC;
background-image: linear-gradient(...);
color: #FFF;
}
<button class="btn-primary">Save</button>
/* Sass(.scss) */
%btn {
border-radius: 6px;
padding: 0.5em 1em;
background-color: #CCC;
}
%btn-primary {
border-radius: 6px;
padding: 0.5em 1em;
background-color: #CCC;
}
%btn-large {
font-size: 18px;
}
.save {
@extend %btn;
@extend %btn-primary;
@extend %btn-large;
}
/* CSS */
.save {
border-radius: 6px;
adding: 0.5em 1em;
background-color: #CCC;
background-image: linear-gradient(...);
color: #FFF;
font-size: 18px;
}
<button class="save">Submit</button>
.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:a
fter,.month2:after,.about:after,.sort:after,.mainList
ul:after,.mainList2 li
ul:after,.bnr_2col:after,.likeTool_lp:after,.flow:after,
.radio:after,.btn_entry_2col:after,.sort2:after,ul#popup
_message:after,.sort3:after,.f_circleList:after,.f_circl
eList a:after,.mainList3 dl:after,.mainList3
ul:after,.box_2col:after,.frame_desc dl:after {
content: "";
display: block;
clear: both;
height: 0;
}
®©°©°BEm
bY yaNdEx
/* # Module */
/* ## Button */
.btn { ... }
.btn-primary { ... }
.btn-small { ... }
/* ## Widget */
.widget { ... }
.widget-title { ... }
.widget-body { ... }
v vk.btn .btn-primary
MOdIfIeR
00
.widget
.widget-body
SUb-CoMpOnEnT
BLoCk,elEmEnT,moDiFiEr
BlOcK,ElEmEnT,MoDiFiEr
.ranking { ... }
.ranking__thumbnail { ... }
.ranking__item { ... }
.nav-line { ... }
.nav-line__item { ... }
.nav-line_separated { ... }
.nav-line_separated__item { ... }
/* # Module */
/* ## Button */
.btn { ... }
.btn_primary { ... }
.btn_small { ... }
/* ## Widget */
.widget { ... }
.widget__title { ... }
.widget__body { ... }
/* # Module */
/* ## Button */
.btn { ... }
.btn--primary { ... }
.btn--small { ... }
/* ## Widget */
.widget { ... }
.widget__title { ... }
.widget__body { ... }
®©°=*
UUuUgLy!
®©°=AgReEeE!
;
パターンライブラリ/CSSスタイルガイド/テスト
TOoL
®©©°
®©KsS
STyLeGuIdE geNeRaToR
®©°©°STyLedoCcO
STyLeGuIdE geNeRaToR
/*
A button suitable for giving stars to someone.
:hover - Subtle hover highlight.
.stars-given - A highlight indicating you've already given a
star.
.stars-given:hover - Subtle hover highlight on top of stars-given
styling.
.disabled - Dims the button to indicate it cannot be used.
Styleguide 2.1.3.
*/
a.button.star{
...
}
a.button.star.stars-given{
...
}
a.button.star.disabled{
...
}
COmPoNeNt
&
&
&
&
COmPoNeNt
&
&
&
&
WeB
BeSt pRaCtIcE
BeSt pRaCtIcES
®©°
どんなに多くの人が貢献したとしても、
どのコードも一人で書いたようにする。
ALl CoDe In AnY CoDe-BaSe ShOuLd LoOk LiKe A SiNgLe PeRsOn
tYpEd It, EvEn WhEn MaNy PeOpLe ArE CoNtRiBuTiNg To It.
NIcOlAs gaLlAgHeR
THaNkS
@HiLoKi
iNkDeSiGn.JpC
CrEdItS
http://www.flickr.com/photos/darice/8526800143/
http://www.flickr.com/photos/franksvalli/5173283924/
http://www.flickr.com/photos/bdesham/2432400623/

More Related Content

What's hot

HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
Atsushi Tadokoro
 
Joomla Day Austin Part 2
Joomla Day Austin Part 2Joomla Day Austin Part 2
Joomla Day Austin Part 2
Kyle Ledbetter
 

What's hot (20)

HTML, CSS i Javascript Web tehnologije - 2. predavanje - Startit.rs
HTML, CSS i Javascript Web tehnologije - 2. predavanje - Startit.rsHTML, CSS i Javascript Web tehnologije - 2. predavanje - Startit.rs
HTML, CSS i Javascript Web tehnologije - 2. predavanje - Startit.rs
 
Index
IndexIndex
Index
 
Microformats
MicroformatsMicroformats
Microformats
 
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)
 
Code blogtangcan
Code blogtangcanCode blogtangcan
Code blogtangcan
 
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
 
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
 
Johny see book update
Johny see book updateJohny see book update
Johny see book update
 
CSS 101
CSS 101CSS 101
CSS 101
 
Joomla Day Austin Part 3
Joomla Day Austin Part 3Joomla Day Austin Part 3
Joomla Day Austin Part 3
 
CSS Technieken Toegelicht
CSS Technieken ToegelichtCSS Technieken Toegelicht
CSS Technieken Toegelicht
 
box model
box modelbox model
box model
 
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
 
Joomla Day Austin Part 2
Joomla Day Austin Part 2Joomla Day Austin Part 2
Joomla Day Austin Part 2
 
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
 
Documento
DocumentoDocumento
Documento
 
Johny coba dulu
Johny coba duluJohny coba dulu
Johny coba dulu
 
Portafolio 2do Parcial
Portafolio 2do ParcialPortafolio 2do Parcial
Portafolio 2do Parcial
 
CSS-методологии от О до Б
CSS-методологии от О до БCSS-методологии от О до Б
CSS-методологии от О до Б
 
Presentación WP Versión Keynote
Presentación WP Versión KeynotePresentación WP Versión Keynote
Presentación WP Versión Keynote
 

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プリプロセッサの取扱説明書
 

Thinking about CSS Architecture