コードスタイルガイドを使用してCSSを最適化する方法

デザイナーがスタイルガイドについて話すとき、彼らは通常意味します 合意されたマニュアル に 首尾一貫した外観 適切に設計されたWebサイトまたはアプリケーションの 配色、タイポグラフィ、およびUI プロジェクト全体で使われている.

Web開発にも使える、別の種類のスタイルガイドがあります。それは同じくらい重要ですが、議論されることはめったにありません。 コード自体のスタイルガイド. コードスタイルガイドはデザイナーよりも開発者向けであり、その主な目的はCSSや他のコードを最適化することです。.

適切なコードスタイルガイドを使用すると、 整理され、一貫性のあるコードベース、コードの読みやすさ、および保守性の高いコード. グーグル、AirBnB、Dropboxのような大手技術企業がそれらをうまく利用しているのは偶然ではありません。.

この記事では、CSSコード・スタイル・ガイドの助けを借りて、CSSをどのようにスマートに最適化できるかを見ていきます。.

コードスタイルガイドとパターンライブラリ

私たちの業界では、スタイルガイドと呼べるものについてある程度の不確実性があります。. 別のリスト 例えば、用語と同義にそれを使用します パターンライブラリ この記事では説明しますが、他の記事でもこの種の定義に遭遇する可能性があります。.

一方で、CSS TricksやBrad Frostのブログなど、コード・スタイル・ガイドとパターン・ライブラリーを区別する出版物もあります。この後者のアプローチは、おそらく次のように最適化されたWebサイトに近づくでしょう。 コードとデザインを別々に扱うことができます。, だから私たちはこの記事でこれを使用します.

コードスタイルガイドとパターンライブラリの両方にスタイル戦略が含まれていますが、種類は異なります。 Bootstrap、Zurb Foundation、BBCのGlobal Experience Language、MailChimpのパターンライブラリなどのパターンライブラリは、あらかじめ作成されたCSSクラス、タイポグラフィ、配色、グリッドシステム、その他のデザインパターンを含むUIを提供します。.

EvernoteやThinkUp（またはイントロで紹介されているもの）などのCSSコードスタイルガイド CSSの書き方に関する規則 のようなものを含む 命名規則、ファイル構造、プロパティの順序、コードのフォーマット, その他.

KSS、Styledown、またはPattern Labなどのリビングスタイルガイドジェネレータがあることに注意してください。, パターンライブラリを生成する そして ではない コーディングスタイルガイド. パターンライブラリも非常に便利でWeb開発プロセスを向上させますが、コード自体を最適化することはできません。.

CSSコードスタイルガイドを作成する

CSSコードスタイルガイドの最後の目標は、開発者がすべて同じコードスタイリング規則に従うことによって作成された、一貫性があり、簡単にデバッグできるコードベースを使用できるようにすることです。 CSSコードスタイルガイドを作成するには少し時間がかかるかもしれませんが、一度だけ実行すればよいので、努力する価値があります。それから私達は異なったプロジェクト間で同じスタイルガイドを使うことができます.

それは最高のスタイルガイドがあることに注意することが重要です スタイル規則自体だけでなく、例も含まれています これにより、開発者はルールをより直感的に理解できるようになります。.

例えば、AirBnBは開発者に良い例と悪い例を次のように簡単に要約できる方法で示しています。

ファイル構造

まず、CSSファイルを整理するためのロジックを理解する必要があります。小規模プロジェクトの場合は1つのCSSファイルで十分かもしれませんが、大規模プロジェクトの場合はそれです。 常にコードを分割する方が良い, そして プロダクションの後半で別々のファイルを連結する.

ThinkUpのようないくつかのスタイルガイドはまた私達に警告します インラインスタイルまたは埋め込みスタイルを使用しない やむを得ない場合を除き。それはまた適用する価値がある便利なルールです.

ネスティング

入れ子はCSSの優れた機能ですが、場合によっては制御できなくなることがあります。特にイライラするデバッグプロセスの最中に、特に幸せな気分になる人はいません。

 .class_1 .class_2＃id_1＃id_2すべてのスパン色：＃バッド;

だからそれは常に良いです 妥当な入れ子制限を設定する, 例えばGitHubはそのスタイルガイドで3つのレベルを選びました。入れ子を制限することで、より構造化されたコードを書くように強制することもできます。.

命名規則

CSSセレクターに一貫した命名規則を使用することは、私たちのコードを何か月、あるいは何年か後にも理解したい場合に非常に重要です。そこに多くの解決策があります、そして 従う必要がある厳密な規則は1つだけです つまり、セレクタ名は数字で始めることはできません.

セレクタの命名に使用される4つの一般的なスタイルは次のとおりです。 .小文字, .under_scores, .ダッシュエス, そして .lowerCamelCase. どれを選んでも構いませんが、プロジェクト全体で同じロジックに従う必要があります。.

を使う セマンティックセレクター名のみ 私たちがしたい場合はまた不可欠です 意味のあるコードがある. たとえば、 .赤いボタン （ボタンが何をするのかは表示されません） .警告ボタン このようにして、私たちは開発者（そして私たちの将来の自分たち）が、言われたボタンが何をするのか理解することを可能にします.

その上 将来的にその色を赤から他の色に変更したい場合は、手間をかけずに簡単に変更できます。. BEM（Block、Element、Modifier）規則など、あらかじめ作成されたCSSの命名規則もあります。 一貫した命名構造になります。 一意で意味のある名前で.

フォーマット規則

コードの書式設定には、空白、タブ、インデント、スペース、改行などの使い方が含まれます。書式設定に普遍的に良い方法も悪い方法もありません。経験則だけです。 読みやすいコードになるような首尾一貫した規則を選択する, そしてそれらを通して.

例えばDropboxは、プロパティ宣言においてコロンの後にスペースを入れることを開発者に要求しますが、Evernoteはインデントのために2つのスペースを使います。私たちは使い慣れただけのフォーマットルールを設定することができますが、 それが把握することが可能である以上に決して.

宣言順

順序付けられたものは常に見やすくなります。 CSS宣言の順序 （プロパティとその値） 理にかなっている規則に従って、よりよく体系化されたコードになる.

たとえば、WordPressのプロパティの順序付け規則を見てください。これは、プロパティがその意味によってグループ化されている順序付けのための、次の単純だが論理的な基準を定義しています。

表示
ポジショニング
ボックスモデル
色とタイポグラフィ
その他の

単位と値

単位と値をどのように使用するかを決定することは、一貫したコードの外観を実現するために重要であるだけでなく、そうしないと、変なことになる可能性があります。

交互に使用するサイトを想像してください px, em, そして レム 長さの測定コードエディタでは見栄えが悪くなるわけではありませんが、そのサイトでは驚くほど小さい要素や大きい要素がある可能性があります。.

また、色の値（16進数、rgb、またはhsl）についても、そしてどの規則に従って速記プロパティを使用するかどうかについても決定する必要があります。私がぶつかったすべてのCSSコードスタイルガイドに含まれている命令があります。. 0の値に単位を指定しない （本当に、しないでください）.

.クラス//良いマージン：0; //不良マージン：0px。 //マージンが悪い：0em。 //不良マージン：0rem;

コメントする

コメントコードはすべての言語で不可欠ですが、CSSでは デバッグやドキュメント作成を容易にするだけでなく、CSSルールを論理グループに分割することもできます。. どちらでも使えます / *…* / または //… CSSでのコメントの表記スタイル、重要なことは 一貫性を保つ 私たちのプロジェクト全体にコメントを.

たとえば、慣用句CSSは、基本的なASCIIアートを使用しても意味のあるコメントシステムを確立し、美しく整理されたコードになります。