# 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::beforecontent: "*"; が適用されるのを期待しているが,実際コンパイルしてみると,そうはならない.
.my-list-item {
  &.-starred {
    &::before {
      content: "*";
    }
  }
}
  • このように一つネストする必要がある.
  • ただ,同じバリアントに対するスタイルを強制的に1箇所にまとめさせられると考えれば,まあ受け入れられる.
.my-list-item {
  > .title {
    color: black;
  }

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

    > .title {
      color: yellow;
    }
  }
}

# stylusの仕様の話 *3


# footnote

*1 未調査

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

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

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

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

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

Last Updated: 5/13/2020, 12:57:47 PM