読むに至った背景

現在、保守・運用中のサービスが近い将来CSS面で保守しにくくなりそうで、どうになならないかと思った。そこでメンテナブルなCSS設計するにはどうしたらいいのか？気になり読んでみることにした。

背景その２

私は開発責任者（システム開発部マネージャ）、バックエンド系エンジニアというポジション。

現職の企業では現在社内にフロントエンドエンジニア不在。他業務と兼用。ウェブページのデザインをする際は画面仕様を作成しそれをもとに外部発注。納品物を組み込んで使う流れ。

保守はバックエンドエンジニア、企画、デザイナー系の人が行っている。

考えたい内容としては、下記の２点を改善したい。 * 外部発注する際に何ができるか？ * 自分たちが保守する際に何ができるか？

内容

CSSの仕様説明
CSS設計/命名規則(BEM,SMACSS, OOCSS,etc…)、などの紹介
CSS設計～実装までの一連の流れを紹介（実際のできあがるまで）
- SCSS , gulp,kss(スタイルガイドジェネレータ), etc..

所感

文面が非常に読みやすい印象。
設計手法から具体的な実装方法まで掲載されているため、考え方は分かった・・・、それでどうやってる作るんだ？とはならない。コードも記載されておりダウンロードも可能なので実際に手を動かしながら習得できそうだ。当方は読んだだけです・・。

問題の改善

読むに至った経緯で出ていた問題点を改善するには？

共通点（発注、保守）

明確なコーディングルールがなかったため整備が必要。発注先のレギュレーションに準拠していたが明文化・検査を自動化していない。よって時間とともにCSSが複雑化する。納品後の保守はほぼ無法地帯。
ひとまずの解決案：静的解析ツールの導入( EditorConfig , CSSComb、etc…)。
スタイルガイドがない。
デバイスやブラウザによるデザイン崩れのチェックに使える
実装時のリファレンスになる
ひとまずの解決案：共通部品を抽出しスタイルガイドを作成する。スタイルガイド生成は自動化する。

導入している設計手法、命名規則を明文化し、静的解析により自動化できればとりあえずは改善できそうだ。スタイルガイドは無法地帯と化してる状況から新たに作ることは難しそう。しかし部品化されているルールセットも多少あるため、それらのスタイルガイドを作れそうだ。共通部品に限定してスタイルガイドが作れれば、多少はメンテナブルになると考えられる。特に人員の入れ替えが発生した場合には良いリファレンスになりそうだ。