概要: 回避する必要がある 5 つの一般的な CSS エラー (コレクション)

この記事では、最も一般的な 5 つの CSS エラーを要約し、それらを回避する方法を紹介します。

現在知られているように、CSS 言語は Web の重要な部分です。これにより、要素が画面、Web ページ、またはその他のメディア上にどのように表示されるかを描画できるようになります。

これはシンプルかつ強力で、宣言的です。ダーク/ライトモードなどの複雑な機能を簡単に実装できます。しかし、多くの誤解や間違った使い方が存在します。これらは、CSS マークアップを複雑で読み取り不可能でスケーラブルなコードに変えます。

このような事態を防ぐにはどうすればよいでしょうか?ベスト プラクティスに従って、最も一般的な間違いを避けてください。この記事では、最もよくある 5 つの間違いとその回避方法をまとめます。

1. 事前に計画を立てないでください

考えずにすぐに実行すると、タスクがより早く完了する可能性があり、スピード感と達成感も得られます。しかし、長期的にはこれは逆効果です。

コードを書く前に、明確に考える必要があります。コンポーネントの設計にはどのようなアプローチを採用しますか?コンポーネントをアトミックに構築したいですか?構成可能な実用的なシステムを作成する意欲はありますか?すでに組み込まれている UI ライブラリが必要ですか? CSS をグローバル スコープにするか、コンポーネント スコープにするか?

明確な目標があると、最適なツールを選択するのに役立ちます。これにより、冗長性や DRY 違反を防ぐことができます。 アプリケーションを設計する効果的な方法はたくさんあります。うまくいかない最も一般的なことは、即興演奏です。

私たちのコードは予測可能で、拡張と保守が簡単でなければなりません。

例を見てください:

/* ❌ 到处添加离散值 */
.card {
  color: #edb361;
  background-color: #274530;
  padding: 1rem;
}

/* ✅ 定义基于主题的属性 */
:root {
  --primary-bg-color: #274530;
  --accent-text-color: #edb361;
  --spacing-unit: 0.5;
}

.card {
  color: var(--accent-text-color);
  background-color: var(--primary-bg-color);
  padding: calc(var(--spacing-unit) * 2rem);
}

上記の例では、テーマのデザインに CSS 変数を使用すると、すべてが読みやすく明確になることがわかります。最初の .card 定義は完全にランダムに見え、このコンポーネントは簡単に拡張できません。

2. CSS コードの匂い

コードの匂いの中国語訳は一般に「コードの匂い」または「コードの匂い」で、コードのどこかにエラーがあることを示唆しています。開発者 この匂いを通じてコード内の問題を追跡できます。

コードの臭いはバグではありません。また、システムの適切な機能が妨げられることもありません。これらは、コードを読みにくく、保守しにくくする悪い習慣にすぎません。

ここでは、最も一般的なものとその解決方法をいくつか示します:

:: シンボル

は疑似要素で使用され、疑似クラス内で :: 表記を使用するのが非常に一般的です。これは古い CSS 仕様の一部であり、ブラウザは引き続きフォールバックとしてサポートします。ただし、::before、::after、::frist-line## などの疑似要素内では :: を使用する必要があります。 # ...、:link、:visited、:first-child などの疑似クラスで : を使用します。 .

文字列連結クラスの使用#CSS コードベースを支援するために Sass プリプロセッサを使用することは非常に一般的です。 DRY を試すときに、

演算子を連結してクラスを作成することがあります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">.card { border: 0.5 solid rem #fff; /* ❌ failed attempt to be dry */ &amp;-selected { border-color: #000; } }</pre><div class="contentsignin">ログイン後にコピー</div></div> 開発者がコード ベースで

クラスを検索するまでは、問題はないようでした。開発者はこのクラスを見つけるのに苦労するでしょう。

略語の不適切な使用CSS 略語は非常に優れており、過度に冗長なコードを避けることができます。ただし、意図的に使用しない場合もあります。ほとんどの場合、背景の略語は誤って使用されます。

/* ❌ 由于我们只是在设置一个属性，所以不需要使用简写。*/
.foo {
  background: #274530;
}

/* ✅ 使用正确的CSS属性 */
.foo {
  background-color: #274530;
}

!重要 ##!重要

これは通常、より具体的なセレクターがタスクを完了できるシナリオで使用されます。

<div class="inner">
  <p>This text is in the inner div.</p>
</div>


<style>
  .inner {
    color: blue;
  }
  
  /* ❌ 重写 color */
  .inner {
    color: orange !important;
  }
</style>


<style>
  .inner {
    color: blue;
  }
  
  /* ✅ 使用一个更具体的选择器规则，该规则将优先于更一般的规则。 */
  .inner p {
    color: orange;
  }
</style>

CSS コードベースにマジック ナンバーが表示されるのはよくあることです。それらはかなりの混乱をもたらします。場合によっては、開発者がよくわからないプロパティをオーバーライドしているために、コード内に長い数値が見つかることがあります。

/* ❌ Brute 强制使这个元素位于z轴的最前面 */
.modal-confirm-dialog {
  z-index: 9999999;
}

/* ✅ 提前计划并定义所有可能的用例 */
.modal-confirm-dialog {
  z-index: var(--z-index-modal-type);
}

命名規則を使用する

CSS モジュール

最も一般的な命名規則は BEM 101 です。これは、Block

Element、Modifier メソッドを表します。

[block]__[element]--[modifier]
/* Example */
.menu__link--blue {
  ...
}

我对BEM方法最大的担心是，它很耗时，而且要依靠开发人员来实现。CSS模块发生在预处理器一侧，这使得它没有错误。它为我们的CSS模块类名生成了随机的前缀/名称。

4. 使用 px 单位

像素的使用相当频繁，因为它起初看起来很容易和直观的使用。事实恰恰相反。很久以来，像素已经不再基于硬件了。它们只是基于一个光学参考单元。

px是一个绝对单位。这意味着什么呢？那就是我们不能适当地缩放以满足更多的人。

我们应该用什么来代替？相对单位是要走的路。我们可以依靠这些来更好地表达我们的动态布局。例如，我们可以使用ch来表达一个基于字符数的div宽度。

.article-column {
  /* ✅  我们的元素将最多容纳20个继承的字体大小的字符。 */
  max-width: 20ch;
}

通常情况下，px最常用的替换单位是rem和em。它们以一种从框到文本的相对方式来表示字体的相对大小。