More Related Content Similar to なんでCSSすぐ死んでしまうん (20) More from Hayato Mizuno (10) なんでCSSすぐ死んでしまうん6. “CSSはその単純さゆえに、
大規模な実装では管理が難しい。
BIG CSS
“CSS, for all its simplicity, is a difficult language to manage in
large-scale implementations. ”
- MVCSS / Overview
https://www.youtube.com/http://watch?mvcss.v=github.R-BX4N8egEc
io/
https://www.flickr.com/photos/nickpiggott/5212359135
7. 簡単なシンタックス ≠ 簡単な言語
! 異なるバージョンとブラウザベンダーへの依存
! ネームスペースの問題
! 紳士協定だけでルBIG ールをCSS
制限する難しさ
! …
https://www.youtube.com/watch?v=R-BX4N8egEc
https://www.flickr.com/photos/nickpiggott/5212359135
11. メンテナンス
60%
開発
40%
http://d.hatena.ne.jp/asakichy/20120420/1334872770
12. メンテナンス
60%
開発
40%
要件変更
60%
移行
23%
バグ修正
17%
http://d.hatena.ne.jp/asakichy/20120420/1334872770
13. メンテナンス
60%
開発
40%
コードを
理解する時間
30%
http://d.hatena.ne.jp/asakichy/20120420/1334872770
14. 良いCSS設計のゴール
メンテナンス
60%
開発
40%
コードを
理解する時間
30%
http://article.enja.io/articles/css-architecture.html
http://d.hatena.ne.jp/asakichy/20120420/1334872770
! 予測しやすい
! 再利用しやすい
! 保守しやすい
! 拡張しやすい
26. <paper-button label="button">
</paper-button>
!
<paper-button label="button"
raisedButton>
</paper-button>
Visual Non-visual
! <core-icon>
! <core-list>
! <core-overlay>
! …
! <core-ajax>
! <core-media-query>
! <core-localstorage>
! …
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button
38. HTML
<a class="button button-raised">Download</a>
CSS
.button { ... }
.button-raised {
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.button-large {
font-size: 24px;
}
39. HTML
<a class="button button-large">Download</a>
CSS
.button { ... }
.button-raised {
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.button-large {
font-size: 24px;
}
43. .panel { ... }
!
.panel-colored { ... }
ステートルール
- SMACSS -
https://smacss.com/book/type-state
47. .panel { ... }
!
/* States */
.panel:hover,
.panel.is-active { ... }
62. .button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
background: #f12078;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor: pointer;
user-select: none;
}
63. .button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
background: #f12078;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor: pointer;
user-select: none;
}
ベースは後から
変更するのが難しい
64. .button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
background: #f12078;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor: pointer;
user-select: none;
}
Modifierで
拡張すべき要素か
どうかをよく検討する
65. .button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
background: #f12078;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 18px;
cursor: pointer;
user-select: none;
}
76. .panel { ... }
!
.heading 関{ 連...す }る 要素として
捉えるなら
サブコンポーネント
として定義する
78. .panel { ... }
!
.panel-heading { ... }
もしくは命名で
どのようなルールが
適用されるかを伝える
84. .panel {
float: left;
box-sizing: border-box;
margin-right: 20px;
padding: 20px;
width: 220px;
background: #fff;
}
85. .panel {
float: left;
box-sizing: border-box;
margin-right: 20px;
padding: 20px;
width: 220px;
background: #fff;
}
87. .l-featured .panel {
float: left;
margin-right: 20px;
width: 220px;
} ユーティリティで
対応する
- SUIT CSS -
https://github.com/suitcss
89. .u-float-left {
float: left;
}
!
.u-margin-r-m {
margin-right: 20px;
}
!
...
グリッドシステム
を活用する
- Kite -
http://hiloki.github.io/kitecss/
90. <div class="kite kite--grid has-gutter">
<div class="panel kite__item is-3of12">
...
</div>
<div class="panel kite__item is-3of12">
...
</div>
<div class="panel kite__item is-3of12">
...
</div>
<div class="panel kite__item is-3of12">
...
</div>
</div>
100. .button { ... }
!
.button-raised { ... }
!
.button-large { ... }
101. .button { ... }
!
.button—-raised { ... }
!
.button—-large { ... }
114. .button {
box-sizing: border-box;
padding: 12px 26px;
text-align: center;
}
!
.button—-no-padding {
スタイルの取り消し
padding: 0;
}
115. .button {
box-sizing: border-box;
padding: 12px 26px;
text-align: center;
}
!
.button—-no-padding {
スタイルの取り消し
padding: 0;
}
116. .button {
box-sizing: border-box;
text-align: center;
}
!
.button—-large {
スタイルの取り消し
padding: 12px 26px;
}
122. #main .button {
margin: 20px !important;
width: 100% !important;
受動的な詳細度
}
123. #main .button {
margin: 20px !important;
width: 100% !important;
受動的な詳細度
}