変数を使ったDiscourseのスタイリング：よりシンプルなセマンティクスのための事例

[RGJ (Richard - Communiteq)]

@manuel

これはCSSの自然な動作に近いと感じます

CSSが自然に機能する方法は、変数をスキップして次のようにすることだと思います。

/* デザインの基礎を設定 */
body {
  border-width: 2px;
  background-color: #3498db;
  margin: 1rem;
}

/* 必要に応じてコンポーネントレベルでオーバーライドする */
.d-topic-list,
.d-sidebar {
  border-width: 1px;
}

もしかしたら私は古いだけかもしれません。

本当の問題はこれです

@manuel

Discourse全体で一意で一貫した名前のコンポーネントクラスを数えることができればどうなるでしょうか

例：単に.btnまたはbuttonをターゲットにする場合：

.btn {
    border: 1px solid red;
}

投稿ボタンは見逃しますが、「表示」リンクとハンバーガーメニューはターゲットにします。