ANDCO

プロパティと値の指定方法

  • important指定子は使用しないように（VARIABLEやCSSの設定以外）
//!important をCSSスタイルシートで広範に使用すると、コードのメンテナンスや更新が難しくなります。
//特定のスタイルに依存関係を作成し、意図しない副作用を引き起こさずに変更や削除するのが難しい状況を作り出します。

//bad
.c-button {
　　display: flex !important;	
}
  • できるだけ省略形を使う（例：border: 2px 0 1px 4px）
//略語を使用すると、CSSファイルを簡潔で効率的に保つことができます。
//省略記法を使用することで、より少ないコード行数で同じスタイリング効果を実現し、Webページのファイルサイズを小さくし、読み込み時間を短縮することができます。

//bad
background-image: url(./folder/text.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;


//good
background: url(./folder/text.jpg) cover/center no-repeat;
  • pseudo-classのcontent=””にテキストを入れない
//意味のあるテキストコンテンツを作成するためには、<span>、<div>などの適切なセマンティック要素を使用して、テキストをHTMLマークアップ内に含めるのがベストプラクティスです。

//bad
.c-button:after {
  display: inline;
  content: "ボタン"；
  color: #000;
  font-size: 20px;
}
  • 属性セレクタとプロパティ値には、二重引用符（””）を使用する
//属性セレクターやプロパティ値で一貫して二重引用符を使用することで、CSSコードが適切に構造化され、エラーがなく、さまざまなブラウザと互換性があることを確認できます。

//bad
font-family: '游ゴシック',sans-serif;

//good
font-family: "游ゴシック",sans-serif;
  • 可能な限り3文字の16進表記を使用する。
//3文字の16進数表記は、6文字の表記よりも書きやすく覚えやすいです。
//これにより、特に黒、白、およびグレーの様々な色など、よく使われる色を指定するプロセスがCSSで簡素化されます。

//bad
  color: #ffffff;

//good
 color: #fff;