CSSおじさん#0に参加したメモ:メンテナンサブルCSS
「CSSおじさん#0」に土曜日参加してきました。セッション内で触れられたものやサービスについてなどをざっとまとめた覚書的記事です。
目次
「CSSおじさん#0」に土曜日参加してきました。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法の発売イベントとして開催されたものですが、セッション内で触れられたものやサービスについてなどメモしたものを覚書的に公開します。
1994.10.10ってなんの日?
CSSが生まれた年。ー>今年で20周年
20年間変わらないこと
CSSは壊れやすいー>syntaxの易しさ。
簡単に書くことができる。
その時の流れで書き足しつづけるとtoo Fragileになる。肥大化、わけのわからないことになる。
- 開発時間kaihatujikan
- メンバー
- 技術力
でクソコードはよく生まれる。
「壊れない設計ではなく、壊れた時に勇気を持って修復できる設計をする」ことが重要
OOCSS
オブジェクト志向CSS
- SMACSS
- BEM
- FLOCSS
- などなど
CSS設計のポイント
セレクタは浅く、命名規則を持つ
- Emmet/Zen-codingのAliasを参考にするというのはアリ!
.u-vam{ vertical-align: middle;}みたいな。 - ガイドラインも作っとくといい
3回繰り返したらコンポーネントの再設計
Rule of 3
JSのターゲットにスタイルを持たせない
$(‘.profile .button’).hide();みたいなスクリプト。OOCSSが崩れる。
.js-Classで役割をわけてしまおう。
もしくはカスタムデータ属性使う。
直接記述は絶対しない
マジで後悔する。
コードの再利用が全てではない
再利用したセレクタ名が使用用途にあっているか?
デザイナーとのコミュニケーション
角丸のサイズや色の濃淡など微妙な差なら、デザインを統合させた方が良い。
CSSプリプロセッサは銀の弾丸か?
NO
例えばSass
スマートに処理する方法はある・・・が扱いが難しい。
Sassのファイルを触れる人はどれくらいいる?
Sassがコンパイルした後のコードはなかなか凄い・・・
CSSファイルやのに440kb(gzip後やけん960kbくらい?)
やっていいこと・ダメなことを決める
- extend/複雑なmixin/Nestしすぎ・・・ダメ!
- 変数・浅いネスト・importなど・・・OK!
- 色の一元管理のmixin
- hoverの記述を効率化
まとめ
完璧なCSSは壊れると大変
ヘミングウェイ「最初の原稿はクソ(the first draft of anything is shit)」
これからCSSを触るという方必見です
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
ちなみにKindle版もあって、そちらのほうがちょっとお得です。