# Styling Discourse with variables: A case for simpler semantics

**URL:** https://meta.discourse.org/t/styling-discourse-with-variables-a-case-for-simpler-semantics/378001
**Category:** Development
**Created:** [August 9, 2025, 6:31pm UTC](https://meta.discourse.org/t/styling-discourse-with-variables-a-case-for-simpler-semantics/378001 "2025-08-09T18:31:28Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [August 10, 2025, 7:04am UTC](https://meta.discourse.org/t/styling-discourse-with-variables-a-case-for-simpler-semantics/378001/2 "2025-08-10T07:04:14Z")

</div>

> [@manuel](#):
>
> To me this feels more like how CSS naturally works

Well, I think how CSS would naturally work is just skip the variables and do

```plaintext
/* Set the design foundation */
body {
  border-width: 2px;
  background-color: #3498db;
  margin: 1rem;
}

/* Override at the component level when you need to */
.d-topic-list,
.d-sidebar {
  border-width: 1px;
}

```

Maybe I’m just old.

The _real_ problem is this

> [@manuel](#):
>
> what if we could just count on unique and consitstently named component classes throughout Discourse

Example: simply targeting `.btn` or `button`:

```plaintext
.btn {
    border: 1px solid red;
}

```

misses the post buttons but does target the “views” link and hamburger menu.

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/0/9/10962d80711da920fa2c15303191ca05b034f67b.png)

---

_[View the full topic](https://meta.discourse.org/t/styling-discourse-with-variables-a-case-for-simpler-semantics/378001)._