CSSの書き方
#RFC
CSSがカオスになっているので、以下のルールを守りましょう。
・CSSは油断するとすぐに名前空間の奪い合いが発生するのでちゃんとルールを守ることが重要。
・ ファイル毎に読み込みの順番が変わっても動作するように作るのが基本。
基本ルール
MUST
・1React コンポーネント=1CSSファイル=1ブロック原則
• React ComponetのCSSは、 components/フォルダの配下にJSと同一のファイル名.scssというファイル名で配置する
• React Componentの名前と、 JSのファイル名と、 CSSのファイル名は同じにする
●例:
●component名: ShareMenu
• JSファイル名: ShareMenu.js
・CSSファイル名: ShareMenu.scss
・CSSクラス名: share-menu
● コード:
● ShareMenu.js
export default class ShareMenu extends React.component {
}
• ShareMenu.scss
.share-menu_{
}
margin: 10px;
.title {
}
font-size: 20px;
All