もうCSS設計で悩まない！「CSSコーディングガイドライン」策定のための参考記事・スライド 7選

2013-09-12 16:35

この記事は約 5 分で読めます。

構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディングガイドライン」策定のための参考記事を紹介します。チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。

コーディング規約を作ろう

"制作チームの規模が大きくなればなるほど、コードの統一性は大切"
css-guideline01
▶ コーディング規約を作ろう Webクリエイターボックス
コーディング規約を見直すうえで抑えておくべきポイントを紹介。

チェックポイント

コーディング規約に含むべき項目
・ディレクトリやファイルの階層・名前
・記述順やインデント、単位などのフォーマット
・ID,classなどの命名規則
・対応ブラウザー

CSSガイドラインを翻訳してみた

"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
css-guideline02
▶ CSSガイドラインを翻訳してみた - 技術日記＠kiwanami
Harry Roberts氏によるCSSガイドラインの翻訳。記述方法から設計まで紹介。

チェックポイント

命名規則(名前付け方法)
・BEM記法(Block Element Modifier)
コメントでCSS強化
・コメントを使った擬似限定セレクタで、クラス用途を他者に伝える。
マジックナンバーと絶対値
・絶対値を指定する場合、相対値で指定できない毎回2回は考える。

「Google HTML/CSS Style Guide」を適当に和訳してみた

"ガイドラインを持つことは、コーディングの共通の語彙を持つこと。一貫性を持つことは重要"
css-guideline03
▶ 「Google HTML/CSS Style Guide」を適当に和訳してみた REFLECTDESIGN
Googleが公開している「HTML/CSS Style Guide」の抄訳。

チェックポイント

CSSスタイルルール
・可読性と短さを意識して、可能な限り適切なCSSを記述
CSS書式ルール
・アルファベットの順に記述
CSSメタルール
・セクションごとにコメントを記述

メンテナブルCSS

"開発・運用を通じてプロジェクトが大きなゴールにたどり着くための最短経路として、品質の高いCSSが必要"
css-guideline04
▶ メンテナブルCSS 株式会社サイバーエージェント
大規模Webアプリケーション(サイト)を開発するフロントエンドエンジニアによるCSS記述ルールの具体例。

チェックポイント

可読性を保ちつつ可能な限り短いクラス名/プロパティ/値
・一般的な単語として省略できるものは極力短いクラス名
・プロパティはできるだけショートハンド
・ゼロ以下の小数は接頭の0を省く、色定義は出来る限り三桁

大規模サイトにおける本当は怖いCSSの話

"CSSの怖さは、「影響範囲が広い」「エラーを吐かない」「ID,classがサイト中に分散」"

▶ 大規模サイトにおける本当は怖いCSSの話 from 誠井上
要件に合わせたCSS設計のタイプを紹介。

チェックポイント

ストラクチャタイプ
・HTML構造を重視→デザイン、最適化重視の要件
モジュールタイプ
・パーツ単位でHTMLとCSSを作成 →スピード、保守コスト重視の要件
オブジェクトタイプ
・class指定の組合せで見た目を定義→フレームワーク重視の要件

今必要なCSSアーキテクチャ

"CSSの運用・保守性、パフォーマンス大事！(モバイルの場合、よりシビア)"

▶ 今必要なCSSアーキテクチャ from Mayu Kimura
CSSアーキテクチャ(設計思想/方法)の必要性と、OOCSSとSMACSSという2つの設計方法の概要と具体例を紹介。

チェックポイント

OOCSS(object oriented CSS:オブジェクト指向CSS)
・構造(レイアウト)と見た目(装飾)の分離
SMACSS(Scalable and Modular Architecture for CSS)
・5つのカテゴリ(ベース/レイアウト/モジュール/ステート/テーマ)に分類してスタイルを定義

IDを使わないCSSの設計

"「class = 装飾」「ID = 機能」として、HTMLのIDとclassの住み分けを、はっきりさせる"
css-guideline05
▶ IDを使わないCSSの設計｜Web Design KOJIKA17
IDを使わないスタイリング方法を紹介。

チェックポイント

IDを使用しないメリット
・スタイルを使いまわしやすい
・優先度をコントロールしやすい

おわりに

いかがでしたでしょうか。大規模で継続的な案件を想定したものが多いですが、中規模、小規模であっても、ベースとなるガイドラインを策定しておいて案件に合わせてカスタマイズするというようなスタイルをとれば、コーディング効率も改善するのではないでしょうか。
また、チーム体制にない個人であっても命名などで悩まないよう自分なりのルールを準備しておくとよいのではないでしょうか。