thinking about css architecture

¥F CsSThInKiNg

ARcHiTeCtUrEFRoNtReNd iN OSaKaRe:cReatEr’S kAnSaISAtUrDaY, sEpTeMbEr 14 2013

HirOkI taNiCYbEragEnT, inC.

タイトル

@AhOmU

@HiLoKi@HiLoKi

なぜ設計を学ぶべきなのか

ARcHiTeCtUrE

k1BRoWsEr0PsD

.text { color: black;}

.catchcopy { color: red;}

#message .text { color: green;}

11l129 3

k11l129 3

10mIn 60mIn...aNd MoRe

11l129 3

611l129 3

11l129 3

611l129 3

k10mIn BUgS...

1 1 1±' lll

±' lll

' llll l l

11l129 3

GL?SOmEoNe

k11129

1HtMl1CsS1Js

e良いCSS設計のゴールとは

®©°

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

.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

.media { overflow: hidden; // Clearfix *zoom: 1; // Clearfix}.media-image { float: left; margin-right: 10px;}.media-image > img { display: block;}.media-body { overflow: hidden;}

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>

.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

®©°=.colorRed { color: red;}

®©°3o11

.note { color: red;}

®©°3iF YoU NeEd It.

®©°

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

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

®©°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;}

/* 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;}

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

パターンライブラリ/CSSスタイルガイド/テスト

®©©°

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

¤+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

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

http://www.flickr.com/photos/franksvalli/5173283924/

http://www.flickr.com/photos/bdesham/2432400623/

thinking about css architecture

1px solid

content separate

subtle hover

grid gt

li display

lll lll

solid ccc

headline border

Technology

lateral thinking and literal thinking in schubert’s...

[html, css] html & css learning

craft-thinking, digital making -compressed · on'...

css: conceptos básicosrua.ua.es › dspace › bitstream...

xml 문서 화면 표현 css 개념 css 사용법 css 문법

2 thinking in css how to build great looking sites

lean thinking e design thinking: aproximaÇÕes teÓricas

optymalizacja stylow css kurs tajniki css

css: ordenar un css - ordenar un … · css introducción...

aligning business architecture with business design overview...

css: ordenar un css - rua:...

creative thinking - creative thinking (6)

decision science creative thinking...

css grid layout w/ blueprint css

fostering whole-systems thinking through architecture: eco-...

css architecture for the future...

dreamweaver mx 2004 css css -...

buscas semânticas -...

creative thinking - creative thinking (2)

css-v1 und css-v2 für 19“- oder wandmontage ·...