css - CSS モジュールのネストされたセレクター

Question

アプリとコンポーネントの名前の間隔については、次の規則があります。

<div id="app-name">

  <ul class="list">
    <li>item</li>
  </ul>

</div>

---

#app-name {

  .list {
    margin: 0;
  }

}

CSS モジュールを使用したいのですが、これをどのように変換して、アプリとコンポーネントの名前のスペーシングの特定性を維持するのかがわかりません。#app-nameID全体を単純に省略できることは理解していますが、この種の特異性が必要です。

考え？

Answer 1

これを試して

#app-name .list {
    margin: 0;
  }

以下のスニペットの例

 #app-name .list {
    margin: 0;
  }

<div id="app-name">

  <ul class="list">
    <li>item</li>
  </ul>

</div>