thinking about css architecture
DESCRIPTION
Frontrend in Osaka & Re:Creator's Kansai での講演スライドTRANSCRIPT
¥F CsSThInKiNg
ARcHiTeCtUrEFRoNtReNd iN OSaKaRe:cReatEr’S kAnSaISAtUrDaY, sEpTeMbEr 14 2013
AbOuT
HirOkI taNiCYbEragEnT, inC.
タイトル
@T32K
@AhOmU
@HiLoKi@HiLoKi
)APp
WeB
¤¥
なぜ設計を学ぶべきなのか
ARcHiTeCtUrE
k1BRoWsEr0PsD
q ku
¤¥
.text { color: black;}
.catchcopy { color: red;}
#message .text { color: green;}
10mIn
11l129 3
6¥
k11l129 3
6
10mIn 60mIn...aNd MoRe
11l129 3
611l129 3
6111
11l129 3
611l129 3
611l129 3
611l129 3
6
¤¥
k10mIn BUgS...
1 1 1±' lll
l l l
HH
±' lll
l l l
HH
±
' llll l l
HH
11l129 3
6
¤¥
GL?SOmEoNe
GL NG
?YOu
k11129
63
l
30mIn
11129
63
l
30mIn
¤¥
1CsS
1HtMl1CsS1Js
e良いCSS設計のゴールとは
GoAl
®©°
®©°PHiLiP waLtOnCsS arChItEcTuRe
®©°
®©°PHiLiP waLtOnCsS 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
®©°®©°OoCsSbY 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
o1
1
®©°=.colorRed { color: red;}
*
®©°3o11
.note { color: red;}
®©°3iF YoU NeEd It.
o1
1
®©°
®©°SmAcSsBY 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! ...
®©°3o11
/* 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:after,.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_circleList a:after,.mainList3 dl:after,.mainList3 ul:after,.box_2col:after,.frame_desc dl:after { content: ""; display: block; clear: both; height: 0;}
®©°®©°BEmbY 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!
®©°=o
AgReEeE!
h;
パターンライブラリ/CSSスタイルガイド/テスト
TOoL
®©©°
®©°KsSSTyLeGuIdE geNeRaToR
®©°®©°STyLedoCcOSTyLeGuIdE 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.Jp
¥C
CrEdItShttp://www.flickr.com/photos/darice/8526800143/
http://www.flickr.com/photos/franksvalli/5173283924/
http://www.flickr.com/photos/bdesham/2432400623/