CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ
Post on:2015年7月24日
sponsors
大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分が見ても分かる、メンテナンス性に優れ、一貫性のあるCSSを書くのに役立つガイドラインやスタイルガイドを紹介します。
Code Guide
翻訳版：コーディングガイド
大規模プロジェクトでの何年もの経験を元に、柔軟で耐久性に優れた持続可能なコーディングルールを文章化したプロジェクト。
CSS WizardryのHigh-level guidelinesの最新版（2014年8月リリース）。
大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。
上記のCSS WizardryのCSS Guidelinesの前の版を日本語に翻訳したもの。2とは内容が異なります。
idiomatic CSS
翻訳版：一貫性のあるCSSらしいCSSを書くための原則
複数の制作者が書くスタイルシートを一貫性のあるものにするためのガイドライン。命名規則やコメントの書き方、ホワイトスペースの入れ方などをルールを決めることで、明確で分かりやすいコードになります。
Google HTML/CSS Style Guide
翻訳版：「Google HTML/CSS Style Guide」を適当に和訳してみた
2012年にGoogleが公開したStyle Guideで、現在バージョンは2.23。他のと比べると軽量化に重点がおかれたガイドラインになっています。
Primer -guidelines that power GitHub
2015年3月にリリースされたGitHubのフロントエンドのデザインを提供するツールで、それに伴いGitHubのガイドラインもPrimerに移行されました。
The CodePen Design Patterns and Style Guide
CodePenで使用されているデザインパターンとスタイルガイドです。ページで見かけるエレメントが全部揃っています。
LESS Coding Guidelines -Medium
Medium's old style guid
Mediumのスタイルを生成するLESSのコーディングガイドライン。「old style guid」には良い例・悪い例の記載もあり、興味深い内容となっています。
Global CSS settings -Bootstrap
Bootstrapとグリッドや基本要素のスタイルガイドです。
下記も参考にどうぞ。
WordPress CSS Coding Standards
WordPressのガイドラインは、テーマファイルを作成する時だけでなく、多くの制作者が携わる大規模なオープンソースプロジェクトとして、読みやすくメンテナンス性に優れた、美しい一貫性のあるコードにすることを目的として作成されています。
Drupal CSS formatting guidelines
翻訳版：CSS フォーマットガイドライン 日本語訳
CMSのDrupalのガイドライン。オープンソースで多くの制作者がそのコードに触れるため、スタイルの記述・構造化・コメントなど、非常に細かく定義されています。新しくスタイルを増やす時にも迷いなく記述できると思います。
CyberAgentのメンテナンス性に優れたCSSを書くためのガイドライン。class名は意味が分かる程度に短くする、単語を繋げる時はハイフンで、classにタイプセレクタは使用しないなど、単にルールを策定するだけでなく、その理由もきちんとした解説があります。なぜ？というのが分かれば、理解も深まりますね。
当ブログで紹介した「CSS設計の教科書」は、設計・管理・運用を考えた『ちゃんとしたCSS』を徹底的に解説した良書です。
sponsors
