フロントエンドコードガイド(二)

フロントエンドコードガイド(一)フロントエンドコードガイド(二)フロントエンドコードガイド(三)

CSS

セミコロン

セミコロンはCSS文のセパレータです.文末に置いてください.

/*     */
div {
  color: red
}

/*     */
div {
  color: red;
}

ボックスモデル

最も理想的なのは、ドキュメント全体でボックスモデルが同じであることです.グローバル設定*{box-sizing:border-box;}可能ですが、既定のボックスモデルは特定の要素で変更しないほうがいいです.

/*     */
div {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/*     */
div {
  padding: 10px;
}

ドキュメントフロー

要素のデフォルトのスタイルを変更しないで、できるだけ自然なドキュメントストリームに要素を維持します.たとえば、画像の下の空白を削除するには、デフォルトの表示を変更する必要はありません.

/*     */
img {
  display: block;
}

/*     */
img {
  vertical-align: middle;
}

同様に、要素をドキュメントフローからできるだけ離れないようにします.

/*     */
div {
  width: 100px;
  position: absolute;
  right: 0;
}

/*     */
div {
  width: 100px;
  margin-left: auto;
}

位置

cssは要素を位置決めする方法がたくさんありますが、次の属性/値は使用しないほうがいいです.

display: block;
display: flex;
position: relative;
position: sticky;
position: absolute;
position: fixed;

セレクタ

セレクタとDOMの結合度を低減する.セレクタが一致する要素が3層構造(擬似クラス、子孫、または兄弟要素)を超える場合.目的の要素に一致するクラスを追加することを考えましょう.

/*     */
div:first-of-type :last-child > p ~ *

/*     */
div:first-of-type .info

セレクタの過負荷を避ける

/*     */
img[src$=svg], ul > li:first-child {
  opacity: 0;
}

/*     */
[src$=svg], ul > :first-child {
  opacity: 0;
}

とくせい

プロパティ値とセレクタを上書きしにくいように(優先度が高すぎないように)、idとの使用を減らしましょう.importantの使用

/*     */
.bar {
  color: green !important;
}
.foo {
  color: red;
}

/*     */
.foo.bar {
  color: green;
}
.foo {
  color: red;
}

オーバーライド(Override)

スタイルを上書きするとセレクタやデバッグが難しくなりますので、できるだけ避けてください

/*     */
li {
  visibility: hidden;
}
li:first-child {
  visibility: visible;
}

/*     */
li + li {
  visibility: hidden;
}

継承

継承できるスタイルは繰り返し書かないでください.

/*     */
div h1, div p {
  text-shadow: 0 1px 0 #fff;
}

/*     */
div {
  text-shadow: 0 1px 0 #fff;
}

簡潔

コードを簡潔に保ち、できるだけ簡潔な属性を使用し、複数の属性を使用しないようにします.

/*     */
div {
  transition: all 1s;
  top: 50%;
  margin-top: -10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

/*     */
div {
  transition: 1s;
  top: calc(50% - 10px);
  padding: 5px 10px 20px;
}

言語

英語は数式より優れている

/*     */
:nth-child(2n + 1) {
  transform: rotate(360deg);
}

/*     */
:nth-child(odd) {
  transform: rotate(1turn);
}

接頭辞

古い接頭辞を積極的に削除します.

/*     */
div {
  transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}

/*     */
div {
  -webkit-transform: scale(2);
  transform: scale(2);
  transition: 1s;
}

アニメーション(Animation)

animationsおよびtransitionsは、transitionsが優先的に選択される.opacityおよびtransformの属性を除いて、他の属性はanimationsを使用しないでください.

/*     */
div:hover {
  animation: move 1s forwards;
}
@keyframes move {
  100% {
    margin-left: 100px;
  }
}

/*     */
div:hover {
  transition: 1s;
  transform: translateX(100px);
}

たんい

使用しない単位の値に単位を使用しないでください.相対単位を使用する場合はremを使用したほうがいいです.ミリ秒ではなく秒を使用

/*     */
div {
  margin: 0px;
  font-size: .9em;
  line-height: 22px;
  transition: 500ms;
}

/*     */
div {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  transition: .5s;
}

色

透明度を使用する必要がある場合は、rgbaを使用します.

/*     */
div {
  color: hsl(103, 54%, 43%);
}

/*     */
div {
  color: #5a3;
}

描画

リソースファイルがcssで簡単に描画できる場合は、HTTPリクエストのロードを回避します.

/*     */
div::before {
  content: url(white-circle.svg);
}

/*     */
div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

Hacks

なるべくHacksは使わないように

/*     */
div {
  // position: relative;
  transform: translateZ(0);
}

/*     */
div {
  /* position: relative; */
  will-change: transform;
}

もし本文が悪くないと感じたら、下の推荐をクリックしてください>>>クリックして原文を読みます