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