避けるべき SS の実践方法

こんにちは！前回の記事からだいぶ時間が経ってしまい、皆さんとご連絡できずにいました。戻ってきて、Web 開発の旅に役立つヒントを共有できることを楽しみにしています!

今日は、避けるべき 5 つの CSS 実践を見てみましょう。これらの洞察がお役に立てば幸いです。行きましょう?

1.過度に具体的なセレクター

非常に具体的なセレクターを記述すると、CSS の管理とデバッグが困難になる可能性があります。セレクターはシンプルで再利用可能なものにしてください。

避けてください:

#header .nav .link.active:hover {
    color: red;
}

より良いもの:

.nav-link:hover {
    color: red;
}

不必要な複雑さを避けるために、必要な場合にのみ特異性を使用します。

2.グローバル セレクター

のオーバーロード

ユニバーサルまたは広すぎるセレクターを使用すると、サイトの大部分に意図せず影響を与える可能性があります。

避けてください:

* {
    margin: 0;
    padding: 0;
}

より良いもの:

html, body {
    margin: 0;
    padding: 0;
}

予期しない副作用を防ぐために、グローバル セレクターの使用を減らします。

3.色または値のハードコーディング

ハードコーディングにより更新が困難になります。どこでもランダムな値を使用するのではなく、一貫性を保つために変数を使用してください。

避けてください:

.primary-btn {
    color: #3498db;
    margin: 20px;
}

より良いもの:

:root {
    --primary-color: #3498db;
    --default-margin: 20px;
}
.primary-btn {
    color: var(--primary-color);
    margin: var(--default-margin);
}

4.一貫性のない単位

単位 (px、rem、% など) を混在させると、デザインに一貫性がなくなり、応答性の問題が発生します。

避けてください:

font-size: 16px;  
margin: 1rem;  
width: 50%;

より良いもの:

font-size: 1rem;  
margin: 1rem;  
width: 50%;

フォントには rem、レイアウトには % などの一貫した単位を使用します。

5.ブラウザの互換性を忘れています

ブラウザのサポートを考慮せずに新しい CSS 機能を使用すると、一部のユーザーのデザインが壊れる可能性があります。

避けてください:

div {
    aspect-ratio: 16 / 9;
}

より良いもの:

@supports (aspect-ratio: 1) {
    div {
        aspect-ratio: 16 / 9;
    }
}

結論

これらの一般的な CSS の実践を回避することで、よりクリーンで効率的なスタイルを記述し、Web ページのパフォーマンスを高めることができます。ベスト プラクティスに従うと、ユーザー エクスペリエンスが向上するだけでなく、チームにとってコードが読みやすく、保守しやすくになります。 

この投稿がお役に立てば幸いです!次の記事でお会いしましょう!

以上が避けるべき SS の実践方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。