一般的なフレームワークを使用してアプリケーションを構築している人にも、スタイルの追加は必要です。使用するテクノロジーによっては、スタイルを特定の記述方法で書くことが求められるからです。使ってスタイルを記述する方が良いでしょう。プリプロセッサのことも忘れてはいけません。あなたは、こう思っているかもしれませんね。ツールの数だけ記述方法が存在するに違いない・・・。基本は同じなんですよ。書くためのヒントをいくつか紹介したいと思います。導入したいのであれば、このガイドから始めると良いでしょう。ツールやプリプロセッサでも簡単に導入することができます。使っている人にとっても、この記事は役に立つと思います。洗練されたフォルダ構造は、プロジェクトのメンテナンスに役立ちますが、それはスタイルにおいても同様です。重要なのは、参照先に応じてコードを分割するということです。管理すれば、間違いなく問題が発生します。プロジェクトをスケールアップして、新しいコンポーネントを追加したい場合は、要注意です。プロジェクトのスケーリングという観点から見れば、スタイルの構造を適切に設定することが不可欠になります。プロジェクトで使用するコンポーネントに応じて、ファイルを整理してくれる構造を作るように意識しましょう。テーマのスタイルと、コンポーネントのスタイルは区別したほうがいいでしょう。役割に応じて、ミックスインと変数を、すべてひとつのフォルダにまとめるのもいいですね。以下は、フォルダ構造の一例です。サイトのデザイン案を持っていて、コーディングのレイアウトから始めたいと思っているところです。プロジェクトの色を管理するために、賢い人は何をするのでしょう?単純なのは、スタイルルールで色の値を直接書き込むやり方です。この方法は将来、面倒になる可能性があります。どちらも変数が使えるのです。任意の値を変数として保存することができますから、色の値を変数として保存しておくことは理にかなっています。HEX(16進数)が使われています。コンピューター用に設計された形式なので、人間にとってはまるで暗号のようです。テストで生体認証に失敗するかもしれませんね)。ひとつめの色はアクアマリン、ふたつめの色はゴールドです。デザインにおいては、特別な役割を持っている色があります。ひとつはブランドのカラー、もうひとつは背景色です。ブラウザ用にコードを記述するだけではなく、その特別な色のために、堅牢な構造を作っておく必要があるのです。デザイナーの助けを借りるのもいいでしょう。その人が色の再現に及び腰なら、あなた自身でやるという選択肢もあります。色に名前を付けることから始めます。値を人間が解読可能な名前に変換するのは無理な注文ですが、幸い、最適なツールがあります。いうサイトを使っていますが、好みのものを使えばいいでしょう。色に名前がついていれば、役割を割り当てることができます。使用する色を定義するといいでしょう。カラースキームが役に立つと思います。これが、色設定の一例です。プリプロセッサは、ツールセットに便利な機能を追加するだけでなく、コードの整理にも一役買ってくれます。良い例は、スタイル宣言のネストです。セレクタを他のセレクタにネストすることができるので、相関関係を見られるようになります。非常に強力な機能なので、ともすれば使いすぎてしまうかもしれません。階層は、3つ以上深くしないことをおすすめします。このルールは、セレクタの詳細度と、ネストされたセレクタどちらにも当てはまります。この限界を超えてしまうと、セレクタの詳細度が増すだけでなく、コードが読みにくくなってしまうのです。以下、例を見てみましょう。親セレクタを参照することができます。ネストと組み合わせて、親セレクタを必要とするルールの定義が可能です。使用は、ときどきミスの元となります。}}ご覧の通り、アンパサンドセレクタのせいで、スタイルは無駄に複雑になり、コードが読みにくくなってしまいました。プロパティの記述順には意味を持たせるプロパティのソートは必須ではありませんが、したほうがいいです。プロパティが適切にソートされているということは、コードスタイルが一貫していることと同義だからです。そのうえ、コードをスキャンするときに便利になります。プロパティのソートにおいては、信頼できる情報源は存在しないので、アルファベット順など、好きな設定で並べ替えることができます。設計概念の書式ガイドラインに載っているルールを少し変更して使っています。これは、私のおすすめのソート順です。$accent;}クラスの命名規則を使うプロジェクトが大きくなってくると、スタイルが汚くなりがちです。既存のルールを拡張する必要があるときはなおさらです。名前空間の衝突を避けるためのメカニズムを持っていません。書かれたスタイルはすべてグローバルなので、意図せずプロパティを上書きしてしまう可能性が非常に高いのです。カスケードの性質を持っているので、特殊なセレクタを定義することが重要になってきます。特殊なセレクタを使えと言っているのではありません。特定の要素にスタイルを追加する場合、タグセレクタなどの一般的なセレクタの使用を避けるということです。ような、一般的なクラス命名規則を使うことができれば、メンテナンス可能なスタイルを書くのは、そう難しいことではありません。考えた、とても人気のある方法論です。頭文字を取って、このように名付けられています。知らない人は、このドキュメントを読むことをおすすめします。使用して作った一例です。}}わかりやすいメディアクエリを書くレスポンシブウェブサイト開発において、メディアクエリは最重要ポイントです。ユーザー側のデバイスに合わせて様々な解像度のスタイルを定義したり、レイアウトを変えたりすることができるのは、メディアクエリのおかげだからです。おいて、メディアクエリは一連のルールであり、ユーザー側のブラウザ上でチェックされます。チェックが通ると、メディアクエリブロックで定められたスタイルが、ウェブサイトに適用されます。メディアの種類と特徴を説明するクエリを利用すれば、さまざまなデバイスをターゲットに設定できます。ルールをたくさん組み合わせてしまうと、メディアクエリはあっという間に複雑になってしまいます。}}定義を変数化することで、メディアクエリの作成は、より開発者フレンドリーになります。使えば、文字列を通常のCSSコードとして使用することができます。ルールを定義するときに便利です。便利に使えるセレクタがあります。クラスセレクタか子孫セレクタを使うことができます。モジュラー形式の記述を記述するのにぴったりなセレクタが、もうひとつあります。プラスセレクタの名前でも知られている、隣接兄弟セレクタです。セレクタの要素に先行する要素があるときにのみ適用されるスタイルを記述したいとします。記事のテキストにタイトルが付いているとしたら、そこへ余白を追加することができます。やり方は次の通りです。}}とても便利なスタイルの定義方法で、私も気に入っています。マイナスポイントもあります。セレクタのパフォーマンス性は、それほど高いとは言えません。セレクタに、モジュール性よりもパフォーマンスを期待しているのであれば、おすすめはしません。次に、兄弟セレクタを使用すると詳細度が高くなるので、後からスタイルを上書きすることは難しいかもしれません。いえ、要素の存在に応じてスタイルを適用するのであれば、試してみる価値はあります。参考文献さて、あなたはもう、読みやすく、メンテナンスもしやすいモジュラー形式を記述できるようになりましたね。自信を持ってスタイルを書けるようになるために、もっとアドバイスが欲しいというのであれば、次の記事をチェックしてください。ベストプラクティスCSSフロントエンド原著者の許諾を得て翻訳・掲載しています。海外で話題の記事を翻訳して届けるエンジニアのためのメディアです。