2014年11月8日 大阪 「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。

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

5. 1994.10.10

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

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

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

9. $44כ㠨׸װְׅ

10. 㠨׸װְׅ ͑ 僒׃ְ

11. Easy
.text {
color: green;
}

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

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

14. ! ⏲ #


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

16. OOCSS
Nicole Sullivan
@stubbornella

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

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

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

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

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

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

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

24. %

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

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

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

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

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

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

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

33. OOCSS

34. OOCSS
SMACSS
BEM
SUIT CSS
AMCSS
MCSS
FLOCSS

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

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

37. 2 ㄏせ鋉⵱׾䭯א

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. /* Media */
.media {
overflow: hidden; /* Clearfix */
}
.media .image {
float: left;
margin-right: 15px;
}
.media .body {
overflow: hidden;
}

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

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

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

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

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

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

48. @
@
@


49. 

50. 

51. @
@


52. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

78. No.


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

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

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

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

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

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

86. Smart!

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

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

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

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

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

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

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

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

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

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

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

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

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

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