CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ

大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分が見ても分かる、メンテナンス性に優れ、一貫性のあるCSSを書くのに役立つガイドラインやスタイルガイドを紹介します。

サイトのキャプチャ

Code Guide
翻訳版:コーディングガイド

大規模プロジェクトでの何年もの経験を元に、柔軟で耐久性に優れた持続可能なコーディングルールを文章化したプロジェクト。

サイトのキャプチャ

CSS Guidelines 2

CSS WizardryのHigh-level guidelinesの最新版(2014年8月リリース)。
大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。

サイトのキャプチャ

CSS Guidelines (翻訳版)

上記の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。他のと比べると軽量化に重点がおかれたガイドラインになっています。

サイトのキャプチャ

Primer -guidelines that power GitHub

2015年3月にリリースされたGitHubのフロントエンドのデザインを提供するツールで、それに伴いGitHubのガイドラインもPrimerに移行されました。

サイトのキャプチャ

The CodePen Design Patterns and Style Guide

CodePenで使用されているデザインパターンとスタイルガイドです。ページで見かけるエレメントが全部揃っています。

サイトのキャプチャ

LESS Coding Guidelines -Medium
Medium's old style guid

Mediumのスタイルを生成するLESSのコーディングガイドライン。「old style guid」には良い例・悪い例の記載もあり、興味深い内容となっています。

サイトのキャプチャ

Global CSS settings -Bootstrap

Bootstrapとグリッドや基本要素のスタイルガイドです。
下記も参考にどうぞ。

サイトのキャプチャ

WordPress CSS Coding Standards

WordPressのガイドラインは、テーマファイルを作成する時だけでなく、多くの制作者が携わる大規模なオープンソースプロジェクトとして、読みやすくメンテナンス性に優れた、美しい一貫性のあるコードにすることを目的として作成されています。

サイトのキャプチャ

Drupal CSS formatting guidelines
翻訳版:CSS フォーマットガイドライン 日本語訳

CMSのDrupalのガイドライン。オープンソースで多くの制作者がそのコードに触れるため、スタイルの記述・構造化・コメントなど、非常に細かく定義されています。新しくスタイルを増やす時にも迷いなく記述できると思います。

サイトのキャプチャ

メンテナブルCSS

CyberAgentのメンテナンス性に優れたCSSを書くためのガイドライン。class名は意味が分かる程度に短くする、単語を繋げる時はハイフンで、classにタイプセレクタは使用しないなど、単にルールを策定するだけでなく、その理由もきちんとした解説があります。なぜ?というのが分かれば、理解も深まりますね。

当ブログで紹介した「CSS設計の教科書」は、設計・管理・運用を考えた『ちゃんとしたCSS』を徹底的に解説した良書です。

本のキャプチャ

Web制作者のためのCSS設計の教科書
[Amazonでみる]
[楽天でみる]

著:
谷 拓樹
出版社:
インプレスジャパン
発売日:
2014/7/24

top of page

©2017 coliss