# Random class names

**URL:** <https://discourse.joplinapp.org/t/random-class-names/11579>\
**Category:** Development\
**Created:** [11 October 2020 23:47 UTC](https://discourse.joplinapp.org/t/random-class-names/11579 "2020-10-11T23:47:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [11 October 2020 23:47 UTC](https://discourse.joplinapp.org/t/random-class-names/11579/1 "2020-10-11T23:47:58Z")

</div>

Why are there now random class names in CSS?

Do they change from version to version? Are they the same for every person (or are they different for you and me)?

e.g. I want to remove the markdown/editor buttons ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/b6b02e93c70033c726ae7863b76beb77ccb7ac92.png), so how do I do that?

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [11 October 2020 23:54 UTC](https://discourse.joplinapp.org/t/random-class-names/11579/2 "2020-10-11T23:54:31Z")

</div>

I use

```css
 button.tox-tbtn {
	/* removes the WYSIWYG button */
	 display: none !important;
}

```

and it seems those random looking classes can change with each build.

> [@Pre-release 1.2 is available for testing](https://discourse.joplinapp.org/t/pre-release-1-2-is-available-for-testing/11207/27):
>
> Indeed, I see it now. That must be due to the sidebar rendering optimisation, I'll look into it. Yes don't rely on these random names as they are generated by the styling library. For now, you can use the non-random classes or selectors like div p span {} etc to get to the element you need to target.

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [12 October 2020 00:11 UTC](https://discourse.joplinapp.org/t/random-class-names/11579/3 "2020-10-12T00:11:49Z")

</div>

Thanks for the answer. Which means it doesn't make mucxh sense to add `button.tox-tbtn` to my css.

Hmm, interesting. Maybe there's a way to tell this sidebar rendering optimization engine not to use random css names.  
The problem with selectors is that they might not be unique and thus they would screw up the UI. See [this comment](https://discourse.joplinapp.org/t/list-of-css-elements-which-should-have-a-class/6921/3).

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [12 October 2020 00:18 UTC](https://discourse.joplinapp.org/t/random-class-names/11579/4 "2020-10-12T00:18:08Z")

</div>

The lib we use is styled-components and I’m not sure there’s an option for more stable names.

We can always add class names ourselves though. I think we should create a list of elements that could use a class name, then once we have the list it’s quite easy to add them to the app.

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [12 October 2020 00:36 UTC](https://discourse.joplinapp.org/t/random-class-names/11579/5 "2020-10-12T00:36:59Z")

</div>

That one has worked for me for all versions since the interface changed. However I can see what you mean in that this may actually be a random-type class so I have just devised one using "standard" elements which seems to do the job.

```css
 div.editor-toolbar div button {
	/* removes the WYSIWYG button */
	 display: none !important;
}

```

**Edit:** Also changed it on the [wiki page](https://discourse.joplinapp.org/t/joplin-customization/11195)

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [12 October 2020 01:43 UTC](https://discourse.joplinapp.org/t/random-class-names/11579/6 "2020-10-12T01:43:11Z")

</div>

> [@laurent](#):
>
> I think we should create a list of elements that could use a class name, then once we have the list it’s quite easy to add them to the app.

Yes, I have started this list a while ago....

# [List of CSS elements which should have a class](https://discourse.joplinapp.org/t/list-of-css-elements-which-should-have-a-class/6921)

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [13 October 2020 01:22 UTC](https://discourse.joplinapp.org/t/random-class-names/11579/7 "2020-10-13T01:22:53Z")

</div>

> [@dpoulton](#):
>
> I have just devised one using "standard" elements

Thank you. I'm always afraid that I click this button by accident, which in turn would most likely fuck up my notes, since I use plugins and formatting not supported by the WYSIWYG editor.  
I do have daily backups, but you never know....