メンテナブルでありつづけるためのCSS設計

ًٝذشـٕד֮׶אבֽ׷׋׭ך$44鏣鎘
8FCⵖ⡲罏ך׋׭ך$44鏣鎘ך侄猰剅$44ؔآ؟ٝ

http://www.slideshare.net/hiloki/thinking-about-css-architecture

靼䬪埠 Hiroki Tani
Front-end Engineer
! github.com/hiloki
twitter.com/hiloki
inkdesign.jp

http://codepen.io/hiloki/full/ahdEF

20 years of CSS
鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ
،صً٦ءّٝծؿ؍ٕةծFUD

Easy
.text {
color: green;
}

Easy
.text {
color: green;
}
!
.lead .text {
color: blue
}
div class=lead
/div

too
Fragile
#main { ... }
#main .article { ... }
#main .article .title { #main .breaking .title { #header #logo img { ... #header li#logoTop { ... #header li#logoTop:after .article-header .datetime ul.member-list li.member .widget p,.widget ul { ... #sidebar .widget { ... }
#sidebar li a.register{}
body.landing #main section #slider-control div { #bannerList li div#rotate

㠨׸זְ㸣樴ז鏣鎘׾実׭׷ךדכזֻծ
㠨׸׋הֹח⹃孡׾䭯׏ג⥜䗁דֹ׷鏣鎘׾ ˑ
俕谏牂⛲

OOCSS
Nicole Sullivan
@stubbornella

http://codepen.io/hiloki/full/dnGeB

div class=speaker
div class=image
img src=tani.jpg
/div
div class=inner
p class=name…/p
div class=biography
p.../p
/div
/div
/div

.speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-right: 15px;
}
.speaker .image img {
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
…

div class=book
div class=cover
img src=book.jpg
/div
div class=inner
p class=title.../p
p class=info
...
/p
div class=intro
p.../p
/div
ul class=shop
li.../li
/ul
/div
/div

.book {
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book .cover {
float: left;
margin-right: 20px;
}
.book .inner {
overflow: hidden;
}
.book .title {
...
}
...

div class=event
a href=event.html
div class=thumbnail
img src=event.jpg
/div
div class=inner
p class=event__name
…
/p
/div
/a
/div

.event a {
display: block;
}
.event .thumbnail {
float: left;
margin-right: 15px;
}
.event .inner {
overflow: hidden;
}
…

/* Media */
.media {
}
.media__image {
float: left;
margin-right: 15px;
}
.media__body {
overflow: hidden;
}

div class=media speaker
div class=media__image image
img src=tani.jpg
/div
div class=media__body inner
p class=name…/p
div class=biography
p.../p
/div
/div
/div

div class=media book
div class=media__image cover
img src=book.jpg
/div
p class=title.../p
p class=info
...
/p
div class=intro
p.../p
/div
ul class=shop
li.../li
/ul
/div
/div

div class=media event
a href=event.html
div class=media__image thumbnail
img src=event.jpg
/div
p class=event__name
…
/p
/div
/a
/div

OOCSS
SMACSS
BEM
SUIT CSS
AMCSS
MCSS
FLOCSS

1 إؙٖةכ崮ֻծ䠐㔳涸ח

/* Media */
.media {
}
.media .image {
float: left;
margin-right: 15px;
}
.media .body {
overflow: hidden;
}

https://github.com/hiloki/flocss

/* Media */
.c-media {
}
.c-media__image {
float: left;
margin-right: 15px;
}
.c-media__body {
overflow: hidden;
}

!-- 一般的でない略称は避ける --
div class=c-wdt p-rcmdTpcs__li
よくわからない
/div
!
div class=c-widget p-recommendTopics__list
長い...が分かる
/div

/* Emmet/Zen-codingのAliasを参考にする */
.u-mts { margin-top: 10px } /* margin-top small */
.u-vam { vertical-align: middle }
.u-fl { float: left }

3 㔐粸׶鵤׃׋׵؝ٝه٦طٝزךⱄ鏣鎘

4 +4ךة٦؜حزחأة؎ٕ׾䭯׋ׇזְ

$('.profile .button')
.on('click', function(e){
...
});

div class=profile
...
button class=button
Save!
/button
/div

div class=profile
...
button class=“profile__button”
Save!
/button
/div

$('.js-save-profile')
.on('click', function(e){
...
});

/* スタイルを持たせてはいけない */
.js-save-profile {
...
}

div class=profile
...
button class=“button js-save-profile“
Save!
/button
/div

div class=profile
...
button class=“profile__button
js-save-profile”
Save!
/button
/div

button class=c-button js-tap”
Tappable
/button
!
!-- カスタムデータ属性を使う --
button class=c-button data-tap
Tappable
/button

5 TUZMF㾩䚍דך鎸鶢כ窫㼎׃זְ

div style=“margin-bottom: 242pxblah blah blah/div

6 ؝٦سךⱄⵃ欽ָׅץגדכזְ

h1 class=section heading
The Heading
/h1
!
div class=section
The Box
/div

.section {
padding: 12px 16px;
border-radius: 8px;
background-color: #FFFFFF;
box-shadow: 0 0 2px #000;
}
!
.heading {
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
}

.section {
padding: 12px 16px;
border-radius: 8px;
}
!
.heading {
margin-bottom: 20px;
padding: 12px 16px;
border-radius: 8px;
font-size: 18px;
font-weight: bold;
}

h1 class=heading
The Heading
/h1
!
div class=section
The Box
/div

.s-box {
padding: 12px 16px;
border-radius: 8px;
}

h1 class=“s-box heading”
The Heading
/h1
!
div class=s-box section
The Box
/div

7 رؠ؎ش٦הך؝ىُص؛٦ءّٝ

$44فٔفٗإح؟כ鏣鎘ך㉏겗׾鍑寸ׅ׷

.btn {
...
}
!
.btn--primary {
background-color: #F31;
color: #FFF;
}
!
.btn--large {
font-size: 1.5em;
}

a class=btn btn--primarySave/a
!
a class=btn btn--primary btn--largeRegister/a

%btn {
display: inline-block;
border-radius: 6px;
vertical-align: middle;
padding: .6em 1em;
cursor: pointer;
}
!
%btn--primary {
color: #FFF;
font-weight: 700;
}
!
%btn--large {
font-size: 1.5em;
}

.save-button {
@extend %btn;
@extend %btn--primary;
}
!
.register-button {
@extend %btn;
@extend %btn--primary;
@extend %btn--large;
}

.save-button, .register-button {
display: inline-block;
border-radius: 6px;
vertical-align: middle;
padding: .6em 1em;
cursor: pointer;
}
!
.save-button, .register-button {
color: #FFF;
font-weight: 700;
}
!
.register-button {
font-size: 1.5em;
}

a class=save-buttonSave/a
!
a class=register-buttonRegister/a

.mod_listType1 {
section {
margin-bottom:1em;
}
h1 {
margin:0 0 .5em .5em;
font-size:fz(15);
-webkit-text-shadow:0px 1px 0px rgba(255,255,255,0.75);
text-shadow:0px 1px 0px rgba(255,255,255,0.75);
}
ul {
background-color:#ffffff;
border:#c3c3c3 1px solid;
overflow:hidden;
@include radius(12px);
li {
border-top:#C3C3C2 1px solid;
margin-top:-1px;
margin-bottom:1px;
font-size:fz(16);
:first-child {
a.disable {
@include radius-tr(12px);
@include radius-tl(12px);
}

/* listType */
.mod_listType1 section, .mod_listType3 section, .mod_listType4 section, .mod_listType5
section, .mod_listType8 section, .mod_listType7 section {
margin-bottom: 1em;
}
.mod_listType1 h1, .mod_listType3 h1, .mod_listType4 h1, .mod_listType5 h1, .mod_listType8
h1, .mod_listType7 h1 {
margin: 0 0 .5em .5em;
font-size: 15px;
-webkit-text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
}
.mod_listType1 ul, .mod_H[JQ䖓
listType3 ul, .mod_listType4 ul, .mod_listType5 ul, .mod_listType8
ul, .mod_listType7 ul {
background-border: overflow: border-440kb
color: #ffffff;
#c3c3c3 1px solid;
hidden;
radius: 12px;
}
.mod_listType1 ul li, .mod_listType3 ul li, .mod_listType4 ul li, .mod_listType5 ul li, .mod_listType8 ul
li, .mod_listType7 ul li {
border-top: #C3C3C2 1px solid;
margin-top: -1px;
margin-bottom: 1px;
font-size: 16px;
}
.mod_listType1 ul li:first-child a.disable, .mod_listType3 ul li:first-child a.disable, .mod_listType4 ul
li:first-child a.disable, .mod_listType5 ul li:first-child a.disable, .mod_listType8 ul li:first-child
a.disable, .mod_listType7 ul li:first-child a.disable {
}
.mod_listType1 ul li:last-child a.disable, .mod_listType3 ul li:last-child a.disable, .mod_listType4 ul
li:last-child a.disable, .mod_listType5 ul li:last-child a.disable, .mod_listType8 ul li:last-child
a.disable, .mod_listType7 ul li:last-child a.disable {

Do
1BSUJBM!JNQPSU
知⽃ז!NJYJO
ⵖꣲׁ׸׋طأز
㢌侧
Don’t
!FYUFOE
!醱꧟זNJYJO
ؕآُ،ٕזطأز

.c-button--primary {
$primaryColor: #F31;
background-color: $primaryColor;
:hover {
background-color: mix($primaryColor,#FFF,80%);
}
}

// pc.app.scss
//
// Foundation
@import foundation/normalize;
@import foundation/variables;
@import foundation/mixin;
@import “foundation/base”;
!
// Layout
@import layout/app;
!
// Object
@import object/components/button;
@import object/components/avatar;
@import object/components/media;
@import object/project/header;
@import object/project/profile;
@import object/project/articles;

// object/project/_profile.scss
//
// ===============
// # Profile
// ===============
!
.p-profile {...}
.p-profile__avatar {...}
.p-profile__name {...}
.p-profile__biography {...}
...

pc.app.scss pc.lp.scss sp.app.scss sp.lp.scss

/**
* Concatenation
**/
concat: {
pc: {
files: {
'temp/pc.app.scss': [
'app/stylesheets/foundation/*.scss',
'app/stylesheets/layout/_app.scss',
'app/stylesheets/object/component/*.scss',
'app/stylesheets/object/project/*.scss',
'app/stylesheets/object/utility/*.scss'
]
}
},
sp: {
files: {
'temp/sp.app.scss': [
'app/stylesheets/foundation/*.scss',
'app/stylesheets/layout/_app.scss',
'app/stylesheets/object/component/sp/*.scss',
'app/stylesheets/object/project/sp/*.scss',
'app/stylesheets/object/utility/sp/*.scss'

The first draft ˑ of anything is shit
قىؚٝؐؑ؎

Thank you!
! github.com/hiloki
twitter.com/hiloki
inkdesign.jp

メンテナブルでありつづけるためのCSS設計

More Related Content

What's hot (20)

Viewers also liked (18)

More from 拓樹谷 (6)