メンテナブルでありつづけるためのCSS設計3. 靼䬪埠 Hiroki Tani
Front-end Engineer
! github.com/hiloki
twitter.com/hiloki
inkdesign.jp
7. 20 years of CSS
鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ
،صً٦ءّٝծؿ؍ٕةծFUD
8. 20 years of CSS
鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ
،صً٦ءّٝծؿ؍ٕةծFUD
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 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;
}
…
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;
}
…
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;
}
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
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;
}
71. .s-box {
padding: 12px 16px;
border-radius: 8px;
background-color: #FFFFFF;
box-shadow: 0 0 2px #000;
}
80. .btn {
...
}
!
.btn--primary {
background-color: #F31;
color: #FFF;
}
!
.btn--large {
font-size: 1.5em;
}
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;
}
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;
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 {...}
...
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'
102. Thank you!
! github.com/hiloki
twitter.com/hiloki
inkdesign.jp