あなたのCSSをより簡単に保つ2つのヒント

きれいなコードを書く方法の1つは、簡単なコードも書くことです.意味-実行するのが簡単である方法であなたの仕事をしてください、壊れることができたより少ないものを持ちます、そして、全体的に他の開発者によって理解しやすいです.
でもどうやって起こるの?さて、偉大さを達成している間、我々が行っているものでないかもしれません🙂

目標は1 -不要なルールからコードをクリーンアップ
あなたが使うことができる最も簡単な簡素化の1つはコードを書かないことです.または、あなたはすでにそれを削除するためにそれを書いた場合.どちらですか.Welp、特に何もしないもの.以下に例を示します.

...some-selector p {
    color: black;
    font-size: 1em;
    margin: 1em;
    line-height: 1.7;
}

何を削除するかを決定するのに十分ではありません.しかし、例のために、あなたが遭遇するかもしれない最も一般的なユースケースを考慮しましょう.

...some-selector p {
    color: black;  /* Inherittted? */
    font-size: 1em; /* That is default */
    margin: 1em;
    line-height: 1.7; /* for consistency, we might want this set to the parent */
}

我々が決してセットしないならばcolor , それから、それは黒として受け継がれます、そこで、ここでそれを定める際に、ポイントがありません.

font-size 同じことですが、フォントサイズを変更しない限り、デフォルト値を書く点はありません.テスト中に人々がデバッグしたり、視覚化したり、値を変更しようとしたりする間、これはしばしば起こります.

line-height 視覚的な一貫性が必要な場合は、通常の場合は、通常のフォントサイズを指定してください.あなたが多くの場所で線の高さを定義するならば、一貫していることを保つことは問題でありえました.

したがって、上記をきれいにすることで、同じ結果で終わることが可能ですが、次のようになるコードです.

...some-selector p {
    margin: 1em;
}

我々はマージンマージンを上書きするだけです.そして、このマージンがウェブサイト全体で一貫しているならば、これはさらに簡素化されるかもしれませんp { margin: 1em } without the ...some-selector ラッパアラウンド.
きれいにすることができる他のコードは、一般的に次の行に沿っています.

div with width: 100% これには他の規則や親が定義されていない

height: 100% のように、<p> タグ内ノーマル<div> タグ)その高さは何もしない.

シンプルな結果のための複雑なスタイルが、これはショーケースや説明するのは難しいです-何度もデザインを達成するためのより簡単な方法があります

深さを減らしてください－バニラCSSで、それは親を削除しています.

特に何もしない規則

目標は、2 -スタイルだけが必要です
さて、これは明らかに聞こえますね.しかし、我々はすぐにそれを忘れるし、ちょうどそれと一緒に行く、それはどのように多くのコードが書かれているいくつかの価格があるようではない、右?さて、時間とお金が大きなcodebaseに媒体を維持するときに遊びに来ると、人々はそれから離れて滞在します.
この合併症を減らす方法の1つは、本当にスタイルを作らなければならないことについて考えることです.どのようにコンポーネントが接続され、どのコンポーネントのスタイルは何ですか?以下に例を示します.

/* Demo component that does one thing only. */
.card { color: red; }
.card .card-title {font-size: 2em}

/* A <section> element right in the website wrapper */
.section-welcome {padding: 5em 0;}

それが中であるとき、我々が青であるカードを必要とするならば.section-welcome 要素、我々はそれを行うには2つの現実的な方法があります.section-welcome .card {} , を上書きする.card 私たちのスタイル.もう一つの方法は、.card のような要素.card--secondary 例えば.
この例では、デザインと要件を調べることによって、2つのアプローチのどちらが正しいかを決定することができます.歓迎セクションがそのデザイン(ウェブサイトのための何かユニークな)と.card 要素はそこで異なるだけでなければなりません.section-welcome .
If the .card 要素の変更が少なく、他の場所で再利用することができます.修飾子は、コンポーネントに設定できる余分なクラスです.
修飾子を使用する場合

ときに、視覚的な変更は、アプリケーションやウェブサイトの色、サイズ、間隔の変更などの他の場所で使用することができます一般的です.

あなたがそれがウェブサイトで他の場所で使われるのを見つけることができるとき.注意:4 px小さいパディングまたはいくつかの不透明度のようなマイナーな違いが1つの要素と一貫性にあるならば、あなたのデザイナーが必要とするだけでなく、1 : 1の結果であるならば、あなたは入れ子になったセレクタで修飾子を混ぜることができます.

セレクターをネストする場合は

特定のラッパーのための全体のアプリ/ウェブサイト上のコンポーネントに1つだけ変更がある場合.

多くのラッパーを持っているときは、コンポーネントを少し違う方法で変更します.修飾子を使用する場合は、それらを名前を争うだろうし、それらを再利用することはできないことに気づくでしょう.

上記のヒントの一部は、デザインの悪習から派生しています-矛盾の現実が、現実の世界では、時間制限、悪いデザイン、非現実的な期待、困難なチームメンバー、テストの欠如、方向性と要件の変更、ブラウザのサポートは、ハッキングが必要です、編集経験(だけではない静的コード).バックエンドチームのマークアップを変更したり、クラス(修飾子特に)を忘れている.したがって、これらの問題のすべての経験は、少なくとも問題のアプローチを考え出すし、それを適用します.
全体的に、各状況は、最高のアプローチで1分間考える必要があります.あなたがコードをリファクタリングすることを忘れないでください!それは大きなプロジェクトが維持し、悪い構造で成長するのは難しい理由です-あなたがそれをよく考えていても、良いアーキテクチャを置く場合は、上記のような問題が発生すると、我々はしばしば開発者としてのようなものを忘れるかもしれないとして、“何かを今ハックする場合は、できるだけ早くリファクタに戻ってくる”.