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

情報・Web系技術・Englishの勉強メモ・備忘録です。

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

Home · Primer

Githubで開発・使われているCSS toolkitとガイドラインです。 CSS toolkit(CSSフレームワーク)なので、BootstrapFoundation に似たものですが、初めて聞きました。 デフォルトではレスポンシブに対応していないようなので、モバイルフリーの昨今では、Web系の人たちから敬遠されているのでしょうか。。

HTML5のDOCTYPE宣言(<!DOCTYPE> html)をする」、 「box-sizingborder-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

cssguidelin.es

CSSWizardryCSSガイドラインです。

「インデントは、tabではなく4つのspaceを使う」、 「CSSファイルのカラム幅は、80文字にする。」、 「プロパティが複数あるときは複数行で書き、1つの場合は1行で書く」などのルールがあります。

Principles of writing consistent, idiomatic CSS

github.com

日本語訳:
github.com

「インデントにはタブ、スペースを絶対に混在させないこと」、 「ソフトインデント(スペース)かタブのどちらかを選び、その選択を途中で変更しないこと(スペースを優先)」、 「もしスペースを利用する場合にインデントに利用する文字数を決めること (4スペースを優先)」 などのルールがあります。

CMS

以下は、WordPress などのCMSが推奨しているCSSガイドラインです。

WordPress

make.wordpress.org

日本語訳:

WordPress コーディング基準 - WordPress Codex 日本語版 (情報が古い可能性)

WordPress.org が推奨しているCSSガイドラインです。

「インデントにはspace でなくtab を使う」,「セクション間は2行空けて、 セクション中のブロック間は1行空ける」 「複数のセレクタに、同一のプロパティを充てる際は、1行1セレクタで改行する」などがあります。

Drupal

www.drupal.org

日本語訳:
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のプロパティには対応していないので、それらを追加して使用すると良いと思います。

  1. Media types(メディアタイプ)
  2. Box model(ボックスモデル)
  3. Visual formatting model(視覚整形モデル)
  4. Visual formatting model details(視覚整形モデル詳細)
  5. Visual effects(視覚効果)
  6. Generated content, automatic numbering, and lists(生成内容、自動番号付け、およびリスト)
  7. Paged media(ページメディア)
  8. Colors and Backgrounds(色と背景)
  9. Fonts(フォント)
  10. Text(テキスト)
  11. Tables(テーブル)
  12. User interface(ユーザインターフェース)
  13. Aural style sheets(聴覚スタイルシート

mozilla.org Base Styles

https://www.mozilla.org/css/base/content.css

mozilla.org が推奨しているBase Styles です。 以下の様な順序になっています。

  1. display

  2. list-style

  3. position

  4. float

  5. clear

  6. width

  7. height

  8. margin

  9. padding

  10. border

  11. background

  12. color

  13. font

  14. text-decoration

  15. text-align

  16. vertical-align

  17. white-space

  18. other text

  19. content

まとめ

たくさんのガイドラインがありますが、 どのガイドラインでも言っていることは、
一貫性のあるCSS書こうぜ!
ということです。

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

広告を非表示にする