壊れやすいCSS

小林 正弘

小林 正弘

Frontend Engineer

div { background-color: red;}

.hoge { font-size: 16px;}

div }

.hoge }

CSSはカンタン

ゆえに壊れやすい

CSSが壊れるって どういうこと？

Your CSS

Bad CSS

??

??

BIG CSSfragile CSS

??

＿人人人人人人人人人人人人人人人人人人人＿＞　これは近い未来のあなたかも知れない　＜‾Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y‾

htmlの構造に依存しすぎない

スタイルの打ち消しを多用

良いCSS設計のゴール

良いCSS設計のゴール

・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい

良いCSS設計のゴール

・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい

良いCSS設計のゴール

・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい

良いCSS設計のゴール

・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい

良いCSS設計のゴール

・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい

??

.item { overflow: hidden; /* Clearfix */padding: 15px;background-color: #eee;

} .item .photo {

float: left; margin-right: 15px;

}.item .info {

overflow: hidden;}

……

.profile { overflow: hidden; /* Clearfix */padding: 20px;background-color: #fff;

} .profile .image {

float: left; border-radius: 80px;

margin-right: 15px;}.profile .text {

overflow: hidden;}

……

.item { overflow: hidden; /* Clearfix */padding: 15px;background-color: #eee;

} .item .photo {

float: left; margin-right: 15px;

}.item .info {

overflow: hidden;}

……

.item { overflow: hidden; /* Clearfix */padding: 20px;background-color: #0fb2a1;

} .item .photo {

float: left; margin-right: 15px;

}.item .info { color: #fff;

overflow: hidden;}

……

ボックスのmargin, padding 画像の左寄せなどは レイアウト

ボックスの背景色、 テキストの色、 画像の丸みなどは デザイン

.sample-block { overflow: hidden; /* Clearfix */padding: 15px;

} . sample-block__image {

float: left; margin-right: 15px;

}. sample-block__body {

overflow: hidden;}

……

.sample-block { overflow: hidden; /* Clearfix */padding: 20px;

} . sample-block__image {

float: left; margin-right: 15px;

}.sample-block__body {

overflow: hidden;}

……

<div class="sample-block profile"> <div class="sample-block__image"> <img src="profile.jpg"> </div> <div class="sample-block__body"> <p classs="discription">...</p> </div> <ul> <li>...<li> </ul></div>

<div class="sample-block profile"> <div class="sample-block__image photo"> <img src="profile.jpg"> </div> <div class="sample-block__body greeting"> <p class=”name”>...</p> <p classs="greeting">...</ </div> <ul> <li>...<li> </ul></div>

<div class="sample-block item"> <div class="sample-block__image cover"> <img src="item.jpg"> </div> <div class="sample-block__body info"> <p class=”item_name”>...</p> <p classs="item_discription">...</ </div> <ul> <li>...<li> </ul></div>

.profile { background-color: #fff;

} .profile .photo { border-radius: 80px;}

.item { background-color: #0fb2a1;

} .item .info { color: #fff;}

OOCSS

OOCSS

SMACSS

OOCSS

SMACSS BEM

OOCSS

SMACSS BEM SUIT CSS

FLOCSS

どんなスタイルが 有るのかすぐにわからない

??

本セッションでは、壊れやすいCSSと題しまして、いくつかのバッドプラクティスを紹介しつつCSS設計の概念や大切さを改めて再確認していただければな、と思います。

button A

button B

/*## Headings and paragraphs```<div class="kalei-comments"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p class="fixie"></p> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul></div>

```*/

.kalei-comments > h1,

.kalei-comments > h2,

.kalei-comments > h3,

.kalei-comments > h4,

Nice Communication!

CSSプリプロセッサの 落とし穴

.list { background-color: #fff; .list__item { & + .list__item { border-top: 1px solid #f3e2ee; } .go:before { font-size: 12px; } .list__item__content { position: relative; display: block; padding: 15px; &.list__item__content--s { padding: 10px; } .feed-list__item.box { & + .box { margin-top: 20px; } .side__ranking-list-item { padding: 10px; & + .side__ranking-list-item { border-top: 1px solid #f3e2ee; }

SASS

.list { background-color: #fff;}.list .list__item + .list__item { border-top: 1px solid #f3e2ee;}.list .list__item .go:before { font-size: 12px;}.list .list__item .list__item__content { position: relative; display: block; padding: 15px;}.list .list__item .list__item__content.list__item__content--s { padding: 10px;}.list .list__item .list__item__content .feed-list__item.box + .box { margin-top: 20px;}.list .list__item .list__item__content .feed-list__item.box .side__ranking-list-item { padding: 10px;}

CSS

.list { background-color: #fff;}.list .list__item + .list__item { border-top: 1px solid #f3e2ee;}.list .list__item .go:before { font-size: 12px;}.list .list__item .list__item__content position: relative; display: block; padding: 15px;}.list .list__item .list__item__content.list__item__content--s padding: 10px;}.list .list__item .list__item__content .feed-list__item.box + .box margin-top: 20px;}.list .list__item .list__item__content .feed-list__item.box .side__ranking-list-item padding: 10px;}

CSS

ネストの使用は、３階層までが 好ましい。

.clearfix:before,

.clearfix:after { content: ''; display: table !important;}.clearfix:after { clear: both;}

.list-a { color: #fff; @extend .clearfix;}.list-b { @extend .clearfix;}.list-c { @extend .clearfix;}.list-d { @extend .clearfix;}.list-e { @extend .clearfix;

SASS

.clearfix:before, .list-a:before, .list-b:before, .list-c:before, .list-d:before, .list-e:before, .list-f:before, .list-g:before,.clearfix:after,.list-a:after,.list-b:after,.list-c:after,.list-d:after,.list-e:after,.list-f:after,.list-g:after { content: ''; display: table !important;}

.clearfix:after, .list-a:after, .list-b:after, .list-c:after, .list-d:after, .list-e:after, .list-f:after, .list-g:after { clear: both;}

.list-a { color: #fff;}

CSS

.clearfix:before, .list-a:before, .list-b:before, .list-c:before, .list-d:before, .list-e:before, .list-f:before, .list-g:before,.clearfix:after,.list-a:after,.list-b:after,.list-c:after,.list-d:after,.list-e:after,.list-f:after,.list-g:after content: ''; display: table !important;}

.clearfix:after, .list-a:after, .list-b:after, .list-c:after, .list-d:after, .list-e:after, .list-f:after, .list-g:after clear: both;}

.list-a { color: #fff;}

CSS

多用するclassはユーティリティ としてhtmlに指定する。

CSSプリプロセッサは 設計の難しさを解決するものではない

やっぱりCSSは 壊れやすいです

壊れない完璧な設計を求めるのではなく、 壊れた時に勇気を持って修復できる設計を。“

ーcssradar

Thank You!