Stylus+RSCSSでやってきて思ったこと

セレクタの話

• スタイルをつける要素には、すべてclassセレクタのみを用いて記述したほうがパフォーマンス的には優れているのかもしれない*1が、コードが冗長になる場合がある。
  • ul.my-list li.item のようにタグ名も指定することでマークアップを限定できる。CSSだけを見ても ul に対するスタイル付けであることが明示できる。
  • エレメントが <article class="article"> になるくらいならクラス名は要らないと思う．

ネスト回避と固有子コンポーネントの話

• あるコンポーネントの子要素（エレメント）が、さらに子孫要素を持つ場合、CSSのネストが深くなる。 *2

<div class="my-list">
  <div class="item">
    <div class="title">

.my-list {
  > .item {
    > .title {

• これを避けるためにコンポーネントを分割する。

.my-list { }
.my-list-item {
  > .title {

<div class="my-list">
  <div class="my-list-item">
    <div class="title">

• この例だとあまりよろしくないが、このようにCSSの見やすさのために分割したコンポーネントと、実際ブラウザで見た目に現れる コンポーネント感 に乖離が生じることがある。
• これを，後者の コンポーネント感 に近づけるために以下のような記述方法を考えた

<div class="my-list">
  <div class="item">
    <div class="title">

@require "my-list-item";

.my-list {
  > .item {
    @extend .my-list-item;

.my-list-item {
  > .title {

• これでHTMLに現れるコンポーネントのクラス付けと，見た目に現れる コンポーネント感 を揃えることができるし，CSSのネスト記述もなくなる．

疑似クラスでバリアントをextendする話

.my-list {
  > .item {
    @extend .my-list-item;
  }
  > .item:first-child {
    @extend .my-list-item.-emphasis;
  }
}

<div class="my-list">
  <div class=item"></div>
  <div class=item"></div>
    :
    :

• CSSの疑似クラスを使って，HTMLには現れないスタイルの変化を付けられる．
• これが良いか悪いかは分からない・・・

stylusの仕様の話 ( @extend )

.my-list-item {
  &.-starred::before {
    content: "*";
  }
}
.my-list {
  > .item {
    @extend .my-list-item;
    @extend .my-list-item.-starred;
  }
}

• このコードは， .my-list > .item::before に content: "*"; が適用されるのを期待しているが，実際コンパイルしてみると，そうはならない．

.my-list-item {
  &.-starred {
    &::before {
      content: "*";
    }
  }
}

• このように一つネストする必要がある．
• ただ，同じバリアントに対するスタイルを強制的に1箇所にまとめさせられると考えれば，まあ受け入れられる．

.my-list-item {
  > .title {
    color: black;
  }

  &.-starred {
    &::before {
      content: "*";
    }

    > .title {
      color: yellow;
    }
  }
}

stylusの仕様の話 *3

• https://github.com/stylus/stylus/issues/669
• 気をつけねば．

---

footnote

*1 未調査

*2 以下のように書くとネストは深くならないがDOMの構造とCSSの構造が乖離する（これを許すかどうかは好みによるが）（というか僕もこう書くときはある）

.my-list {
  > .item { ... }
  > .item > .title { ... }

*3 https://qiita.com/BYODKM/items/b8f545453f656270212a

@extend と @media は衝突する概念なので、レスポンシブ・デザイン等では併用が困難。

とあるので、考え直す必要があるかもしれない。