CSS のガイドラインまとめ[メモ]
CSS の各ガイドラインをまとめておきます。最強のガイドラインを作りたい方は参考にどうぞ。
※ OOCSS, SMACSS, BEM などのCSS設計とは、また違ったガイドラインの話になると思います。
Google HTML/CSS Style Guide
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
日本語訳：
qiita.com
Googleさんが使っているHTML とCSS のガイドラインです。 「外部参照する際のURLのhttp:, https:は省く」、「大文字は使わない」、「インデントはスペース2つにする」などの決まりがあります。
Primer
Githubで開発・使われているCSS toolkitとガイドラインです。 CSS toolkit（CSSフレームワーク）なので、Bootstrap やFoundation に似たものですが、初めて聞きました。 デフォルトではレスポンシブに対応していないようなので、モバイルフリーの昨今では、Web系の人たちから敬遠されているのでしょうか。。
「HTML5のDOCTYPE宣言(<!DOCTYPE> html)をする」、 「box-sizing をborder-box でリセットする」、 「Normalize.cssを使う」などの決まりがあります。
参考：
qiita.com
メンテナブルCSS
サイバーエージェントで使われているcssのガイドラインです。日本語です。
CSSルールとして、「可能な限り短いクラス名にする。ただし意味が分からないほどには省略しないこと 」、「可能な限り短いプロパティで定義すること」、「ゼロ以下の小数には接頭の0を省く」などがあります。 なせこのルールがあるのかという理由も書かれているので、他のガイドラインを読む際の助けになりそうです。
CSS Guidelines High-level advice and guidelines for writing sane, manageable, scalable CSS
CSSWizardry のCSSガイドラインです。
「インデントは、tabではなく4つのspaceを使う」、 「CSSファイルのカラム幅は、80文字にする。」、 「プロパティが複数あるときは複数行で書き、1つの場合は1行で書く」などのルールがあります。
Principles of writing consistent, idiomatic CSS
日本語訳：
github.com
「インデントにはタブ、スペースを絶対に混在させないこと」、 「ソフトインデント(スペース)かタブのどちらかを選び、その選択を途中で変更しないこと(スペースを優先)」、 「もしスペースを利用する場合にインデントに利用する文字数を決めること (4スペースを優先)」 などのルールがあります。
CMS
以下は、WordPress などのCMSが推奨しているCSSのガイドラインです。
WordPress
日本語訳：
WordPress コーディング基準 - WordPress Codex 日本語版 (情報が古い可能性)
WordPress.org が推奨しているCSSのガイドラインです。
「インデントにはspace でなくtab を使う」,「セクション間は2行空けて、 セクション中のブロック間は1行空ける」 「複数のセレクタに、同一のプロパティを充てる際は、1行1セレクタで改行する」などがあります。
Drupal
日本語訳：
https://drupal.studio-umi.jp/blog/Drupal-CSS-formatting-guidelines-Japanese
Drupal.org で提案されている「 CSS フォーマットガイドライン」です。
「インデントには、2つの空白を使う」、「宣言（プロパティと値のペア）はそのセレクタに対してインデントをひとつ下げる。」、 「メディアブロックやメディアクエリの中のルールセットは、メディア文に対してインデントをひとつ下げる。」となどの決まりがあります。
プロパティの記述順序
プロパティの多いセレクタのCSS を書いていていると、プロパティの順序に迷うときがあります。 以下は、プロパティの記述順序についてのガイドラインです。なお、特に正解はないです。
上のGoogle HMTL/CSS StyleGuide では、アルファベット順が推奨されています。
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
日本語訳：
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 日本語訳
W3CのCSS2.1Specification で公開されている順番を使う方法 です。CSS3のプロパティには対応していないので、それらを追加して使用すると良いと思います。
- Media types（メディアタイプ）
- Box model（ボックスモデル）
- Visual formatting model（視覚整形モデル）
- Visual formatting model details（視覚整形モデル詳細）
- Visual effects（視覚効果）
- Generated content, automatic numbering, and lists（生成内容、自動番号付け、およびリスト）
- Paged media（ページメディア）
- Colors and Backgrounds（色と背景）
- Fonts（フォント）
- Text（テキスト）
- Tables（テーブル）
- User interface（ユーザインターフェース）
- Aural style sheets（聴覚スタイルシート）
mozilla.org Base Styles
https://www.mozilla.org/css/base/content.css
mozilla.org が推奨しているBase Styles です。 以下の様な順序になっています。
-
display
-
list-style
-
position
-
float
-
clear
-
width
-
height
-
margin
-
padding
-
border
-
background
-
color
-
font
-
text-decoration
-
text-align
-
vertical-align
-
white-space
-
other text
-
content
まとめ
たくさんのガイドラインがありますが、 どのガイドラインでも言っていることは、
一貫性のあるCSS書こうぜ！
ということです。
他に、参考になるガイドラインあったら教えて下さい。
