RSCSSの公式サイトを読んでみた個人的解釈
📩 この記事は
RSCSSを学びたてのフロントエンドエンジニアが公式サイトを読んでみた疑問点とそれに対する個人的な解釈を記載しています。
公式サイトはこちら → https://ricostacruz.com/rscss/index.html
RSCSSの概要については以下の記事にまとめています。
❓ 疑問点
主に以下3つです。
- ComponentsとElementsのすみ分けって結局なんなの??
- Variantsっていつ使うの??
- VariantsをVariantsで上書きしていいの??
1️⃣ ComponentsとElementのすみ分け
分かっていること
Elementsの定義として「Compontntsの中の要素」とある
→ 一番外側の要素はComponentsである
分かっていないこと
それ以外の要素に対してComponentsとElementsを区別する基準
思考回路
もしかしたら Elementsを子要素に持っていいのか という観点で区別できるかもと思ったが明記はなし。
先ほども記載の通りElementsの定義として「Compontntsの中の要素」とあるが、これが
- 必ず親要素が存在する
- エレメントの中にエレメントは入らない
のどちらを伝えたいのかまでは掴めていない。
個人的な解釈
解決策ではないけど、 プロジェクトで定義してしまっていいのかな という気持ちに至った。
考える分け方としてはここら辺が観点になるのかなぁ...
- UI観点でComponentsを定義し、含まれないものはElementsとする
- 子要素を持たないものをElementsとし、それ以外をComponentsとする
- 基本Elementsと考えてCSSファイルを切り出したくなったらComponentsにする
- デザインと合わせてレイアウトのCSS宣言も記載したいものはComponentsとし、それ以外をElementsとする
Componentsの定義が「UIのパーツ」という表現なので1つ目がそれっぽいけど
「UIのパーツ」の定義を明確にしないと複数人開発では認識のズレが起こってしまいそう...
2️⃣ Variantsの使いどき
分かっていること
VariantsはComponentsやElementsの上書きをすることができる
→ 似た見た目を持つものはVariantsを使えば無駄なクラスの量産を防ぐことができそう
分かっていないこと
Variantsを使うのか新しいクラス名で定義するのかのすみ分け
例えば
.search-form > .searchbutton {
background: #fff;
border: 1px solid #ff0000;
border-radius: 4px;
color: #00ff00;
}
の場合に
.search-form > .searchbutton.-red {
background: #ff0000;
}
.search-form > .searchbutton.-disabled {
background: #aaa;
border: none;
pointer-events: none;
cursor: default;
}
は何となく納得するが
.search-form > .searchbutton.-name-search {
width: 300px;
border: none;
background: #ff0000;
transition: color 0.3s ease;
}
みたいなのは個人的に腹落ちしない感が強い。
思考回路
元々 BEM は少し知識があるのでそのModifierとVariantsを同様の役割と認識しているから後者は納得できないのかも??
Variantsはこの認識の通りだと思ってはいるのでそこを言語化してみる
個人的な解釈
- 根本的な要素・見た目などが変わらない時に使用する
- 1つの要素(
widthなどのサイズやcolorなどの色合いなど)を変えたい場合や状態によって変化する(.-disabled.-active.-errorなど)の場合に使用する - 上記を超える変更は別のクラス名にする(Sassの場合は
@extendや@mixinを使用する)
3️⃣ VariantsをVariantsで上書き
分かっていること
VariantsはComponentsやElementsの上書きをすることができる
分かっていないこと
VariantsはVariantsの上書きをすることはできるのか
例えばこんな感じ。
.search-form > .searchbutton {
background: #fff;
border: 1px solid #ff0000;
border-radius: 4px;
color: #00ff00;
}
.search-form > .searchbutton.-disabled {
background: #aaa;
border: none;
pointer-events: none;
cursor: default;
}
.search-form > .searchbutton.-red {
background: #ff0000;
}
.search-form > .searchbutton.-disabled.-red {
border: 1px solid #ff0000;
}
思考回路
RSCSSの目的として流用や管理がしやすいCSSを心がけている
Variantsは元々上書きのための要素として定義されている
→ 上書き要素を上書きしてしまうのはネスト合戦や !important 戦争の火種になってしまうのではないか??
個人的な解釈
ダメじゃないけど推奨されていない ぐらいの解釈。
この書き方しかできないのであれば致し方ないかなと思いつつも、Compontnts(Elements)側かVariants側を別名にするっていうのがベターそう。
Discussion