コンポーネントのCSSコードを整理するには?

7794 ワード
css bem テキストリンク
私は通常、私のCSSコードをより簡単にするために最善を尽くします.あなたがCSSファイルを開くとき、それは本当につまらないです、そして、あなたはそこで何が正しいかについて、全くわからないです?
少なくとも私のために、あなたが毎日あなたのコードを書く方法を改善することは、本当に重要です.それを改善する方法は常にあります.あなたがそれを見つけることができないならば、我々があなたの戦略を理解することができるように、あなたのコードを我々と共有してください.それは驚くべきことだ!
コードBellowは私の反応コンポーネントで使用され、私は私のプロジェクトのための多くのコンポーネントを書くことによって、このテンプレートを達成した.私は、あなたが私に構造の長所と短所を話すならば、本当にうれしいです、それで、私は私自身を改善することができます.
あなたがCSSがどのように働くかについての考えがないならば、底でコメントしてください、そして、私はそれについて新しい記事を作成します.これはCSSについての知識が必要です.
では、始めましょう!
まず最初に、私が言いたいことは、私のコンポーネントのIDまたはタグを使用しないことです.コンポーネントからの要素が別のコンポーネントのCSSによって影響を受けることを回避します.と同様に、「要素H 3」は「素子角要素H 3」スタイルに影響を与える.
このHTMLの構造を考えてみましょう.

そして、それは私がそれが4つの異なる州のように見えると思っている方法です:
  • は、
    • を選びました
  • レギュラー
    • 以上のマウスホバーと一緒の
  • レギュラー
    • ボタン無効な
    私はSSS(Sassy CSS)を使用して簡単に私が作成されるルールのセットを参照するようにします.名前やクラスについては話しませんが、私はプロジェクトでBEMを使っています.
    最初にこのCSSで作るのは、コンポーネントラッパーです.このコンポーネントのすべてのスタイルをメインクラスとして分離するのに役立ちます.そういうわけで、私は私のCSSでタグ名を使用したくありません.
    .element{
}
    このコンポーネントのために、私はいくつかの部分で私のコードを分割しています、そして、これらの部品のいくつかは各々の部分を通して繰り返されることができます.
  • それは、要素ラッパーまたは主なクラス
    • のための私のCSSコードです
  • それが
    • ならば、それは私の内部の要素と他の構成要素クラスです
  • それはセレクタの私のリストです.
  • それは私の修飾子クラスです.
  • それはインナークラスの中で繰り返したくないただ一つのメディアクエリーです.
    • それがどのように見えるかについて見ましょう!
    .element {
  // element css

  // inner elements and components
  &__inner-element {
  }

  // selectors
  &:hover {
  }

  // modifiers
  &--selected {
  }

  // media queries
  @media (min-width: 767px) {
  }
}
    このコード分割は、内部要素、セレクタ、修飾子、メディアクエリのいずれかの中で繰り返し行うことができます.この場合、メディアクエリ内でこの構造を繰り返しました.
    ...
@media (min-width: 767px) {
  // wrapper element css
  border: 1px solid #CECECE;

  // inner element css
  &__inner-element {
    padding: 16px;

    // another inner element css
    &__action {

      // inner element selector
      &:hover {
        background: #FF9900;
      }
    }
  }
}
    すべてを共有した後に、私はあなたにこれのために完全なコードを見るように勧めたいです.
    <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="element element--selected">
      <div class="element__inner-element">
        <div class="element__inner-element__text">
          <h2 class="element__inner-element__text__header">SELECTED</h2>
          <p class="element__inner-element__text__paragraph">
            ipsum dolor sit amet, consectetur adipiscing elit. Nunc non congue
            tortor.
          </p>
        </div>
        <div class="element__inner-element__action">
          <button class="element__inner-element__action__button">
            View now
          </button>
        </div>
      </div>
    </div>

    <div class="element element">
      <div class="element__inner-element">
        <div class="element__inner-element__text">
          <h2 class="element__inner-element__text__header">REGULAR</h2>
          <p class="element__inner-element__text__paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non
            congue tortor.
          </p>
        </div>
        <div class="element__inner-element__action">
          <button class="element__inner-element__action__button">
            View now
          </button>
        </div>
      </div>
    </div>

    <div class="element element">
      <div class="element__inner-element">
        <div class="element__inner-element__text">
          <h2 class="element__inner-element__text__header">MOUSE HOVER</h2>
          <p class="element__inner-element__text__paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non
            congue tortor.
          </p>
        </div>
        <div class="element__inner-element__action">
          <button class="element__inner-element__action__button">
            View now
          </button>
        </div>
      </div>
    </div>

    <div class="element element--disabled">
      <div class="element__inner-element">
        <div class="element__inner-element__text">
          <h2 class="element__inner-element__text__header">BUTTON DISABLED</h2>
          <p class="element__inner-element__text__paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non
            congue tortor.
          </p>
        </div>
        <div class="element__inner-element__action">
          <button class="element__inner-element__action__button" disabled>
            View now
          </button>
        </div>
      </div>
    </div>
  </body>
</html>

    .element {
  $element: &;
  background: #ffffff;
  font-family: 'Nunito', sans-serif;

  &__inner-element {
    border: 1px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__text {
      &__header {
        margin: 0 0 8px 0;
      }

      &__paragraph {
        margin: 0 0 8px 0;
        &:last-child {
          margin-bottom: 0px;
        }
      }
    }

    &__action {
      text-align: center;
      &__button {
        background: #cecece;
        border: 1px solid #999999;
        border-radius: 3px;
        white-space: nowrap;
        padding: 4px 8px;

        &:hover {
          transform: scale(1.2);
        }

        &:disabled {
          opacity: 0.5;
        }
      }
    }
  }

  &:hover {
    background: #aadaad;
    #{$element}__inner-element {
      &__action {
        &__button {
          border: 0px;
          background: #f04e23;
          color: #ffffff;
        }
      }
    }
  }

  &--selected {
    background: #aaffad;
    #{$element}__inner-element {
      &__action {
        &__button {
          background: #cece00;
        }
      }
    }
  }

  &--disabled {
    opacity: 0.5;

    &:hover {
      background: #ffaaaa;
    }
  }

  @media (min-width: 767px) {
    border: 1px;

    &__inner-element {
      padding: 16px;
    }

    &--selected {
      background: #eeeeee;
    }
  }
}
    注意:ラッパークラス名を書き換えることを避けるために、インクルードChorz {{ element }を使用します.https://sass-lang.com/documentation/interpolation
    あなたはどう思いますか.あなたがより良い考えがあるならば、あるいは、あなたがこのコードを書いた方法が好きであるならば、Bellowにコメントしてください.
    ありがとう
    ログインエヌJSP y MySQL haciendo USOデMVCコン
    JS30 Day08