開発者向けCSSコードの改良

今日、私たちは、大規模なWebプロジェクトで書くとき、より良いコードを維持することをより簡単にするために、慣習的なCSSを書く慣習と慣習について学びます!
通常、コードを書くとき、コードの働き方は最も重要です.しかし、コードが実行されるとき、あなたが注意を払う必要がある次の問題は、コードを最適化する方法です.これは簡単に編集するのに役立ちますので、コードを維持するだけでなく、ウェブサイトの読み込み容量を向上させる.

CSSファイルのリセット
あなたが気がつくならば、各々のブラウザーはHTML要素のためにそれ自身のデフォルトスタイルをセットする方法を持っています.これらの要素の多くは、異なるブラウザーでしばしば表示されます.
私たちがCSSファイルのリセットコードを使用するという事実は、Webページの要素が多くの異なるブラウザーで均一な方法で表示されるのを助けるでしょう.以下は著者のエリックマイヤーのリセットCSSコードです.私の意見では多くのプログラマが評価します.
このコードをコピーして、CSSファイルの最初の場所に置く必要があります.著者のエリックマイヤーの詳細については、CSSのリセットコードがどのように動作するかを説明する場合は、CSS Resetを訪問することができます.
また、正規化を使用することもできます.あなたのウェブサイトのためにCSSをリセットするCSSファイル!

Link Normalize

自分を繰り返すな
これは非常に重要な要素と見なされ、しばしばCSSを含むほとんどのプログラミング言語で使用されます.主な目的は、Webページ内のコード間の繰り返しを減らすことです.あなたが視覚化するのを助けるために、以下のコードでボタンのCSSプロパティを設定する2つの例を作成します.
上のコードでは、2つのクラスの間で確認できます.ボタン送信.ボタンの受信には、似たようなプロパティがあります.

同じです:色、境界線半径、パディング、フォントサイズとテキスト整列.

異なる:背景.

多くの類似点があるので、我々はクラスを使用する必要があります.ボタンを2つのクラス間の重複するすべてのプロパティを収集します.これは、コードを簡単に編集できるだけでなく、CSSのコードの情報を繰り返すことができます.分かりやすくするために、最適化された後のコードを参照してください.
しかし、実際には、より複雑な要因があるので、慎重に最適化を実行する前に、要素のCSSプロパティ間の関係と相関を確認する必要があります!

CSSコード
通常、Webページ内の特定の単語のスタイルを設定する必要がある場合、その属性をCSSファイルの最後の位置に追加します.そしてもちろん、あなたのコードはまだ完全に実行されます.
しかし、これらのCSSプロパティを再び見つけたいと思った後に、プロパティを見つけることができないので、本当に難しく、時間がかかります.
したがって、CSSファイルをさまざまなコンポーネントに分割する必要があります.

reset :ブラウザの*スタイルを再フォーマットするCSSプロパティだけを含んでいます.

ヘッダー:ヘッダー、ロゴ、メニュー、色のためにCSSプロパティだけを含みます.

本体:コンテンツ、画像、ビデオ、幅のCSSプロパティのみが含まれています.

Footer :フッター用のCSSプロパティのみです.

サイトの他の部分.
CSSでの短縮
これは効果的にCSSコードの行の数を削減するだけでなく、ファイルサイズを大幅に削減するのに役立ちます要因です.短縮する方法は、複数のCSSプロパティを1行に結合する方法です.それはしばしばマージン、パディング、背景、境界線に適用されます.CSSのプロパティ.以下のコードを参照してください.
ボーダーCSS

.element{
   border-width: 1px;
   border-style: solid:
   border-color: black;
 }

ボーダーCSS速記

.element{
    border: 1px solid black;
 }

ウェブサイトのクラスIDの名前を設定する
通常、私たちは、クラス要素とidをHTML要素のクラス名またはIDに一致する限り、必要に応じて名前を付けます.しかし、私がそれを見るように、CSSの名前は、人間の文書(理解できる)に近い2つの要因を収束させなければならなくて、ウェブサイトでクラスまたはIDの機能をカバーする必要があります.
大規模なWebプロジェクトで動作する場合は、BEM(Block Element修飾子)と呼ばれる一般的な命名規則に従ってクラス名を指定することが一般的です.CSS命名規則とウェブ上の各コンポーネントのタスクを理解するためにプロジェクトに取り組むとき、それは誰にでも役立ちます.これにより、プロジェクトの一貫性を作成します.
以下はBEMの名前です.

あなたがBEM規則に従って命名についてもっと学びたいならば、あなたはLink Bemを訪問することができます

あまり使わないでください!重要タグ
CSSコードでは、属性を設定して動作しない場合は、通常、その属性をタグに代入します!重要です.そして、しばしば結果はすぐに変わります.
しかし、あなたがあまりにたくさん使うとき!CSSのプロパティの重要なタグ、それはウェブサイトのための困難なメンテナンスを引き起こし、また、ウェブサイトの要素のフロールールを破る.したがって、私はあなたの使用を制限することをお勧め!可能な限り重要なタグ.
あなたがDoのものについて学ぶことを望むならば、使用してのDNSの!重要なタグは、それを訪問することができますLink smashingmagazine

コメントを追加
あなたがちょうど書いて、あなたのウェブサイトを準備したとき、CSSコードを理解するのは簡単です.しかし、しばらく後に戻ってくると突然、これらの属性は、ウェブサイトで何をすべきかを覚えていないことを実感します.
それで、私はオンラインで検索して、CSSコードにコメントするかなり良い方法を見つけました.これは、後でいくつかの時間を節約します.同時に、あなたのプロジェクトを維持するか、編集するとき、これはコードを理解することができるとき、他の人を助けます.そして、それによって、コーディングのために時間と努力を短くします.
あるクラスやIDの関数を記述するのに加えて、CSSコメントを書く場合もあります.

修正:プロジェクトで作業する場合、特定のプロパティを修正した場合は、そのコードを右側に修正する方法を説明します.(コードを見るときに他の人が理解するようになる)

リマインダー:何度もバグを修正していない(残業のため)、私たちは、次の日何をすべきかを思い出させるためにファイルを右にコメントすることができます.

ブラウザのサポート
これは、Webプロジェクトのデザインと開発を開始するときに同様に重要な要因です.ほとんどのブラウザは最も基本的で共通のCSSプロパティをサポートします.
しかし、ブラウザによってサポートされていないプロパティや、それらを使用する場合は、接頭辞を付けなければなりません.したがって、1つのブラウザで動作するCSSプロパティが表示されます.
上記の問題を解決するには、ブラウザを使用してCSSプロパティを確認できます.どのブラウザがサポートし、その属性をサポートしていないかについてのすべての情報を提供します.また、その属性をサポートしていないブラウザーのエラーをすばやく修正できるように、追加のソリューションを提供します.
CSS Gridレイアウトプロパティでテストしたイメージです.

Link Can I use

CSSでのFlexboxとGridの使用
私たちの意見では、Flexboxやグリッドを使用してWebサイトのレイアウトを構築するために多くのユーティリティを提供しているので、多くの異なるデバイスの画面上の応答レイアウトを支援するだけでなく、フレームワークに依存して減少します(フレームワークを使用して遅いWebサイトの読み込み時間を引き起こす).
Flexboxの詳細については、Link flexboxを訪問することができます
グリッドの詳細については、Link gridを訪問することができます

未使用のCSSプロパティをチェック
あなたがウェブサイトを開発するとき、ウェブサイトのCSSファイルにまだ使用されていないが、まだロードされている多くのCSSプロパティがあります.これはページロード時間を遅くします.
したがって、CSSコードを最適化し、未使用のCSSコードをWebサイトで削除するためのツールPurifyCSSを紹介します.

Link purifycss