CSS を書くためのベストプラクティス – クリーンでスケーラブルで保守可能なコード-CSSチュートリアル-php.cn

CSS を書くためのベストプラクティス – クリーンでスケーラブルで保守可能なコード

Mary-Kate Olsen

リリース： 2024-09-25 06:31:01

オリジナル

359 人が閲覧しました

Best Practices for Writing CSS – Clean, Scalable, and Maintainable Code

CSS を記述するためのベストプラクティス – クリーンでスケーラブルで保守可能なコード

コースのこの最後の講義では、効率的でスケーラブルで保守可能な CSS を作成するための ベストプラクティスに焦点を当てます。これらの原則は、スタイルシートに対するクリーンでプロフェッショナルなアプローチを開発するのに役立ち、プロジェクトが成長するにつれてスタイルシートの管理が容易になります。

1.意味のあるクラス名を使用してください

クラス名は説明的であり、その目的を示す必要があります。ボックスや青いテキストなどのあいまいな名前は避けてください。代わりに、nav-bar や btn-primary など、関数またはコンポーネントを説明する意味のある名前を使用してください。

例:

/* Bad Practice */
.blue-text {
    color: blue;
}

/* Good Practice */
.alert-message {
    color: red;
    font-weight: bold;
}

ログイン後にコピー

2. CSS を整理する

スタイルを論理的にセクションに分割して、CSS を整理した状態に保ちます。スタイルは、コンポーネント (ナビゲーション、ボタンなど) または機能 (レイアウト、タイポグラフィなど) ごとにグループ化できます。これにより、コードの移動と保守が容易になります。

例:

/* Typography */
h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #333;
}

/* Buttons */
.btn-primary {
    background-color: #3498db;
    padding: 10px 20px;
}

ログイン後にコピー

3. DRY (同じことを繰り返さないでください)

再利用可能なクラスを使用するか、類似したスタイルをグループ化することで、コードの重複を避けます。複数の要素が同じプロパティを共有する場合は、同じスタイルを繰り返すのではなく、それらを共通のクラスに適用します。

例:

/* Instead of repeating properties */
h1 {
    font-family: Arial, sans-serif;
    color: #333;
}
p {
    font-family: Arial, sans-serif;
    color: #333;
}

/* Use a common class */
.text-common {
    font-family: Arial, sans-serif;
    color: #333;
}

ログイン後にコピー

4. CSS 変数を使用する

CSS 変数 (カスタムプロパティ) を使用すると、スタイルシート全体で色やフォントなどの値を再利用できます。また、デザインを一貫して更新することも簡単になります。

例:

:root {
    --primary-color: #3498db;
    --font-size: 16px;
}

body {
    color: var(--primary-color);
    font-size: var(--font-size);
}

ログイン後にコピー

5.モバイルファーストのデザイン

最初にモバイルデバイス用のデザインを開始し、次にメディアクエリを使用してデザインを大きな画面用にスケールアップします。このアプローチにより、ウェブサイトの応答性が向上し、すべてのデバイスで動作するようになります。

例:

body {
    font-size: 16px;
}

@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

ログイン後にコピー

6. !重要の使用を制限する

! important の使用は他のすべての宣言をオーバーライドし、コードの管理が困難になるため、最後の手段としてください。代わりに、スタイルの問題を解決するために、より具体的なセレクターを作成することに集中してください。

例:

/* Avoid this */
.button {
    color: red !important;
}

/* Instead, use more specific selectors */
.nav-bar .button {
    color: red;
}

ログイン後にコピー

7.インラインスタイルの使用を最小限に抑える

インラインスタイル (HTML に直接記述された CSS) の使用は避けてください。HTML が煩雑になり、保守が困難になります。スタイルを外部 CSS ファイルに保存しておくと、整理しやすくなります。

例:

<!-- Bad Practice -->
<div style="color: blue; font-size: 16px;">Hello, World!</div>

<!-- Good Practice -->
<div class="greeting-text">Hello, World!</div>

ログイン後にコピー

8.省略表現プロパティを使用する

CSS は、コードを簡素化するための短縮プロパティを提供します。たとえば、すべての辺にパディングまたはマージンを個別に宣言する代わりに、省略記法を使用します。

例:

/* Instead of this */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;

/* Use shorthand */
padding: 10px 15px;

ログイン後にコピー

9.ブラウザの互換性をテストする

CSS がさまざまなブラウザーやデバイスで機能することを確認します。古いブラウザとの互換性の問題に対処するために、必要に応じてベンダープレフィックス (-webkit-、-moz-、-ms- など) を使用します。

例:

/* Add vendor prefixes */
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

ログイン後にコピー

10. CSS プリプロセッサを使用する (オプション)

SASS や LESS などの CSS プリプロセッサの使用を検討してください。これらのツールを使用すると、通常の CSS にコンパイルできるネスト、変数、ミックスインなどの機能を使用して、よりクリーンでモジュール化された CSS を作成できます。

例 (SASS):

$primary-color: #3498db;

.button {
    background-color: $primary-color;
    padding: 10px;
    &:hover {
        background-color: darken($primary-color, 10%);
    }
}

ログイン後にコピー