Thinking about CSS Architecture

¥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



®©°

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>



.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>



h2 { font-weight: bold; font-size: 16px;}

#news h2 { border-bottom: 1px solid black; padding-bottom: 0.5em;}


#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>



D¤


.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;}




/* # Layout */.l-container { width: 960px; margin: auto;}




/* # 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


®©°3, 6, 12, 24, 48


®©°3, 6, 9, 12, 15


®©°,‘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>

http://data-vocabulary.org/Review




®©°=*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/

http://www.flickr.com/photos/darice/8526800143/

http://www.flickr.com/photos/darice/8526800143/





Technology

Thinking about CSS Architecture