もうCSS設計で悩まない!「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選
構造やクラス名、プロパティの記述方法などをルール付ける﹁CSSコーディング ガイドライン﹂策定のための参考記事を紹介します。
チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。
コーディング規約を作ろう
"制作チームの規模が大きくなればなるほど、コードの統一性は大切"
▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。
▶ CSSガイドラインを翻訳してみた - 技術日記@kiwanami Harry Roberts氏によるCSSガイドラインの翻訳。記述方法から設計まで紹介。
▶ ﹁Google HTML/CSS Style Guide﹂を適当に和訳してみた REFLECTDESIGN Googleが公開している﹁HTML/CSS Style Guide﹂の抄訳。
▶ メンテナブルCSS 株式会社サイバーエージェント 大規模Webアプリケーション(サイト)を開発するフロントエンドエンジニアによるCSS記述ルールの具体例。
▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。
チェックポイント
コーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザーCSSガイドラインを翻訳してみた
"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"▶ CSSガイドラインを翻訳してみた - 技術日記@kiwanami Harry Roberts氏によるCSSガイドラインの翻訳。記述方法から設計まで紹介。
チェックポイント
命名規則(名前付け方法) ・BEM記法(Block Element Modifier) コメントでCSS強化 ・コメントを使った擬似限定セレクタで、クラス用途を他者に伝える。 マジックナンバーと絶対値 ・絶対値を指定する場合、相対値で指定できない毎回2回は考える。﹁Google HTML/CSS Style Guide﹂を適当に和訳してみた
"ガイドラインを持つことは、コーディングの共通の語彙を持つこと。一貫性を持つことは重要"▶ ﹁Google HTML/CSS Style Guide﹂を適当に和訳してみた REFLECTDESIGN Googleが公開している﹁HTML/CSS Style Guide﹂の抄訳。
チェックポイント
CSSスタイルルール ・可読性と短さを意識して、可能な限り適切なCSSを記述 CSS書式ルール ・アルファベットの順に記述 CSSメタルール ・セクションごとにコメントを記述メンテナブルCSS
"開発・運用を通じてプロジェクトが大きなゴールにたどり着くための最短経路として、品質の高いCSSが必要"▶ メンテナブル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つの設計方法の概要と具体例を紹介。
▶ IDを使わないCSSの設計|Web Design KOJIKA17 IDを使わないスタイリング方法を紹介。
チェックポイント
OOCSS(object oriented CSS:オブジェクト指向CSS) ・構造(レイアウト)と見た目(装飾)の分離 SMACSS(Scalable and Modular Architecture for CSS) ・5つのカテゴリ(ベース/レイアウト/モジュール/ステート/テーマ)に分類してスタイルを定義IDを使わないCSSの設計
"﹁class = 装飾﹂﹁ID = 機能﹂として、HTMLのIDとclassの住み分けを、はっきりさせる"▶ IDを使わないCSSの設計|Web Design KOJIKA17 IDを使わないスタイリング方法を紹介。
チェックポイント
IDを使用しないメリット ・スタイルを使いまわしやすい ・優先度をコントロールしやすいおわりに
いかがでしたでしょうか。大規模で継続的な案件を想定したものが多いですが、中規模、小規模であっても、ベースとなるガイドラインを策定しておいて案件に合わせてカスタマイズする というようなスタイルをとれば、コーディング効率も改善するのではないでしょうか。 また、チーム体制にない個人であっても命名などで悩まないよう自分なりのルールを準備しておくとよいのではないでしょうか。Web関連ニュース&ブログ更新情報をチェックする
TwitterやFacebookではブログの更新情報とあわせて、Webやデザイン関連のニュースをお届けしています。
Twitterでフォローする
RSSリーダーで購読する
Facebookページを「いいね!」する
新着記事
【図解あり】吾輩は猫である【SEO対策】 71万円の札束で厚さも完全再現!iPhone6 Plusの大きさは、ほぼ1万円札と同じということで試してみた。 グリコのおまけ『AR(拡張現実)ドラえもん』が凄過ぎて、もはや別キャラクターw【台紙DLリンクあり】人気の記事
Twitterでクリックするだけで変化するトリック画像を分解してみた! H1一つでここまで出来るCSS見出しデザインのアイデア9個 アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザインおすすめ書籍
日本史の闇を支配した「忍者」の正体 (別冊宝島 2032) プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド よくわかるHTML5+CSS3の教科書