CSS 開発でやってはいけない 10 のこと_html/css_WEB-ITnose

51CTO Network + 第 1 回中国 APP イノベーション選考コンペティション>>

この業界に入って以来、開発者が CSS を克服するために熱心に取り組んでいることがわかりました。

その理由も非常に良いもので、開発者は論理的に考える生き物です。 DIV 要素を追加すると、すべてのコードが 1 行下に移動し、別の DIV が左に「フロート」しますが、これは意味がないと思われます。

開発者の不満を聞いたことがあるでしょう:

「左に 5 ピクセル移動するだけなのに... なんてことだ! 一体全体が 1 行下に移動するのはなぜだろう。

それでは、CSS の間違いトップ 10 について話しましょう。

開発者として CSS を使用した私の経験に基づいて、ここに私の 10 の「やってはいけないこと」を示します。

1. クラスを乱用しないでください

意味のある場合は、クラスの代わりに ID を使用します。これは、ブラウザが DOM 要素に高速にアクセスできるようにする方法です。

2. すべてを 1 つの CSS ファイルにまとめないでください。

管理しやすいように CSS を分割します。各 CSS ファイルは、header.css や footer.css などの論理コンポーネントに分割できます。

3. セレクターに「.red-with-green-dashed-lines」 (赤と緑の破線) という名前を付けないでください。

ページ上のコンポーネントに従ってセレクターに名前を付けます。たとえば、「header-left」、「content-title」、または「content-date」の方がわかりやすいです。

4. コメントを忘れないでください

CSS では、各スタイルが他のスタイルとどのように関係しているのか、どのカラー スキームがどのコンポーネントに適用されているのかを理解するために、コメントは非常に重要です。

5. 開発ツールを恐れないでください

現在、各ブラウザには独自の開発ツール セットがあり、通常は F12 キーを押します。これらのツールは、「CSS のデバッグ」を行うときに重要です。

6. オーバーライドすることを恐れないでください

もちろん、Bootstrap や Foundation などの CSS フレームワークの方が大きいですが、それぞれのフレームワークはニーズに合わせて少し調整する必要があります。更新されたフレームワークを取得すると、変更が上書きされます。巨大な CSS ファイルを掘り下げるのではなく、bootstrap-overrides.css ファイルを作成し、フレームワークを好みに合わせて調整してください。

7. CSS 全体を乱用しないでください。アイデアは、スタイルをあるものから別のスタイルに「カスケード」することです。 !重要なのは、以前のすべてのパターンを同じ方法でマイニングすることを忘れないことです。 : -)

8. Web フォントをあまり使用しないでください。

これは明らかですが、タイプセットを自分で行うことを好む人もいます。サイトでは 1 つまたは 2 つ (最大 3 つ) の Web フォントのみを使用し、ブラウザーのデフォルトに戻してサイトを最適化してください。

9. すべての CSS を手動でコーディングしないでください

CSS を DRY に保つには、LESS や SASS などの CSS プリプロセッサを使用します。これらのプリプロセッサを使用する最大の利点は、配色などの変数を定義し、変更する必要があるときに各色を追跡する必要がなく、すべての CSS で変数を再利用できることです。

10. CSS を「肥大化」させすぎないでください。

スペースは CSS ファイル内のスペースを占有します。 CSS をすばやく読み込むことは誰もが望むことなので、Web サイトに展開する前に CSS 圧縮ツールを使用して CSS をスリム化することをお勧めします。

上記は、開発者として、CSS を記述するときに行うべきではないと私が信じていることです。さまざまな意見を歓迎します。

英語原文: Top 10 CSS Bad Practices