こんにちは、@desnote_blogです。

BEMやMCSS、SMACSSとかはもう古い。

といっても、正直まだあまり理解指定ない。とりあえずStyled Componentが今人気ということは聞いた。

そしてどれもvueやreactで利用する。

CSS Modules

  • vue ファイルで<style module> と記載。
  • 装飾したい対象に :class=”$style.class_name” とclass名を記載。
  • class=“component_title_4WFpS” という指定になって唯一のスタイルとなる。
  • 衝突は発生しづらい

Scoped CSS

  • vue-loaderの機能
  • 指定したcssにscopeがつくため、影響範囲が狭まる
  • vue ファイルで<style scoped> と記載する。
  • スタイルが全て .title[data-v-298322f1] という形の指定になりスコープが絞られる。
  • デメリット
    • 親コンポーネントが子コンポーネントと同じクラス名を使うと、衝突が起きる可能性あり。
    • グローバルに定義されたスタイルに影響される

Styled Component

  • CSS in JSのライブラリ
  • npm install styled-components
  • シンプルにコーディングできる
  • <Button primary></Button>
  • ローカルスコープ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)