CSS設計の教科書を読んだ
読了。今まではCSSの書き方ばっかで、構成についてとかの本は少なかったけど比較的読みやすく良本だった。
読んでいて、これはメモらねばと思ったのをだらだらまとめた。
破綻しやすいCSS -HTMLの構造に依存-
生のセレクタに当てると、HTMLの構造が変わった時に辛い。
これ、例外もあるけどたまにやってしまってるので気をつけたい。
<section>
<h1>
破綻しそう
</h1>
</section>
section h1 {
font-size: 20px;
}
Classセレクタを使っていこうぞい。
<section class="saikou">
<h1 class="sikou-title">
破綻しそう
</h1>
</section>
.sikou-title {
font-size: 20px;
}
コンポーネントについて
普段、SMACSSを利用してるけど、いまいちやり方が正しいのか不安だったのでその払拭に繋がった。
- base --default style
- layout --layout style (header, footer...)
- Module --almighty category
- State --javascript style
- Theme --change theme
接頭語
layoutには接頭語にl-を付ける。
moduleには接頭語にm-を付ける。
stateには接頭語にis-を付ける。
意図
- クラス名の重複に寄る競合と汚染を減らすように書く。
- クラス名を見て、どのコンポーネントの拡張かが分かるように書く。
- セレクタの詳細度を減らす。
他の開発者とのやりとり
開発においては、多分個人の判断でこれがないとCSS書きたくないとかは通用しないのでお互いに
相談したほうが良さそう。(どういう設計、どんなコンポーネントを参考にするか)
あと、引き継ぎのためにもドキュメントは必ず用意しといた方が良い。
最近、BEMっぽいCSSを引き継いだけどドキュメント無くて割と辛かった思い出がある。
どうやって設計するか
最適化を意識しすぎない
全ての場面で再利用できるようなコンポーネントを作るのは不可能と考える。
それと、初期段階から無理に最適化しようとしない。
DRY:Don't Repeat Yourself
DRYの精神に従って、同じ実装を三回しようとしたら一旦書くのを辞めてコードを見直す。
THE リファクタリングチャンス。
SOLID CSS
- single Responsibility Principle --単一責任
- Open / Closed Pricciple --開放/閉鎖
単一責任の原則
1つのオブジェクトは1つの責任だけ持つべき。
一つのclassに見た目の装飾や、位置の装飾が重なりすぎるのはあまり良くない。
軽い気持ちで分離してみる。
開放/ 閉鎖の原則
1つのコンポーネントにスタイルを当てすぎない。
過剰に制御し過ぎることで、結果再利用が不可能になったり新たに書く必要がある。
最低限のスタイルを付与するのを意識する。
運用に必要なルール
コメントを付ける
コンポーネントの説明だったり、マークアップ例だったり。
コメントが冗長的にならないように気をつける。
ドキュメント / スタイルガイドを作る。
色んな会社のコーディングルールとか見て、君だけの最強のドキュメントを作ろう。
スタイルガイドは
- styledecco
- kalei
- KSS
らへんがメジャー。
実際にkalei採用してみたけど良い感じだった。