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

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

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

4.
1994.10.10

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

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

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

8.
$44כ㠨׸װְׅ

9.
㠨׸װְׅ ͑ 僒׃ְ

10.
Easy
.text {
color: green;
}

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

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

13.
! ⏲ #


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

15.
OOCSS
Nicole Sullivan
@stubbornella

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

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

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

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

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

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

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

23.
%

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

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

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

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

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

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

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

31.
OOCSS

32.
OOCSS
SMACSS
BEM
SUIT CSS
AMCSS
MCSS
FLOCSS

33.
⥯ך
$44鏣鎘ךه؎ٝز

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

35.
2 ㄏせ鋉⵱׾䭯א

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

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

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

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

40.
https://github.com/hiloki/flocss

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

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

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

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

45.
@
@
@


46.


47.


48.
@
@


49.


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

66.
.s-box {
padding: 12px 16px;
border-radius: 8px;
background-color: #FFFFFF;
box-shadow: 0 0 2px #000;
}

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

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

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

70.
No.


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

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

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

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

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

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

77.
Smart!

78.
Smart!
׃ַ׃䪔ְָꨇ׃ְ

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

80.
/* 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 {
border-radius: 12px;
border-radius: 12px;
}
.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 {
border-radius: 12px;
border-radius: 12px;

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

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

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

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

85.
// 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;

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

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

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

89.
/**
* 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'

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

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