「CSS設計とスタイルガイド」について発表してきた（※追記あり）

「CSS設計とスタイルガイド」について発表してきた。

内容はこんな感じ。

アジェンダ

1. CSSの性質
2. CSSは破綻する
3. CSS設計とは
4. モジュール思考
5. スタイルガイドの導入

CSSの性質

• 詳細度、セレクタ、後に書かれたものが優先される など
• 他人のコードを、リファクタリングするのは難しい
• 「スタイルガイド」があれば、ある程度予測がつく

CSSは破綻する

• 共同作業者がいると特に
• 詳細度、継承に振り回されるはめに
• ルール化が必要
• 「スタイルガイド」の活用で、スキルレベルを均一にできる（はず）

CSS設計とは

CSS設計 ＝ ベーステンプレート構築 ＋ モジュール作成

マクロ（レイアウト設計）の視点と、
ミクロ（モジュール設計）の視点が必要。

心がけることは下記4点

• 予測しやすい
• 再利用しやすい
• 保守しやすい
• 拡張しやすい

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

モジュール思考

• CSS設計はパズルと同じ
• 要素の組み合わせでサイトは成り立っているということを理解する
• 共通で使う部品と、個別で使う部品を振り分けていく作業
• モジュールを管理する上でも「スタイルガイド」は有用（なはず）

スタイルガイドの導入

• 簡単に言うと、パーツ集（モジュール）
• コードの説明とともに、事例を見せる
• 協業する際には役に立つ
• 作業の効率化
• クオリティの均一化
• ドキュメントとして成果物になる

事例

• よく参考にしていた事例
• Mailchimp：http://ux.mailchimp.com/patterns

今回の新しいチャレンジ

• いままで手動で作ってた、「スタイルガイド」をgulpで自動化して作ってみる
• 日本人が作っている、FrontNote（http://frontainer.com/frontnote/）、Aigis（https://pxgrid.github.io/aigis/）などを触ってみた
• 実際に案件で使ったことないので、いま動いてる案件で実装してみる

Demo

FrontNote

• CSSにコメントを書くことで反映される
• 記法を覚える必要がある
• 慣れるまでに時間がかかりそう
• デザインはカスタマイズできそう

 Aigis

• 環境構築でつまづいた
• 上記キャプチャはサンプルです（ http://pxgrid.github.io/aigis/sample/category/mod/btn/ ）
• FrontNoteより見やすい気がする
• またじっくり触ってみます

さいごに

人に話すことで、自分でも気づいてなかったことや、他人からの意見をいただけるのでとてもありがたい。

インプットおたくにならずに、アウトプットを積極的にしていく必要があるな。。。

話したあとに、いくつかご意見をいただきました。 ありがとうございます。

• スタイルガイドも重要だが、その前段階のコーディング規約の方が大事だと思う
• Aigisの導入につまづいた
• FrontNoteはシンプルで使いやすい
• 何度も使い回すモジュールにだけ、スタイルガイドを適用する
• スタイルガイドは、実装しながら作っていく

やっぱり、この本はじっくり読み返そう。。。

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

何気にサイン本だったりします。

おわり

きょうと。

— 小畑 タカユキ (@kobatatakayuki) 2016年6月9日

京都行った時のレポートもかかなければ。

追記（2016年6月11日 17:11）

なんと、 @nakajmg さんよりコメントいただきましたー( 0w0)ﾉ ｳｪｰｲ

aigisの環境構築、v1.1.0でやりやすくなったと思うので試してみてください😂 / “「CSS設計とスタイルガイド」について発表してきた - https://t.co/B5wQS8ZOmL” https://t.co/IbaRcpRiE9

— じまぐ (@nakajmg) 2016年6月11日

環境構築がやりやすくなったとのことで、再度チャレンジだ！

@nakajmg さん、ありがとうございます。