# Inconsistency in code for watching first post

**URL:** https://meta.discourse.org/t/inconsistency-in-code-for-watching-first-post/60223
**Category:** Development
**Created:** [2017年三月31日 08:38 UTC](https://meta.discourse.org/t/inconsistency-in-code-for-watching-first-post/60223 "2017-03-31T08:38:25Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [2017年三月31日 08:38 UTC](https://meta.discourse.org/t/inconsistency-in-code-for-watching-first-post/60223/1 "2017-03-31T08:38:25Z")

</div>

After submitting [this PR](https://github.com/discourse/discourse/pull/4786) I discovered an inconsistency with watching first post that I am not sure how to resolve.

* * *

Watching first post exists in two primary locations: the notification level dropdown on category pages, and the user preferences page.

The User Preferences page appears to be a [handlebars template](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/preferences.hbs) which uses the `watching-first-post` for the class, following what appears to be the Discourse convention of using hyphens for CSS classes.

The notification level dropdown appears to come from [JavaScript](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/notification-levels.js.es6) which uses `watching_first_post` for the class, following what appears to be the Discourse convention of using underscores for translation files.

* * *

Which is correct? At the moment, to target the watching first post icon in all locations, two selectors are needed, which seems less than ideal. Can this be resolved so the icons share the same CSS class, without breaking CSS or translation conventions?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年三月31日 09:42 UTC](https://meta.discourse.org/t/inconsistency-in-code-for-watching-first-post/60223/2 "2017-03-31T09:42:04Z")

</div>

Perhaps @eviltrout can comment, this was his feature as I recall?

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2017年三月31日 14:53 UTC](https://meta.discourse.org/t/inconsistency-in-code-for-watching-first-post/60223/3 "2017-03-31T14:53:19Z")

</div>

Hyphens are definitely the way to go for CSS classes. Are you comfortable making a PR for this? If not I can fix it.

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [2017年三月31日 16:06 UTC](https://meta.discourse.org/t/inconsistency-in-code-for-watching-first-post/60223/4 "2017-03-31T16:06:22Z")

</div>

I looked into making a PR but that’s when I ran into the inconsistency…

If I change line 12 in the [JavaScript](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/notification-levels.js.es6#L12) so that the `key` uses hyphens not underscores under - that will change the CSS class but also break translations. Are you OK with me changing the `client-en.yml` file so it also uses hyphens not underscores?

If yes, I can absolutely submit a PR. If not, then I don’t know how to submit the PR without modifying the translation keys.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2017年三月31日 17:19 UTC](https://meta.discourse.org/t/inconsistency-in-code-for-watching-first-post/60223/5 "2017-03-31T17:19:39Z")

</div>

No, I definitely would not want to rename our translation keys for this. I’m okay with dashes everywhere in our codebase for this feature except for the CSS. I’ve changed it here:

[https://github.com/discourse/discourse/commit/f42b6054e6588a37a91b48087d91075351ed2b77](https://github.com/discourse/discourse/commit/f42b6054e6588a37a91b48087d91075351ed2b77)

The class name should use dashes now instead of underscores.

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [2017年三月31日 17:21 UTC](https://meta.discourse.org/t/inconsistency-in-code-for-watching-first-post/60223/6 "2017-03-31T17:21:13Z")

</div>

Thanks Robin - I wouldn’t have had a clue where to start to fix this one. Have a 💝!

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2017年三月31日 17:23 UTC](https://meta.discourse.org/t/inconsistency-in-code-for-watching-first-post/60223/7 "2017-03-31T17:23:40Z")

</div>


