はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

CSS のガイドラインまとめ[メモ]

CSS HTML CSS設計

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

www.cyberagent.co.jp

サイバーエージェントで使われている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

make.wordpress.org

日本語訳：

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書こうぜ！
ということです。

他に、参考になるガイドラインあったら教えて下さい。