Thinking about CSS Architecture

CsS
ThInKiNg
ARcHiTeCtUrE
FRoNtReNdiNOSaKa
Re:cReatEr’S kAnSaI
SAtUrDaY, sEpTeMbEr 14 2013
AbOuT

タイトル
@T32K
@AhOmU
@HiLoKi@HiLoKi

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

.text {
color: black;
}
.catchcopy {
color: red;
}
#message .text {
color: green;
}

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

k1112
9
6
3
l
30mIn
1112
9
6
3
l
30mIn
¤
¥

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

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

Thinking about CSS Architecture

SEpArAtE CoNtAiNeR AnD CoNtEnT
SEpArAtE StRuCtUrE AnD SkIn

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

h2 {
font-weight: bold;
font-size: 16px;
}
#news h2,
#speakers h2 {
}

<div id="speakers">
<h1>Hiroki Tani</h1>
<h2>Session Title</h2>
<div>
<p>Summary</p>
</div>
</div>

<div id="speakers">
<h2>Session Title</h2>
<div>
<p>...</p>
</div>
<div>
<h2>Books</h2>
<ul>
<li>...</li>
</ul>
</div>
</div>

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

<div id="speakers">
<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 {
}

<div id="speakers">
<h2 class="heading headline">Session
Title</h2>
<div>
<p>...</p>
</div>
<div>
<h2 class="heading">Books</h2>
<ul>
<li>...</li>
</ul>
</div>
</div>

®©°3SHoUlDn'T
uSe iD seLeCtOr
11

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

®©°311
.note {
color: red;
}

®©°
®©°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;
}
.l-grid {
margin: 0;
padding: 0;
}
.l-grid > li {
}

/* # Layout */
.l-container {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
}
.l-grid {
margin: 0;
padding: 0;
}
.l-grid > li {
}

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

<h2>Title</h2>
<ul>
<li>ListItem</li>
<li>ListItem</li>
<li>ListItem</li>
</ul>
</div>

.widget { ... }
.widget p,
.widget ul {
margin-top: 10px;
}

<h2>Title</h2>
<ul class="widget-body">
<li>ListItem</li>
<li>ListItem</li>
<li>ListItem</li>
</ul>
</div>

.widget { ... }
.widget-body {
margin-top: 10px;
}

®©°
3, 6, 9, 12, 15
,
‘RUlE Of ThReE’

®©°
3, 6, 12, 24, 48
,
‘RUlE Of ThReE’

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

/* 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;
color: #FFF;
}

/* Sass(.scss) */
%btn {
border-radius: 6px;
padding: 0.5em 1em;
}
%btn-primary {
border-radius: 6px;
padding: 0.5em 1em;
}
%btn-large {
font-size: 18px;
}
.save {
@extend %btn;
@extend %btn-primary;
@extend %btn-large;
}

/* CSS */
.save {
border-radius: 6px;
adding: 0.5em 1em;
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;
}

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

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

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

/*
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{
...
}

®©°
どんなに多くの人が貢献したとしても、
どのコードも一人で書いたようにする。
ALl CoDe In AnY CoDe-BaSe ShOuLd LoOk LiKe A SiNgLe PeRsOn
tYpEd It, EvEn WhEn MaNy PeOpLe ArE CoNtRiBuTiNg To It.
NIcOlAs gaLlAgHeR

CrEdItS
http://www.flickr.com/photos/darice/8526800143/
http://www.flickr.com/photos/franksvalli/5173283924/
http://www.flickr.com/photos/bdesham/2432400623/

Thinking about CSS Architecture

Recommended

More Related Content

What's hot (20)

More from 拓樹谷 (6)