Provide class names for major elements for custom CSS

[leonbeon]

Currently, class names get auto generated, leaving us to think of some creative ways to access selectors for custom css implementation and confusion (see #434, #433). I propose we add a simple class name to every major element. For example, currently the app grid for applications looks like this:

<div class="AppGrid_AppGrid__33iLW">
</div>

The __33iLW suffix will be changed with every build, making the class name unreliable for targeting the element between updates. We could change it to something like

<div class="applications-app-grid AppGrid_AppGrid__33iLW">
</div>

with a static class name. I think every element with an auto generated name (e.g. .Layout_Container__2Hv3J, .Header_Header__2oavH, .BookmarkGrid_BookmarkGrid__26LlR, .Home_SettingsButton__Qvn8C)would benefit from the static class names, as well as

• the search bar div
• <a href="/applications">
• <a href="/bookmarks">

For reference how complicated this can get without, this is my current setup to add a "Search:" prefix in front of the search bar:

Open me

:root {
  --name-search: "Search";
}

#root > div:first-child > div:first-child {
    display: flex;
}
#root > div:first-child > div:first-child::before {
    content: var(--name-search) ':';
    margin-bottom: 20px;
    margin-right:0.33rem;
    padding: 10px 0;
    color: var(--color-accent);
}

[badbox29]

Hey guys, sorry for the noob question but I legit do not know and have been looking for myself for a while now... Where can we find what the new names are for 2.3.1? I'd like to update my css so it at least works in the meantime. Thx in advance!

[Everyday-s]

Hey guys, sorry for the noob question but I legit do not know and have been looking for myself for a while now... Where can we find what the new names are for 2.3.1? I'd like to update my css so it at least works in the meantime. Thx in advance!

Using Chrome, right click on the page -> Inspect. Look around and you should find the names.

[EnMod]

A handy CSS feature I've found useful situations like these where I can't rely on consistent class names or styles is the CSS attribute selector.

class can be used with attribute selectors just like any other attribute, so you can target just the first "word" or two in the class name that gets you what you want, dropping the random hash at the end. This can be done with the substring modifier, noted by * in the selector.

For example, in your CSS:

.Layout_Container__2Hv3J

would instead be:

[class*="Layout_Container"]

You can select elements with specific href values in a similar way. By selecting without * you can select elements with exactly the value in the selector, if you wanted to target just /applications and not, say, /applications-old (if that existed):

a[href="/applications"]

---

MDN has a great guide to CSS attribute selectors here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

That said, it would be ideal to have major, consistent CSS classes available for styling without needing to work around the lack of them haha.