RSCSSのすゝめ
📩 この記事は
RSCSSを学びたてのフロントエンドエンジニアがアウトプットのために記載しています。
「RSCSS初めて聞いたなー」って人向けに内容をまとめたイメージです。
🏃 急いでいる人へのまとめ
- RSCSSとはCSSの流用と管理を楽にするCSSコーディング方法論
- RSCSSのいくつかの構成要素とルールが存在する
🔑 RSCSSとは
概要
Rico Sta. Cruz 氏により提案されたCSSコーディング方法論の1つ。
ITCSSは Reasonable System for CSS Stylesheet Structure の略でCSS構成における合理的なシステムという意味です。
プロジェクトの規模が大きくなっていくとぶつかる
「このクラスどういう意味やねん」
「どこで使われてんねん」
「いつの間にかクラス名被ってんねん」
問題を解決したいという背景のもと、CSSの流用・管理を楽にすることを目的としています。
参考資料
公式サイト: https://ricostacruz.com/rscss/index.html
GitHub: https://github.com/rstacruz/rscss
※ どちらも目を通した所感として内容は比較的似ています。
🔗 RSCSSの構成要素
RSCSSでは各クラス名を以下の要素で分類しています。
- Components
- Elements
- Viriants
- Helpers
🔴 Comonents(コンポーネント)
概要
それぞれのパーツ。
命名規則
最低2単語を用いる & 単語はハイフンつなぎ(cabab-case)にする。
🚫 .form { ... }
✅ .search-form { ... }
説明 - HTML構成
↓みたいにComponentsの中にComponentsを入れることができます。
<div class="page-container">
<form class="seardch-form">
<button class="searchbutton"></button>
</form>
</div>
説明 - CSSのファイル構成
CSSのファイル構成のルールとして、1ファイルで記載できるComponentsは1つまでと決まっています。
※ Components単位でファイルを作成するイメージ
🚫
.first-container { ... }
.second-container { ... }
.search-form { ... }
✅
.search-form { ... }
// 子要素のElementsのスタイルは記載してOK
.search-form {
> .searchbutton { ... }
}
// Variantsのスタイルも記載してOK
.search-form {
&.-active { ... }
}
説明 - CSS記載
ネストのないCSS宣言ではレイアウトに関わる記載は推奨されません。
これはRSCSSの目的である「CSSの流用」を促進するためです。
🚫 .search-form {
position: absolute;
top: 0;
width: 100px;
background-color: #ff0000;
color: #fff;
font-size: 16px;
}
✅ .search-form {
background-color: #ff0000;
color: #fff;
font-size: 16px;
}
※ ロゴなど再利用先でも同値の width や height が求められるものにおいては記載してもOK
レイアウトの宣言についてはネストを利用し記載します。
🚫 .search-form {
background-color: #ff0000;
color: #fff;
font-size: 16px;
}
// デザイン関連はネストなしで記載してOK
✅ .search-form {
background-color: #ff0000;
color: #fff;
font-size: 16px;
}
// レイアウト関連はネストを用いて記載する
✅ .first-container > .search-form {
position: absolute;
top: 0;
width: 100px;
}
あくまでも .first-container の中にいる .search-form がその位置そのサイズでいてほしいよね、という考え方みたいです。
🍎 Elements(エレメント)
概要
Componentsの中にある要素。
命名規則
1単語にする。
複数単語を使用したい場合はそのままくっつけて記載する。
✅ .search-form > .button { ... }
🚫 .search-form > .serch-button { ... }
✅ .search-form > .serchbutton { ... }
説明 - HTML構成
単体で使用しない。
🚫
<body>
<button class="button">ボタン</button>
</body>
✅
<body>
<form class="search-form">
<button class="button">ボタン</button>
</form>
</body>
説明 - CSS記載
HTMLタグでの指定はNG、必ずクラスで指定をする。
🚫 .search-form > button { ... }
✅ .search-form > .button { ... }
また、良きせぬスタイル適用を防ぐためComponentsの子要素のElementsとしてスタイル指定をする。
※ 直下が要素に対する指定が望ましい。
😡 .serchbutton { ... }
🤔 .search-form .serchbutton { ... }
🤩 .search-form > .serchbutton { ... }
🍍 Variants(バリアント)
概要
ComponentsまたはElementsに対して上書きをする。
命名規則
必ずダッシュ - 始まりで使用する。
理由はこちら(公式サイト引用)
- It prevents ambiguity with elements.
- 曖昧さ回避をしたい
- A CSS class name can only start with a letter, _ or -.
- CSSで使えるのが文字と_と-だけなので_か-始まりにしたい
- A dash is easier to type than an underscore.
- -が_より入力しやすい
- It kind of resembles switches in UNIX commands (gcc -O2 -Wall -emit-last).
- UNIXコマンドみたいなイメージ
説明 - HTML構成
必ずComponentsまたはElementsと併用する。
🚫 <button class="-active">ボタン</button>
✅ <button class="button -active">ボタン</button>
説明 - CSS記載
スタイルを指定する際もComponentsまたはElementsを併記する。
🚫 .-active { ... }
✅ .search-form & .-active { ... }
✅ .search-form > .serchbutton.-active { ... }
🥦 Heplers(ヘルパー)
概要
汎用的に上書きをする。Heplersで付けたスタイルは絶対に適用される(上書きされない)。
命名規則
必ずアンダースコア _ 始まりで使用する。
🚫 .center { ... }
🚫 .-center { ... }
✅ ._center { ... }
※ 理由としてはVariantsと同様 & - はVariantsで使用しているからと予測
説明 - CSSのファイル構成
1ファイルにまとめて記載することが求められています。
これはHeplersの定義上、Variantsとは異なり併用するComponentsやElementsに依存しないスタイルとなるためです。
🚫 .search-form._center { ... }
✅ ._center { ... }
つまり、状況に分けて変化するものではなく「常にこうであれ！」のCSS宣言のみHeplersとして扱います。
// どんな状況であれflexにしてほしい
._d-flex {
display: flex !important;
}
// どんな状況であれmarginを2em取りたい
._m-2 {
margin: 2em !important;
}
説明 - CSS記載
Heplersが上書きされない最強クラスであること、他のCSS宣言でネストを用いる部分が多いことから !important を付けた方がなぜかスタイル当たらない現象が起きづらそうです。
これを考慮すると、1つのHelpersに指定するスタイルは数が少ない方が乱用を防げます。
🚫 ._card {
margin: 0 auto !important;
text-align: center !important;
background: #fff !important;
}
✅ ._center {
text-align: center !important;
}
🚥 その他のルール
2段階以上のネスト記法を用いない
可読性を担保するため。
ちなみに、「ネストをしてはいけない」ではないので2段階のネストの参照自体はOKっぽい??
🚫 .search-form {
> .serchbutton {
> .text { ... }
}
}
✅ .search-form >.searchbutton > .text { ... }
子要素のCSS宣言に先祖のComponentsを巻き込んではいけない
CSSの混沌を防ぐため(と予測)。
<div class="first-container">
<form class="search-form">
<button class="searchbutton"></button>
</form>
</div>
<div class="second-container">
<form class="search-form">
<button class="searchbutton"></button>
</form>
</div>
.search-form > .searchbutton {
background: #fff;
border: 1px solid #ff0000;
border-radius: 4px;
color: #00ff00;
}
という構成で .first-container のElements .searchbutton だけ文字色を変えたい！
となったら以下のような書き方でCSS宣言することが定められています。
🚫 .first-container > .search-form > .serchbutton { ... }
✅ .search-form & .-active > .searchbutton { ... }
先祖要素(親の親など)のComponentsを巻き込んで参照するのはNGで、親要素-子要素間で解決することを推奨しています。
つまり、.-active 自体にスタイル指定がなくても子要素のためにVariantsを付けて良いみたいです。
<div class="first-container">
<form class="search-form">
<button class="searchbutton"></button>
</form>
</div>
<div class="second-container">
<!-- searchbuttonにスタイルを当てる用にVariantsを追加 -->
<form class="search-form -active">
<button class="searchbutton"></button>
</form>
</div>
🐥 補足
RSCSSのドキュメントを読んでみて以下の疑問点が残りました。
- ComponentsとElementsのすみ分けって結局なんなの??
- Variantsっていつ使うの??
- VariantsをVariantsで上書きしていいの??
これはドキュメントには回答が書いていないので個人的な考え方とともに以下の記事に記載しています。
Discussion