効率化に役立つ 20 の CSS コーディングのヒント (並べ替え)

この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクティスをまとめてご紹介します。 CSS 初心者向けのものもあれば、上級者向けのものもあります。この記事から皆様が役立つ知識を学べることを願っています。

では、始めましょう。

1. マージンの崩壊に注意する

他のほとんどのプロパティとは異なり、上部と下部の垂直余白は一緒に存在すると相殺されます。つまり、ある要素の下端が別の要素の上端に接する場合、2 つのマージン値のうち大きい方の値のみが保持されます。例えば：

html

<div class="square red"></div>
<div class="square blue"></div>

CS

。四角 {
    幅: 80ピクセル;
    高さ: 80px;
}
。赤 {
    背景色: #F44336;
    下部マージン: 40px;
}
。青 {
    背景色: #2196F3;
    上マージン: 30px;
} 

赤い四角形と青い四角形の上下の間隔は 70 ピクセルではなく 40 ピクセルです。マージンの崩壊の問題を解決する方法はたくさんあります。初心者にとって最も簡単な方法は、すべての要素に対して一方向のみのマージンを使用することです。たとえば、すべての上部と下部のマージンに margin-bottom を使用します。

2. レイアウトにフレックスを使用する

フレックスレイアウトが表示されるのには理由があります。 float と inline-block は多くのレイアウト効果を実現できますが、本質的には Web ページ全体ではなく、テキストとブロック要素のレイアウトのためのツールです。 Flex を使用すると、期待どおりのレイアウトを簡単に作成できます。

Flex には、「フレックス コンテナー」のプロパティ セットと、「フレックス アイテム」のプロパティ セットがあります。これらを学習すれば、レスポンシブ レイアウトの作成は簡単です。現在、さまざまなブラウザの最新バージョンでは flex が問題なくサポートされているため、flex レイアウトをより頻繁に使用する必要があります。

。容器 {
    ディスプレイ: フレックス;
}

3. 要素のCSSスタイルをリセットする

長年にわたって状況は大きく改善されてきましたが、さまざまな要素のデフォルトのスタイルについてはブラウザ間で依然として大きな違いがあります。この問題を解決する最善の方法は、CSS の先頭ですべての要素に共通の CSS リセット コードを設定し、デフォルトの内側と外側の余白なしでレイアウトして、効果が均一になるようにすることです。

インターネット上には、normalize.css、minireset、ress など、ブラウザーの不一致を解決する成熟した CSS コード ライブラリがすでに存在します。プロジェクトでそれらを参照できます。サードパーティのライブラリを使用したくない場合は、非常に基本的な CSS リセットに次のスタイルを使用できます。

* {
    マージン: 0;
    パディング: 0;
    ボックスのサイズ: 境界線ボックス;
}

上記のコードは、すべての要素の内側と外側の余白を 0 に設定しているため、少し強引に思えるかもしれません。ただし、これらのデフォルトの内側と外側の余白の影響を受けないため、後続の CSS 設定ははるかに簡単になります。同時に、box-sizing: border-box も優れた設定であり、次に紹介します。

4. すべての要素をボーダーボックスに設定する

ほとんどの初心者はボックスサイズプロパティを認識していませんが、これは実際には非常に重要です。 box-sizing プロパティには 2 つの値があります。

• content-box (デフォルト) - 要素の幅または高さを設定すると、そのコンテンツのサイズも設定されます。すべてのパディングと境界の値は排他的です。たとえば、div の幅が 100 に設定され、パディングが 10 に設定されている場合、要素は 120 ピクセル (100+2*10) を占めます。 border-box - パディングと境界線は要素の幅または高さに含まれます。設定の 1 つは width: 100px と box-sizing: です。
• border-box を持つ div 要素の合計幅は、パディングと境界線に関係なく 100 ピクセルになります。

すべての要素を border-box に設定することで、パディングやボーダーの値によって要素が引き伸ばされたり折り返されたりする心配をせずに、要素のサイズをより簡単に変更できます。

5. 写真を背景として使用する

ページに画像を追加する場合、特に画像をレスポンシブにする必要がある場合は、<img> タグの代わりに background 属性を使用して画像を含めるのが最適です。

これを画像で使用するのは複雑に思えるかもしれませんが、実際には画像のスタイル設定がはるかに簡単になります。 background-size、background-position などのプロパティを使用すると、画像の元のサイズとアスペクト比を維持または変更するのに便利です。

例えば
html

<セクション>
    <p>Img 要素</p>
    <img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="自転車">
</セクション>

<セクション>
    <p>背景画像付きの div</p>
    <div></div>
</セクション>

CS

画像 {
    幅: 300ピクセル;
    高さ: 200px;
}

div {
    幅: 300ピクセル;
    高さ: 200px;
    背景: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
    背景の位置: 中央 中央;
    背景サイズ: カバー;
}

セクション{
    フロート: 左;
    マージン: 15px;
} 

背景に画像を使用することの欠点の 1 つは、スクリーン リーダーや検索エンジンが画像を正しく取得できないため、ページの Web アクセシビリティがわずかに影響を受けることです。この問題は、CSS の object-fit プロパティを使用することで解決できます。現在のところ、IE を除くすべてのブラウザで object-fit を使用できます。

6. テーブルの境界線を改善する

HTML のテーブルは常に見苦しいものでした。レスポンシブにするのは難しく、一般的にスタイルを変更するのも困難です。たとえば、表とそのセルに単純な境界線を追加する場合、最も可能性の高い結果は次のようになります。

ご覧のとおり、境界線が重複している部分が多く、見た目があまり良くありません。二重境界線をすべて削除する簡単な方法は、border-collapse:collapse です。このプロパティを設定するだけで、表の境界線の見栄えがかなり良くなります。

7. よりフレンドリーなコメント

CSS はプログラミング言語ではありませんが、そのコードは文書化する必要があります。簡単なコメントを追加すると、コードを分類して区別するのに役立ち、後で自分や同僚がコードを保守しやすくなります。

大きなエリアの区分や重要なコンポーネントの場合は、次の注釈スタイルを使用できます。

/*---------------
    ＃ヘッダ
---------------*/
ヘッダー { }

ヘッダーナビゲーション { }

/*---------------
    #スライドショー
---------------*/
.スライドショー { }

詳細やあまり重要でないスタイルについては、単一行コメントを使用できます。

/* フッターボタン */
.footer ボタン { }

.footer ボタン:hover { }

また、CSS には // コメントはなく、/**/ コメントのみであることを覚えておいてください。

/* 正しい*/
ｐ {
    パディング: 15px;
    /*境界線: 1px 実線 #222;*/
}

/* 間違い*/
ｐ {
    パディング: 15px;
    // 境界線: 1px 実線 #222;  
}

8. ハイフン命名

クラスまたは ID に複数の単語が含まれている場合は、ハイフン (-) を使用する必要があります。CSS は大文字と小文字を区別しないため、camelCase 命名は使用できません。同様に、CSS では名前にアンダースコアを使用することは推奨されません。

/* 正しい*/
.footer-column-left { }

/* 間違い*/
.footerColumnLeft { }

.footer_column_left { }

命名に関しては、一貫性を高めるコンポーネントベースの開発アプローチを提供する一連の原則に従う BEM も検討できます。

9. 設定を繰り返さない

ほとんどの CSS プロパティは、DOM ツリーの 1 レベル上の要素から継承されるため、カスケーディング スタイル シートと呼ばれます。たとえば、フォント プロパティは必ず親から継承されるため、ページ上のすべての要素に対して個別に設定する必要はありません。

設定したいフォント スタイルを <html> または <body> 要素に追加するだけで、自動的に下位に継承されます。

html{
    フォント: 通常の 16px/1.4 サンセリフ;
}

その後、すべてのページのテキスト スタイルを一度に変更できます。もちろん、CSS のすべてのプロパティが継承されるわけではなく、これらのプロパティについては各要素ごとに個別に設定する必要があります。

10. transformプロパティを使用してアニメーションを作成する

要素の変位やサイズのアニメーションを作成するには、transform() 関数を使用し、要素の幅、高さ、左/上/下/右の属性値を直接変更しないようにしてください。

次の例では、.ball 要素に左から右へのアニメーションを追加します。 left 属性の代わりに transform: translateX() 関数を使用することをお勧めします。

。ボール {
    左: 50px;
    遷移: 0.4 秒のイーズアウト;
}

/* 非推奨 */
.ball.slide-out {
    左: 500ピクセル;
}

/* 提案*/
.ball.slide-out {
    変換: translateX(450px);
}

変換とそのすべての機能 (変換、回転、拡大縮小など) にはブラウザの互換性の問題がほとんどなく、自由に使用できます。

11. 自分でやるのではなく、図書館を利用する

CSS コミュニティは非常に大きく、常に新しいコードベースが登場しています。小さなスニペットからレスポンシブなアプリケーションを構築するためのフレームワーク全体まで、さまざまな用途があります。それらのほとんどはオープンソースでもあります。

次回 CSS の問題に直面したときは、全力で解決しようとする前に、Github または Codepen にすでに解決策があるかどうかを確認してください。

12. セレクタの重みを低く保つ

すべての CSS セレクターが同じように作成されるわけではありません。初めて CSS を学んだとき、セレクターはそれより上のすべてのものを上書きするものだと常に思っていました。ただし、次の例に示すように、これは当てはまりません。

html

<a href='#' id='blue-btn' class="active">ボタン</a>

CS

{
    色: #fff;
    パディング: 15px;
}
a#青いボタン{
    背景色: 青;
}
a.アクティブ{
    背景色: 赤;
} 

.active クラスで設定されたスタイルを有効にして、ボタンを赤色にします。しかし、ボタンには background-color も設定する ID セレクターがあり、ID セレクターの特定度が高いため、ボタンの色は青になり、機能しません。セレクターの重量サイズ仕様は次のとおりです。

ID (#id) > クラス (.class) > タイプ (例: ヘッダー)

重みも加算されるため、a#button.active の重みは a#button よりも高くなります。最初に優先度の高いセレクタを使用すると、その後のメンテナンスで常に優先度の高いセレクタを使用することになり、最終的には !important を使用することになります。これは強くお勧めしません。具体的な理由については次に説明します。

13. !important を使わない

本当に、!important は使わないでください。今は簡単な修正のように思えるかもしれませんが、最終的には大幅な書き直しが必要になる可能性があります。代わりに、CSS セレクターが機能しない理由を見つけて変更するために時間をかける必要があります。

!important を使用できるのは、HTML 内のインライン スタイルをオーバーライドする場合のみですが、インライン スタイルも悪い習慣であるため、できる限り避ける必要があります。

14. text-transformを使用して文字を大文字に変換する

この記事は中国語ではなく英語環境に適用されます

HTML では、単語を強調するためにすべて大文字で記述することができます。例えば：

<h3>従業員は必ずヘルメットを着用してください!</h3>

特定のテキストをすべて大文字に変換する必要がある場合は、通常どおり HTML で記述してから、CSS を使用して変換することができます。これにより、コンテキストの一貫性が保たれます。

<div class="movie-poster">スター・ウォーズ/フォースの覚醒</div>

.映画ポスター{
    テキスト変換:大文字;
}

15.Em、Rem、px

要素とテキストのサイズを設定するには、em、rem、px のどの単位を使用すればよいですか?常に多くの議論がありました。実のところ、これら 3 つの選択肢はすべて実行可能であり、それぞれに長所と短所があります。

どのプロジェクトでどの単位を使用するべきかについては明確な答えはありません。開発者は、さまざまな習慣やプロジェクト要件に応じて、異なる単位を使用する場合があります。ただし、厳格なルールはありませんが、ユニットごとに留意すべき点がいくつかあります。

• em - 要素を 1em に設定し、そのサイズは親要素の font-size プロパティを基準とします。この単位はメディアクエリで使用され、レスポンシブ開発に特に便利ですが、em 単位は各レベルで親要素を基準に計算されるため、子要素の em 単位に対応する px 値を見つけるのが面倒な場合があります。
• rem - <html> 要素のフォント サイズを基準に計算される rem を使用すると、ページ上のすべての見出しと段落テキストのサイズを均一に変更することが非常に簡単になります。
• px - ピクセル単位は最も正確ですが、レスポンシブ デザインには適していません。 px 単位は信頼性が高く、理解しやすく、要素のサイズと動きを 1px まで細かく制御できます。

最も重要なのは、実験を恐れず、すべて試してみて、何が最も効果的かを確認することです。特にレスポンシブなページを構築する場合、em と rem を使用すると作業を大幅に節約できることがあります。

16. 大規模プロジェクトにはプリプロセッサを使用する

Sass、Less、PostCSS、Stylus については、間違いなく聞いたことがあるでしょう。プリプロセッサは CSS の未来です。変数、CSS 関数、セレクターのネストなどの機能や、特に大規模なプロジェクトで CSS コードの管理を容易にするその他の優れた機能が多数提供されます。

簡単な例として、いくつかの CSS 変数と関数を使用する SASS コードのスニペットを次に示します。

$アクセントカラー: #2196F3;
{
    パディング: 10px 15px;
    背景色: $accent-color;
}
ホバー{
    背景色: 暗くする($accent-color,10%)
}

プリプロセッサの唯一の欠点は、通常の CSS にコンパイルする必要があることです。 CSS によって導入されたカスタム プロパティは、真の前処理です。

17. AutoPrefixerを使用して互換性を高める

ブラウザのプレフィックスは、CSS で最も厄介なことの 1 つです。各プロパティに必要なプレフィックスは一貫しておらず、どのプレフィックスが必要かわかりません。スタイルシートに手動で 1 つずつ追加しなければならない場合、間違いなく退屈な悪夢になります。

ありがたいことに、ブラウザのプレフィックスを自動的に追加し、サポートする必要があるブラウザを決定するツールがあります。

オンラインツール: Autoprefixer

テキストエディタプラグイン: Sublime Text、Atom

コードベース: Autoprefixer (PostCSS)

18. CSSファイルを圧縮する

ウェブサイトやアプリケーションの読み込み速度とページの読み込みを改善するには、圧縮されたアセットを使用する必要があります。ファイルの圧縮バージョンでは、すべての空白と重複が削除されるため、全体のファイル サイズが削減されます。もちろん、このプロセスによりスタイルシートが完全に読み取り不可能になるため、本番環境では .min バージョンを使用し、開発用には通常のバージョンを保持しておきます。

CSS コードを圧縮する方法は数多くあります。

オンラインツール: CSS Minifier、CSS Compressor

テキストエディタプラグイン: Sublime Text、Atom

Atom リポジトリ: Minfiy (PHP)、CSSO、CSSNano (PostCSS、Grunt、Gulp)

ワークフローに応じて、上記のいずれかのアプローチを使用できます。

19. カニウス

CSS プロパティに関しては、Web ブラウザ間で互換性の不一致が依然として多く存在します。 caniuse を使用して、使用するプロパティが広くサポートされているかどうかを確認します。プレフィックスは必須ですか?または、特定のブラウザで使用する際に注意すべき点はありますか? caniuse を使用すると、CSS をより快適に記述できるようになります。

20. 検証

CSS の検証は HTML や JavaScript コードの検証ほど重要ではないかもしれませんが、それでもツールを使用してコードを実行することは非常に便利です。間違いがあったかどうかを通知し、誤った使用法について警告し、コードを改善するためのヒントを提供します。

Zip や Autoprefixer と同様に、利用できる無料ツールがあります。

オンラインツール: W3 Validator、CSS Lint
テキストエディタプラグイン: Sublime Text、Atom
コードライブラリ: stylelint (Node.js、PostCSS)、css-validator (Node.js)

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。