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>
- ローカルスコープ