良いCSSを書く

公開: 2016-10-17

私は常に新しいことを学ぼうとしています。しかし、私はまた、私がすでに物事をしている方法を改善する方法を学ぼうとしています。フルタイムのギグでもクライアントサイドプロジェクトでも、私が常に改善したいと思っていたのはCSSでした。 CSSに関しては、私はいつもかなり良いと感じていましたが、読むのが面倒で、保守が難しいことがよくあります。

私がやろうとしてきたことは、CSSが読みやすく、保守しやすいものになる理由を見つけることです。私はこれをすべて可能にするいくつかの方法を思いついた（そして見つけた）と思います。

問題点

CSSについて私を悩ませていることがいくつかあります。私が持っている最も一般的な迷惑は次のとおりです。

一般的なコードを繰り返す
ブラウザのプレフィックス
コメントの欠如
資格のあるセレクター以上
貧弱なクラス名

私の個人的なプロジェクトに関しては、私は自分のコードに対して全責任を負います。私は自分のCSSにコメントすることはめったになく、それを後付けとして扱うことがよくあります。それは間違っています。

長い間、私のクラス名は「セマンティック」であり、それは私が何かをしているだけであると考えていたので、コードや小さな「ハック」などを説明する必要はありません。

長年のプロジェクトのコードに戻ると、この理論が非常に間違っていることがすぐにわかります。

仕事中のコードに関しては、私はすべての責任を負うことはできません。実際、問題の一部はそこに手を差し伸べた人の数です。現在、私たちのチームには、ある時点で私たちのサイトのCSSを作成した7人の私たちがいます。年。チームの各メンバーは、CSSに関するさまざまなレベルの知識と能力を持っています。

また、長年のプロジェクトでよくあることですが、一部のコードは古いものです。その多くは、CSS3以前、または5年前のトレンドがクールだった以前のものです。どちらの場合も、それが書かれた時点で物事を行う方法が異なることが多く、場合によっては、知識が自然に不足していました。

また、一部のプログラマーは、コードが「自己文書化」であると主張することも学びました。その用語に慣れていない場合は、「私のコードにはコメントがありません」と解釈されます。

ソリューション

完璧なものはありませんが、コードを改善するためにできることがあると思います。しばらく前に、ハリー・ロバーツによるCSSガイドラインを発見しました。これは、「正気で管理しやすく、スケーラブルなCSSを作成するための高レベルのアドバイスとガイドライン」の約束に忠実です。

コメントコメント

CSSガイドラインにはコメントスタイルの詳細が記載されていますが、私は個人的に、自分が考えていることを将来に伝えるために何かを入れようとしています。私はすべてのコンポーネントをタイトルを表すコメントで始めます。それらはコンポーネントの意図の詳細です。

プリプロセッサを使用する場合、CSSに含めるか、プリプロセッサによってスキップされるように特定のコメントのスタイルを設定します。私はまだこの部分に取り組んでおり、何か、何かを置く習慣を身につけようとしています。

オブジェクト指向

オブジェクト指向は、大きなものを小さなものに分割するプログラミングパラダイムです。ウィキペディアから：

オブジェクト指向プログラミング（OOP）は、通常はクラスのインスタンスである「オブジェクト」の概念を表すプログラミングパラダイムであり、アプリケーションやコンピュータープログラムを設計するために相互に対話するために使用されます。

CSSに関しては、これをオブジェクト指向のCSSまたはOOCSSと呼びます。基本的な概念は、要素のスキンから要素の構造を分解します。つまり、特定の実装の詳細を同時に再利用する必要がなく、繰り返し発生するデザインパターンを簡単に再利用できます。 OOCSSは、コードの再利用に重点を置いています。これにより、コードベースのサイズを小さく抑えることができます。

スケルトンのような構造的な側面について考えます。 オブジェクトと呼ばれる構造を与える一般的なフレーム。これらのオブジェクトは、化粧品を一切使用しないシンプルなデザインパターンです。汎用オブジェクトを作成するために、一連のコンポーネントから構造を抽象化します。

次に、オプションで「スキン」レイヤーを構造に追加して、抽象化に特定のルックアンドフィールを与えることができます。例（CSSガイドラインから取得）：

 / **
 *シンプルでデザインフリーのボタンオブジェクト。 このオブジェクトを `.btn- *`スキンで拡張します
 * クラス。
 * /
.btn {
    表示：インラインブロック;
    パディング：1em 2em;
    垂直整列：中央;
}

/ **
 *ポジティブボタンのスキン。 `.btn`を拡張します。
 * /
.btn--positive {
    背景色：緑;
    色：白;
}

/ **
 *ネガティブボタンのスキン。 `.btn`を拡張します。
 * /
.btn--negative {
    背景色：赤;
    色：白;
}

ここでは、 .btnクラスが要素に構造を提供するだけで、外観については何もしていないことがわかります。 .btnを.btn .btn--positveのような2番目のクラスで拡張して、その要素にさらに具体的なスタイルを与えることができます。

 <button class = "btnbtn--positive"> OK </ button>

プリプロセッサで@extendのようなものを使用するよりも、HTMLで複数のクラスを使用する方がはるかに好きです。これにより、HTMLの可視性が高まり、要素に適用されているクラスをすばやく確認できます。また、私のクラスがCSSの他のスタイルに緊密にバインドされていないことも意味します。これは、カプセル化の概念に従ってOOCSSを支援します。

BEM

BEM （ Block、Element、Modifier ）は、Yandexで開発されたフロントエンドの方法論です。 BEMは実際には非常に完全な方法論であり、私は正直にすべての詳細を掘り下げていませんが、私が関心を持っているのは単に命名規則です。

私はBEMのような命名規則を使用しています。概念は同じですが、正確な構文は少し異なる場合があります。

BEMは、クラスを3つのグループに分類します。

ブロック：コンポーネントのルートまたはベース
要素：ブロック内のコンポーネント
修飾子：ブロックのバリエーションまたは拡張

非常に基本的な例え（例ではありません）：

 。犬 {}
.dog__tail {}
.dog--small {}

要素は2つのアンダースコア（__）で区切られ、修飾子は2つのハイフン（–）で区切られます。

上記の例えでは、 .dogは要素のルートであるBlockであることがわかります。次に、 .dog__tailは要素であり、 .dogブロックの小さな部分です。最後に、 .dog--smallは、 .dogブロックの特定のバリエーションである修飾子です。要素にモディファイヤを適用することもできます。たとえば、 .dog__tail--shortを使用して、 dog__tail要素のバリエーションを指定できます。

場合によっては、ブロック、要素、または修飾子に複数の単語が必要になることがあります。いずれの場合も、これらは1つのハイフン（-）で区切られ、クラスは常に小文字で記述されます。

プリプロセッサ

私はCSSプリプロセッサをワークフローに組み込むことに時間を費やしてきましたが、これまでのところ、非常に価値があります。 CSSプリプロセッサは、前処理された言語で記述されたコードを取得し、それらを古き良きCSSに変換します。これらはCSSではありません。つまり、CSSと同じルールや制限に縛られることはありません。 CSSは優れていますが、やりたいことが簡単にできるとは限りません。

たとえば、CSSで本当に便利なことの1つは、変数です。ある要素の左マージンを別の要素の幅と同じにしたい場合、突然誰かがそれらの数値を変更する必要があると判断します。それらは同じ番号であり、レイアウトはその番号に依存している可能性があるため、複数の場所で変更する必要があります。しかし、バリバールを使用すると、 1つの場所で変更して、レイアウト全体に反映させることができます。もちろん、プリプロセッサには変数だけでなく多くのことがありますが、それは始まりです！

明らかにプリプロセッサを使用する必要はありませんが、使用しているほとんどの人は戻ってこないでしょう。私はそうしないことを知っています。柔軟性の向上と読みやすさの向上は、私が諦めきれないものです。変数とミックスインを使用できるだけで、私は夢中になります。

利用可能なプリプロセッサはいくつかありますが、私が実際に調べて使用したのは、 LESSとSASSの2つだけです。ご覧になり、これらのいずれかをワークフローに追加することを検討してください。振り返ることはありません。

結論

ここでの私の本当のポイントは、CSSの方が優れている可能性があるということです。すべてが良くなる可能性があります。最近、誰かがRedditの投稿へのコメントで、「CSSにはセマンティクスがありません」と言っていました。私は心から反対します。 CSS 100％は、間違いなくセマンティックである可能性があります。

実際、OOCSSとBEMを使用すると、CSSに非常に意味的な意味が与えられます。これは、すぐに簡単にできるという意味ではありませんが、探索する価値は十分にあります。これをCSSプリプロセッサと組み合わせると、非常に読みやすく、保守しやすく、スケーラブルなCSSの可能性があります。

また、これにより、CSS（前処理されているかどうかに関係なく）が読みやすくなるだけでなく、要素にセマンティッククラス名を適用することでHTMLが読みやすくなります。

TL; DR

わかりました、多分それはたくさんでした–要約すると、これを行うことによってより良いCSSを書いてください：

オブジェクト指向のCSS ：

各クラスは1つのことを行います—それはうまくいきます、それは正しく行います

ブロック、要素、修飾子（BEM）スタイルのクラス名：

ブロック： .grid
要素： .grid__item （2つのアンダースコア）
修飾子： .grid--wide （2ハイフン）

プリプロセッサは素晴らしいです：

それらをチェックしてください：LESS – SASS
または他の人を見つける：開発時間を短縮するための8つのCSSプリプロセッサ