2015.02.24 第9回HTML5ビギナーズ CSSとCSS設計について学ぼう！ で使用したスライドです

1. 壊れやすいCSS
小林 正弘

2. 小林 正弘
Frontend Engineer

3. div {
background-color: red;
}
.hoge {
font-size: 16px;
}

4. div
}
.hoge
}
CSSはカンタン

5. ゆえに壊れやすい

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

7. Your CSS

8. Bad CSS
??

9. ??
BIG CSS
fragile CSS

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

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

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

20. 良いCSS設計のゴール

21. 良いCSS設計のゴール
・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい

22. 良いCSS設計のゴール
・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい

23. 良いCSS設計のゴール
・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい

24. 良いCSS設計のゴール
・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい

25. 良いCSS設計のゴール
・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい

31. ??

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

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

34. ボックスのmargin,
padding
画像の左寄せなどは
レイアウト
ボックスの背景色、
テキストの色、
画像の丸みなどは
デザイン

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

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

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

38. .profile {
background-color: #fff;
}
.profile .photo {
border-radius: 80px;
}
.item {
background-color: #0fb2a1;
}
.item .info {
color: #fff;
}

39. OOCSS

40. OOCSS
SMACSS

41. OOCSS
SMACSS BEM

42. OOCSS
SMACSS BEM SUIT CSS

43. FLOCSS

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

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

46. /*
## 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,

47. Nice Communication!

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

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

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

52. .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
ネストの使用は、３階層までが
好ましい。

53. .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 {
SASS

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

55. .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に指定する。

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

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

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

59. Thank You!