「スタイルガイド」の助けを借りてCSSコードの読みやすさを改善する

W3Cast＃3では、デニス（ CurlyBrace ）がスタイルガイドの使用に関するトピックに触れ、このトピックに関する記事を既に持っていました。 そのため、「スタイルガイド」の可能性を示す視覚的な例を示すために共有することにしました。
「 スタイルガイド 」は、開発者にコード構造と受け入れられた設計ルールに関する情報を提供するルールと規則のセットです。 ほとんどの場合、プロジェクトに共同参加したり、コード開発の自制のために、開発者のグループが使用します。
プロジェクトが大きい場合、さまざまな配色、タイポグラフィ、およびその他のスタイル設定を備えた多数のCSSファイルに囲まれています。 コードの構造の混乱を避け、何をどのように忘れないようにするには、構造化コードを開発する必要があります。これは、後で他のプロジェクトで使いやすく、編集し、部分的に使いやすくなります。

明確なコードを整理する最良の方法は、コメントを使用することです。 開発者は、コードの理解を改善するために、コメントとテキスト形式を使用する非常に創造的な方法を思いつきました。 あなたの好みに基づいて組み合わせることができる多くの異なるトリックがありますが、今のところそれらのほんのいくつかを検討します。

「分割とルール」

まず、レイアウトの構造を分析し、 CSSコードで最も重要なコンポーネントを強調表示します 。 ほとんどの場合、クラスまたはCSSセレクターでソートすると便利です。 コーディングを開始する前に、要素をグループにグループ化します。 たとえば、グローバルスタイル（「本文」、段落、リストなど）、構造、見出し、テキストスタイル、ナビゲーション、フォーム、コメント、および個々の要素を強調表示できます。
重要な要素を強調表示するために、特別なラベル（「アスタリスク」-「*」またはマイナス-「-」など）を選択します。 たとえば、個々の要素グループのヘッダーを強調表示できます。 コードをすばやく見ると、タグが印象的であることが非常に重要です。
ただし、このアプローチは、メインスタイルシートが十分に大きい大規模プロジェクトではあまり効果的ではありません。 この場合、スタイルは複数のファイルに分割でき、各ファイルには単一のグループが含まれます。 これを行うには、メインスタイルファイルにグループスタイルをインポートするだけで十分です。 また、ページにはメインファイルのみを含めるだけで十分です。

 <コードクラス= "css">
 / *
 ---------------------------------------
 [マスタースタイルシート]

プロジェクト：Obout.ru
バージョン：1.1
最終変更：05/06/08 [Floatのバグ、Alexを修正]
担当：Alexandr（ALex）、Vasy Pupkin（VP）
主な用途：OBOUT.RU
 ---------------------------------------
 * /
 @import "reset.css";
 @import "layout.css";
 @import "colors.css";
 @import "typography.css";
 @import "flash.css";
 / * @import "debugging.css";  * /
 </ code>

また、他の開発者がプロ​​ジェクトに関する追加の技術情報を知っておくと便利です。前回の変更内容、いつ、誰が変更したかなどです。
さらに、デバッグCSSスタイルのデバッグを有効にして、誤った要素を見つけることができます。

目次を作成する

コードの構造を記述するために、スタイルファイルの先頭に小さな目次を作成できます。 この手法は、ページの構造ツリーの別々のブランチとして使用される識別子（ID）とクラス（クラス）を使用して、要素のレイアウト構造の概要を簡単に作成するのに役立ちます。 ここでは、特別なキーワードを使用して、コード内の目的のセクションをより迅速に見つけることもできます。
たとえば、次のように：

 <コードクラス= "css">
 / *
 ---------------------------------------
 [レイアウト]

 *体
	 +ヘッダー/ #header
	 +コンテンツ/ #content
		 -左の列/ #leftcolumn
		 -右列/ #rightcolumn
		 -サイドバー/ #sidebar
			 -RSS / #rss
			 -検索/ #search
			 -ボックス/ .box
			 -サイドブログ/ #sideblog
	 +フッター/ #footer

ナビゲーション#navbar
広告.ads
コンテンツヘッダーh2
 ---------------------------------------
 * /
 </ code>

または私が固守するそのようなオプション：

 <コードクラス= "css">
 / *
 ---------------------------------------
 [目次]

 1.体
	 2.ヘッダー/ #header
		 2.1。 ナビゲーション/ #navbar
	 3.コンテンツ/ #content
		 3.1。 左の列/ #leftcolumn
		 3.2。 右列/ #rightcolumn
		 3.3。 サイドバー/ #sidebar
			 3.3.1。  RSS / #rss
			 3.3.2。 検索/ #search
			 3.3.3。 ボックス/ .box
			 3.3.4。 サイドブログ/ #sideblog
			 3.3.5。 広告/ .ads
	 4.フッター/ #footer
 ---------------------------------------
 * /
 </ code>

インデックスで検索でき、ページの構造の概略図を提供します。
ネストを使用せず、通常の番号付きリストを使用するさらに簡単な方法があります。 スタイルシートでブロックを見つけるには、ファイル検索を使用して、ブロックの番号または名前を入力するだけです。 この方法は非常に簡単、高速、効率的です。

 <コードクラス= "css">
 / *
 ---------------------------------------
 [目次]

 1.体
 2.ヘッダー/ #header
 3.ナビゲーション/ #navbar
 4.コンテンツ/ #content
 5.左列/ #leftcolumn
 6.右列/ #rightcolumn
 7.サイドバー/ #sidebar
 8. RSS / #rss
 9.検索/ #search
 10.ボックス/ .box
 11.サイドブログ/ #sideblog
 12.広告/ .ads
 13.フッター/ #footer
 ---------------------------------------
 * /
 <！-多くのCSSコードがあります->

 / *
 ---------------------------------------
 [8。  RSS / #rss]
 * /
 #rss {...}
 #rss img {...}
 / *
 ---------------------------------------
 * /
 </ code>

目次を使用すると、他の開発者がCSSを理解して読みやすくなります。 コードを読むときに常に目の前にくるように印刷できます。 チームワークの場合、目次を使用することは大きな利点であり、時間と同僚の時間を大幅に節約できます。

プリセットの配色とタイポグラフィ

CSSで定数を設定する機能がない限り、不変のプロパティをすばやく表示する方法を探す必要があります。 Web開発では、定数にはドキュメントで使用される色とタイポグラフィが含まれます。これらは固定値であり、ドキュメントで繰り返し使用されます。
定数の不足を置き換える1つの方法は、使用されるいくつかの定数の定義を作成することです。 繰り返しますが、これは、あるプロパティから別のプロパティにコピーするときの混乱を避けるのに役立ちます。 スタイルシートのプロパティを変更することにした場合は、エディターの検索ツールと置換ツールを再度使用します。

 <コードクラス= "css">
 / *
 ---------------------------------------
 ＃[カラーコード]

 ＃ダークグレー（テキスト）：＃333333
 ＃ダークブルー（見出し、リンク）＃000066
 ＃ミッドブルー（ヘッダー）＃333399
 ＃水色（トップナビゲーション）#CCCCFF
 ＃ミッドグレー：＃666666
 ＃
 * /
 </ code>

または、レイアウトで使用されるカラーコードを記述することもできます。 各色について、それを使用するセクションを設定できます。逆も同様です。セクションについては、使用する色を設定します。

 <コードクラス= "css">
 / *
 ---------------------------------------
 [カラーコード]

背景：#ffffff（白）
内容：＃1e1e1e（ライトブラック）
ヘッダーh1：＃9caa3b（緑）
ヘッダーh2：＃ee4117（赤）
フッター：＃b5cede（濃い黒）

 a（標準）：＃0040b6（濃い青）
 a（訪問）：＃5999de（水色）
 a（アクティブ）：＃cc0000（ピンク）
 ---------------------------------------
 * /
 </ code>

同じアプローチを使用して、タイポグラフィを参照することもできます。

 <コードクラス= "css">
 / *
 ---------------------------------------
 [タイポグラフィ]

本文コピー：1.2em / 1.6em Verdana、Helvetica、Arial、Geneva、sans-serif;
ヘッダー：2.7em / 1.3em Helvetica、Arial、「Lucida Sans Unicode」、Verdana、sans-serif;
入力、テキストエリア：1.1em Helvetica、Verdana、Geneva、Arial、sans-serif;
サイドバーの見出し：1.5em Helvetica、Trebuchet MS、Arial、sans-serif。

注：後続の見出しレベルごとに見出しを0.4emずつ減らします
 ---------------------------------------
 * /
 </ code>

CSSプロパティの並べ替え

より構造化された直感的なCSSを作成するためのコツがいくつかあります。 開発者によって発明された多くのソート方法があります。 一部の開発者は、色とフォントを最初に配置することを好みます。 他の要素は、要素の配置に関連するプロパティなど、より重要なプロパティを最初に配置することを好みます。 一部の要素は、構造レイアウトまたはトポロジレイアウトに従ってソートされることもよくあります。 このアプローチには、タグセレクターのグループ化が含まれます。

 <コードクラス= "css">
    体
	 h1、h2、h3、
	 p、ul、li、
	フォーム{
		ボーダー：0;
		マージン：0;
		パディング：0;
	 }
 </ code>

一部の開発者は、プロパティをアルファベット順に並べ替えることを好みます。

 <code class = "css"> body {background：#fdfdfd; 色：＃333; フォントサイズ：1em; 行の高さ：1.4; マージン：0; パディング：0;  } </ code> 

どこでも書式設定スタイルを使用すると、同僚はあなたの作業に感謝します。同僚もこの書式設定スタイルを順守します。

ネスティングはあなたの友達です！

表形式のセレクターを使用すると、コードを理解しやすくなります。 要素が深くなるほど、より多くのタブがその前に配置されます。 「親」要素を定義し、「子」を目的の数の「タブ」で区切ります。

 <コードクラス= "css">
 ＃メイン列{表示：インライン;  float：左; 幅：30em;  }
		 ＃main-column h1 {font-family：Georgia、 "Times New Roman"; 余白：20ピクセル;  }
		 ＃メイン列p {色：＃333;  }
 </ code>

「タブ」とコメントを使用する別の興味深いアプローチがあります。 時々、変更を加えると、結果が期待したものと異なることがあります。 しかし、多くの変更が行われ、それらのすべてを記憶できない場合はどうでしょうか？ これは、CSSコードの最近の変更を強調表示するのに役立つ場合があります。 行われた変更は追加のインデントでマークできます。これにより、同じセレクター内の他のプロパティと区別されます。 または、コメントでいくつかのキーワードを使用できます。 たとえば、 @newを使用すると、問題が見つかるまで変更を簡単に見つけてロールバックできます。

 <コードクラス= "css">
 #sidebar ul li a {
     ディスプレイ：ブロック;
     背景色：#ccc;
           border-bottom：1px solid＃999;  / * @new * /
     マージン：3px 0 3px 0;
          パディング：3px;  / * @new * /
 }
 </ code>

おわりに

CSSスタイルガイドは、適切に使用すると便利です。 「スタイルガイド」を使用して、コードの理解を深め、構造化されたコードを理解できない場合は使用しないでください。 あなたの目標は、コードのより良い理解/読みやすさを達成することです。
PS。 過剰なデータの転送でユーザーに負担をかけないように、最終バージョン（または「プロダクション」と呼ばれる）に「スタイルガイド」のコメントを含めないことを忘れないでください。 また、開発が完了した後も、開発者はフルバージョンを使用する必要があります。
CSSスタイルガイドによるコードの読みやすさの向上に基づく無料翻訳 ©
PPS テーマ別ブログに移行されたカルマを提起したすべての人に感謝します。
UPD。 コメントで、 vithar は彼のCSSコードスタイルを共有しました。
他の人が参加して、ベストプラクティスを共有することをお勧めします。

UPD。 コメントで、私はすでにphpdocとの類推をプロファイルし、今では共通のcssdoc標準の実装の始まりに出会いました-phpdocの類似物ですが、すでにcssのためです。 プロジェクトの開発は、CSSの開発においてほぼ一定の標準を開発するのに役立ちます。