diff --git a/routes/artworks.cpp b/routes/artworks.cpp
index 78c6c97..11a2781 100644
--- a/routes/artworks.cpp
+++ b/routes/artworks.cpp
@@ -58,8 +58,8 @@ static inline Element generate_user_link(const httplib::Request& req, const Conf
     std::string profile_picture = proxy_image_url(config, illust.user_profile_pictures.thumbnail_or_original().url);
     std::string user_link = get_origin(req, config) + "/users/" + std::to_string(illust.user_id);
 
-    return Element("a", {{"class", "usermetadata"}, {"href", std::move(user_link)}}, {
-        Element("img", {{"class", "profilepicture small"}, {"loading", "lazy"}, {"src", std::move(profile_picture)}}, {}),
+    return Element("a", {{"class", "user_metadata"}, {"href", std::move(user_link)}}, {
+        Element("img", {{"class", "user_profile_picture small"}, {"loading", "lazy"}, {"src", std::move(profile_picture)}}, {}),
         Element("b", {illust.user_display_name})
     });
 }
@@ -67,7 +67,7 @@ static inline Element generate_user_link(const httplib::Request& req, const Conf
 static inline Element generate_images(const httplib::Request& req, const Config& config, const Illust& illust) {
     using namespace std::string_literals;
 
-    Element div("div", {{"class", "illustimages"}}, {});
+    Element div("div", {{"class", "illust-images"}}, {});
     bool show_pages = illust.images.size() > 1;
 
     if (show_pages) {
@@ -176,7 +176,7 @@ static inline Element generate_description(const httplib::Request& req, const Co
 }
 
 static inline Element generate_illust_tags(const httplib::Request& req, const Config& config, const Illust& illust) {
-    Element div("div", {{"class", "illusttags"}}, {});
+    Element div("div", {{"class", "illust-tags"}}, {});
 
     if (illust.ai_generated) {
         div.nodes.push_back(Element("b", {"AI-Generated "}));
diff --git a/routes/css.cpp b/routes/css.cpp
index 01bd272..6695bd2 100644
--- a/routes/css.cpp
+++ b/routes/css.cpp
@@ -58,13 +58,13 @@
     }
 
     /* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
-    .grid p {
+    .illusts_grid p {
         width: 15em;
     }
-    .illustsgriditem {
+    .illusts_grid-illust {
         position: relative;
     }
-    .illustbadge {
+    .illusts_grid-illust_badge {
         position: absolute;
         top: .25em;
         right: .25em;
@@ -73,48 +73,50 @@
         background-color: var(--illust-badge-background-color);
         text-decoration: none !important;
     }
-    .illustbadge.ai {
+    .illusts_grid-illust_badge.ai {
         background-color: var(--illust-badge-ai-background-color);
     }
 
-    /* ILLUSTRATIONS PAGE */
-    .profilepicture.small {
+    /* USER PAGE AND ILLUSTRATIONS PAGE */
+    .user_profile_picture {
+        margin-right: .5em;
+        width: 5em;
+        height: 5em;
+    }
+    .user_metadata {
+        display: flex;
+        align-items: center;
+        margin-left: .5em;
+    }
+    .user_profile_picture.small {
         width: 2.5em;
         height: 2.5em;
     }
-    .illustimages {
+
+    /* ILLUSTRATIONS PAGE */
+    .illust-images {
         display: grid;
         text-align: center;
     }
-    .illustimages .landmark {
+    .illust-images .landmark {
         padding-top: 1em;
         padding-bottom: 1em;
     }
-    .illusttags {
+    .illust-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 0 1em;
     }
 
     /* USER PAGE */
-    .profilecover {
+    .user-cover {
         width: 100%;
         height: 50vh;
         margin-bottom: 1em;
     }
-    .profilepicture {
-        margin-right: .5em;
-        width: 5em;
-        height: 5em;
-    }
-    .usermetadata {
-        display: flex;
-        align-items: center;
-        margin-left: .5em;
-    }
 
     /* SEARCH RESULTS PAGE */
-    .searchsuggestions {
+    .search_results-suggestions {
         text-align: left;
         display: inline-block;
         margin-top: .5em;
diff --git a/routes/tags.cpp b/routes/tags.cpp
index 44fcf24..e2f9fac 100644
--- a/routes/tags.cpp
+++ b/routes/tags.cpp
@@ -121,7 +121,7 @@ static inline Element generate_search_suggestions(const httplib::Request& req, c
 
     Element details("details", {
         Element("summary", {"Search suggestions"}),
-        Element("ul", {{"class", "searchsuggestions"}}, ul_nodes)
+        Element("ul", {{"class", "search_results-suggestions"}}, ul_nodes)
     });
     if (open_by_default) {
         details.attributes.push_back({"open", ""});
diff --git a/routes/users/common.cpp b/routes/users/common.cpp
index baf4c52..6b67213 100644
--- a/routes/users/common.cpp
+++ b/routes/users/common.cpp
@@ -11,15 +11,15 @@ Element generate_user_header(const User& user, const Config& config) {
         std::string cover_original = proxy_image_url(config, user.cover_images->original_or_thumbnail().url);
         std::string cover_thumbnail = proxy_image_url(config, user.cover_images->thumbnail_or_original().url);
         header.nodes.push_back(Element("a", {{"href", std::move(cover_original)}}, {
-            Element("img", {{"class", "profilecover"}, {"loading", "lazy"}, {"src", std::move(cover_thumbnail)}}, {})
+            Element("img", {{"class", "user-cover"}, {"loading", "lazy"}, {"src", std::move(cover_thumbnail)}}, {})
         }));
     }
 
     std::string profile_picture_original = proxy_image_url(config, user.profile_pictures.original_or_thumbnail().url);
     std::string profile_picture_thumbnail = proxy_image_url(config, user.profile_pictures.thumbnail_or_original().url);
-    header.nodes.push_back(Element("div", {{"class", "usermetadata"}}, {
+    header.nodes.push_back(Element("div", {{"class", "user_metadata"}}, {
         Element("a", {{"href", std::move(profile_picture_original)}}, {
-            Element("img", {{"class", "profilepicture"}, {"loading", "lazy"}, {"src", std::move(profile_picture_thumbnail)}}, {})
+            Element("img", {{"class", "user_profile_picture"}, {"loading", "lazy"}, {"src", std::move(profile_picture_thumbnail)}}, {})
         }),
         Element("div", {
             Element("p", {Element("b", {user.display_name}), " (@", user.username, ")"}),
diff --git a/servehelper.cpp b/servehelper.cpp
index f305ced..e199c7d 100644
--- a/servehelper.cpp
+++ b/servehelper.cpp
@@ -157,7 +157,7 @@ static Element generate_pager(const Illusts& illusts, size_t page, const char* i
 }
 
 static inline Element generate_illusts_grid(const httplib::Request& req, const Config& config, const Illusts& illusts) {
-    Element div("div", {{"class", "grid"}}, {});
+    Element div("div", {{"class", "grid illusts_grid"}}, {});
 
     div.nodes.reserve(illusts.illusts.size());
     for (const Illust& i : illusts.illusts) {
@@ -171,7 +171,7 @@ static inline Element generate_illusts_grid_item(const httplib::Request& req, co
     std::string illust_url = get_origin(req, config) + "/artworks/" + std::to_string(illust.illust_id);
     std::string image_url = proxy_image_url(config, illust.images[0].thumbnail_or_original(1).url);
 
-    Element div("div", {{"class", "illustsgriditem"}}, {
+    Element div("div", {{"class", "illusts_grid-illust"}}, {
         Element("a", {{"href", illust_url}}, {
             Element("img", {{"loading", "lazy"}, {"src", std::move(image_url)}}, {}),
             Element("p", {illust.title})
@@ -186,7 +186,7 @@ static inline Element generate_illusts_grid_item(const httplib::Request& req, co
 }
 
 static inline Element generate_illust_badge(const Illust& illust, const std::string& illust_url) {
-    const char* css_class = !illust.ai_generated ? "illustbadge" : "illustbadge ai";
+    const char* css_class = !illust.ai_generated ? "illusts_grid-illust_badge" : "illusts_grid-illust_badge ai";
 
     if (illust.page_count > 1) {
         return Element("a", {{"class", css_class}, {"href", illust_url + "?preview=1"}}, {