CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ
Post on:2014年8月26日
sponsors
CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。
しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？ とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？
大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。
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。他のと比べると軽量化に重点がおかれたガイドラインになっています。
GitHub Styleguide
翻訳版：GitHubのHTML/CSS Styleguideを適当に和訳してみた
GitHubのガイドラインは使用されているUIの解説だけでなく、id/classはどのように使い分けるか、フォントサイズはpx/emのどちらなど、ノウハウ的なことも含まれています。
WordPress CSS Coding Standards
WordPressのガイドラインは、テーマファイルを作成する時だけでなく、多くの制作者が携わる大規模なオープンソースプロジェクトとして、読みやすくメンテナンス性に優れた、美しい一貫性のあるコードにすることを目的として作成されています。
Drupal CSS formatting guidelines
翻訳版：CSS フォーマットガイドライン 日本語訳
CMSのDrupalのガイドライン。オープンソースで多くの制作者がそのコードに触れるため、スタイルの記述・構造化・コメントなど、非常に細かく定義されています。新しくスタイルを増やす時にも迷いなく記述できると思います。
CyberAgentのメンテナンス性に優れたCSSを書くためのガイドライン。class名は意味が分かる程度に短くする、単語を繋げる時はハイフンで、classにタイプセレクタは使用しないなど、単にルールを策定するだけでなく、その理由もきちんとした解説があります。なぜ？というのが分かれば、理解も深まりますね。
先日紹介した本「CSS設計の教科書」も設計・管理・運用を考えた『ちゃんとしたCSS』を徹底的に解説した良書です。
sponsors
