CSSおじさん#0に参加したメモ：メンテナンサブルCSS

「CSSおじさん#0」に土曜日参加してきました。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法の発売イベントとして開催されたものですが、セッション内で触れられたものやサービスについてなどメモしたものを覚書的に公開します。

1994.10.10ってなんの日？

CSSが生まれた年。ー＞今年で２０周年

20年間変わらないこと

CSSは壊れやすいー＞syntaxの易しさ。
簡単に書くことができる。
その時の流れで書き足しつづけるとtoo Fragileになる。肥大化、わけのわからないことになる。

• 開発時間kaihatujikan
• メンバー
• 技術力

でクソコードはよく生まれる。

「壊れない設計ではなく、壊れた時に勇気を持って修復できる設計をする」ことが重要

OOCSS

オブジェクト志向CSS

• SMACSS
• BEM
• FLOCSS
• などなど

CSS設計のポイント

セレクタは浅く、命名規則を持つ

• Emmet/Zen-codingのAliasを参考にするというのはアリ！
  .u-vam{ vertical-align: middle;}みたいな。
• ガイドラインも作っとくといい

３回繰り返したらコンポーネントの再設計

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版もあって、そちらのほうがちょっとお得です。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法