diff --git a/src/shared/components/app/error-page.tsx b/src/shared/components/app/error-page.tsx
index e19323f94d..8365ed1f2a 100644
--- a/src/shared/components/app/error-page.tsx
+++ b/src/shared/components/app/error-page.tsx
@@ -16,7 +16,7 @@ export class ErrorPage extends Component<any, any> {
     const { errorPageData } = this.isoData;
 
     return (
-      <div className="container-lg text-center">
+      <div className="app-err__root container-lg text-center">
         <h1>
           {errorPageData
             ? i18n.t("error_page_title")
diff --git a/src/shared/components/comment/comment-form.tsx b/src/shared/components/comment/comment-form.tsx
index 7e4aa9febf..d027093af7 100644
--- a/src/shared/components/comment/comment-form.tsx
+++ b/src/shared/components/comment/comment-form.tsx
@@ -41,7 +41,11 @@ export class CommentForm extends Component<CommentFormProps, any> {
         : undefined;
 
     return (
-      <div className={["mb-3", this.props.containerClass].join(" ")}>
+      <div
+        className={["comment-form__root", "mb-3", this.props.containerClass].join(
+          " "
+        )}
+      >
         {UserService.Instance.myUserInfo ? (
           <MarkdownTextArea
             initialContent={initialContent}
diff --git a/src/shared/components/comment/comment-report.tsx b/src/shared/components/comment/comment-report.tsx
index ff00bc593e..224f4fb5f9 100644
--- a/src/shared/components/comment/comment-report.tsx
+++ b/src/shared/components/comment/comment-report.tsx
@@ -70,7 +70,7 @@ export class CommentReport extends Component<
     };
 
     return (
-      <div>
+      <div className="comment-report__root">
         <CommentNode
           node={node}
           viewType={CommentViewType.Flat}
@@ -101,14 +101,14 @@ export class CommentReport extends Component<
           onCreateComment={() => Promise.resolve({ state: "empty" })}
           onEditComment={() => Promise.resolve({ state: "empty" })}
         />
-        <div>
+        <div className="comment-report__person">
           {i18n.t("reporter")}: <PersonListing person={r.creator} />
         </div>
-        <div>
+        <div className="comment-report__reason">
           {i18n.t("reason")}: {r.comment_report.reason}
         </div>
         {r.resolver && (
-          <div>
+          <div className="comment-report__resolverwrap">
             {r.comment_report.resolved ? (
               <T i18nKey="resolved_by">
                 #
diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx
index 49c0888b05..9ff8313e7b 100644
--- a/src/shared/components/common/badges.tsx
+++ b/src/shared/components/common/badges.tsx
@@ -26,7 +26,7 @@ const isSiteAggregates = (
 
 export const Badges = ({ counts, communityId }: BadgesProps) => {
   return (
-    <ul className="my-1 list-inline">
+    <ul className="badges__root my-1 list-inline">
       <li
         className="list-inline-item badge badge-secondary pointer"
         data-tippy-content={i18n.t("active_users_in_the_last_day", {
diff --git a/src/shared/components/common/banner-icon-header.tsx b/src/shared/components/common/banner-icon-header.tsx
index 1df23befe9..084fa65e7f 100644
--- a/src/shared/components/common/banner-icon-header.tsx
+++ b/src/shared/components/common/banner-icon-header.tsx
@@ -15,7 +15,7 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
     const banner = this.props.banner;
     const icon = this.props.icon;
     return (
-      <div className="position-relative mb-2">
+      <div className="banner-icon-header__root position-relative mb-2">
         {banner && <PictrsImage src={banner} banner alt="" />}
         {icon && (
           <PictrsImage
diff --git a/src/shared/components/common/comment-sort-select.tsx b/src/shared/components/common/comment-sort-select.tsx
index 486d99f5c0..db9c4a2f35 100644
--- a/src/shared/components/common/comment-sort-select.tsx
+++ b/src/shared/components/common/comment-sort-select.tsx
@@ -40,7 +40,7 @@ export class CommentSortSelect extends Component<
           name={this.id}
           value={this.state.sort}
           onChange={linkEvent(this, this.handleSortChange)}
-          className="custom-select w-auto mr-2 mb-2"
+          className="comment-sort-select__root custom-select w-auto mr-2 mb-2"
           aria-label={i18n.t("sort_type")}
         >
           <option disabled aria-hidden="true">
diff --git a/src/shared/components/common/data-type-select.tsx b/src/shared/components/common/data-type-select.tsx
index 59c07d759c..c75f5a705f 100644
--- a/src/shared/components/common/data-type-select.tsx
+++ b/src/shared/components/common/data-type-select.tsx
@@ -31,7 +31,7 @@ export class DataTypeSelect extends Component<
 
   render() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="data-type-select__root btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`pointer btn btn-outline-secondary 
             ${this.state.type_ == DataType.Post && "active"}
diff --git a/src/shared/components/common/emoji-picker.tsx b/src/shared/components/common/emoji-picker.tsx
index aea986ad92..b581d248b4 100644
--- a/src/shared/components/common/emoji-picker.tsx
+++ b/src/shared/components/common/emoji-picker.tsx
@@ -27,7 +27,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     return (
       <span>
         <button
-          className="btn btn-sm text-muted"
+          className="emoji-picker__root btn btn-sm text-muted"
           data-tippy-content={i18n.t("emoji")}
           aria-label={i18n.t("emoji")}
           disabled={this.props.disabled}
diff --git a/src/shared/components/common/image-upload-form.tsx b/src/shared/components/common/image-upload-form.tsx
index 61fdd6101b..2d64a823de 100644
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@@ -32,7 +32,7 @@ export class ImageUploadForm extends Component<
 
   render() {
     return (
-      <form className="d-inline">
+      <form className="img-upload-form__root d-inline">
         <label
           htmlFor={this.id}
           className="pointer text-muted small font-weight-bold"
diff --git a/src/shared/components/common/language-select.tsx b/src/shared/components/common/language-select.tsx
index 09e9c968db..7c9dcb83f6 100644
--- a/src/shared/components/common/language-select.tsx
+++ b/src/shared/components/common/language-select.tsx
@@ -51,13 +51,14 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
     ) : (
       <div>
         {this.props.multiple && this.props.showLanguageWarning && (
-          <div className="alert alert-warning" role="alert">
+          <div className="lang-select__root alert alert-warning" role="alert">
             {i18n.t("undetermined_language_warning")}
           </div>
         )}
         <div className="form-group row">
           <label
             className={classNames(
+              "lang-select__plural",
               "col-form-label",
               `col-sm-${this.props.multiple ? 3 : 2}`
             )}
@@ -67,6 +68,7 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
           </label>
           <div
             className={classNames(
+              "lang-select__deselect",
               "input-group",
               `col-sm-${this.props.multiple ? 9 : 10}`
             )}
diff --git a/src/shared/components/common/listing-type-select.tsx b/src/shared/components/common/listing-type-select.tsx
index 3e534d341c..ab1c0f621b 100644
--- a/src/shared/components/common/listing-type-select.tsx
+++ b/src/shared/components/common/listing-type-select.tsx
@@ -39,11 +39,11 @@ export class ListingTypeSelect extends Component<
 
   render() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="listing-type-select__root btn-group btn-group-toggle flex-wrap mb-2">
         {this.props.showSubscribed && (
           <label
             title={i18n.t("subscribed_description")}
-            className={`btn btn-outline-secondary 
+            className={`listing-type-select__label-subscribed btn btn-outline-secondary
             ${this.state.type_ == "Subscribed" && "active"}
             ${!UserService.Instance.myUserInfo ? "disabled" : "pointer"}
           `}
@@ -62,7 +62,7 @@ export class ListingTypeSelect extends Component<
         {this.props.showLocal && (
           <label
             title={i18n.t("local_description")}
-            className={`pointer btn btn-outline-secondary ${
+            className={`listing-type-select__label-local pointer btn btn-outline-secondary ${
               this.state.type_ == "Local" && "active"
             }`}
           >
@@ -78,7 +78,7 @@ export class ListingTypeSelect extends Component<
         )}
         <label
           title={i18n.t("all_description")}
-          className={`pointer btn btn-outline-secondary ${
+          className={`listing-type-select__label-show-all pointer btn btn-outline-secondary ${
             (this.state.type_ == "All" && "active") ||
             (!this.props.showLocal && this.state.type_ == "Local" && "active")
           }`}
diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 01fa615560..cd539167e3 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -136,7 +136,11 @@ export class MarkdownTextArea extends Component<
     //   message={i18n.t("block_leaving")}
     // />
     return (
-      <form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
+      <form
+        id={this.formId}
+        className="markdown-textarea__root"
+        onSubmit={linkEvent(this, this.handleSubmit)}
+      >
         <NavigationPrompt
           when={
             !this.props.hideNavigationWarnings &&
@@ -144,10 +148,10 @@ export class MarkdownTextArea extends Component<
             !this.state.submitted
           }
         />
-        <div className="form-group row">
-          <div className="col-12">
-            <div className="rounded bg-light border border-light">
-              <div className="d-flex flex-wrap border-bottom border-light">
+        <div className="markdown-textarea__outer form-group row">
+          <div className="markdown-textarea__col1 col-12">
+            <div className="markdown-textarea__inner rounded bg-light border border-light">
+              <div className="markdown-textarea__btns d-flex flex-wrap border-bottom border-light">
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}
                 {this.getFormatButton("link", this.handleInsertLink)}
@@ -210,7 +214,7 @@ export class MarkdownTextArea extends Component<
                 <textarea
                   id={this.id}
                   className={classNames(
-                    "form-control border-0 rounded-top-0 rounded-bottom",
+                    "markdown-textarea__main form-control border-0 rounded-top-0 rounded-bottom",
                     {
                       "d-none": this.state.previewMode,
                     }
@@ -254,7 +258,7 @@ export class MarkdownTextArea extends Component<
             </div>
           </div>
 
-          <div className="col-12 d-flex align-items-center flex-wrap mt-2">
+          <div className="markdown-textarea__lang-select-wrap col-12 d-flex align-items-center flex-wrap mt-2">
             {this.props.showLanguage && (
               <LanguageSelect
                 iconVersion
@@ -274,7 +278,7 @@ export class MarkdownTextArea extends Component<
             {this.props.buttonTitle && (
               <button
                 type="submit"
-                className="btn btn-sm btn-secondary ml-2"
+                className="markdown-textarea__btn-submit btn btn-sm btn-secondary ml-2"
                 disabled={this.isDisabled}
               >
                 {this.state.loading ? (
@@ -287,7 +291,7 @@ export class MarkdownTextArea extends Component<
             {this.props.replyType && (
               <button
                 type="button"
-                className="btn btn-sm btn-secondary ml-2"
+                className="markdown-textarea__btn-cancel btn btn-sm btn-secondary ml-2"
                 onClick={linkEvent(this, this.handleReplyCancel)}
               >
                 {i18n.t("cancel")}
@@ -295,7 +299,7 @@ export class MarkdownTextArea extends Component<
             )}
             {this.state.content && (
               <button
-                className={`btn btn-sm btn-secondary ml-2 ${
+                className={`markdown-textarea__btn-switchmode btn btn-sm btn-secondary ml-2 ${
                   this.state.previewMode && "active"
                 }`}
                 onClick={linkEvent(this, this.handlePreviewToggle)}
@@ -331,7 +335,7 @@ export class MarkdownTextArea extends Component<
 
     return (
       <button
-        className="btn btn-sm text-muted"
+        className="markdown-textarea__btn-format btn btn-sm text-muted"
         data-tippy-content={i18n.t(type)}
         aria-label={i18n.t(type)}
         onClick={linkEvent(this, handleClick)}
diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx
index 30c1682c9e..214c4afdd4 100644
--- a/src/shared/components/common/moment-time.tsx
+++ b/src/shared/components/common/moment-time.tsx
@@ -36,7 +36,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
       return (
         <span
           data-tippy-content={this.createdAndModifiedTimes()}
-          className="font-italics pointer unselectable"
+          className="moment-time__root font-italics pointer unselectable"
         >
           <Icon icon="edit-2" classes="icon-inline mr-1" />
           {moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
@@ -46,7 +46,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
       const published = this.props.published;
       return (
         <span
-          className="pointer unselectable"
+          className="moment-time__root pointer unselectable"
           data-tippy-content={this.format(published)}
         >
           {moment.utc(published).fromNow(!this.props.showAgo)}
diff --git a/src/shared/components/common/paginator.tsx b/src/shared/components/common/paginator.tsx
index 75acde3e10..e88e6eac6d 100644
--- a/src/shared/components/common/paginator.tsx
+++ b/src/shared/components/common/paginator.tsx
@@ -12,7 +12,7 @@ export class Paginator extends Component<PaginatorProps, any> {
   }
   render() {
     return (
-      <div className="my-2">
+      <div className="paginator__root my-2">
         <button
           className="btn btn-secondary mr-2"
           disabled={this.props.page == 1}
diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index f975e4ace7..f6139d7d90 100644
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@@ -22,7 +22,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
 
   render() {
     return (
-      <picture className="d-inline-block overflow-hidden">
+      <picture className="pictrs-image__root d-inline-block overflow-hidden">
         <source srcSet={this.src("webp")} type="image/webp" />
         <source srcSet={this.props.src} />
         <source srcSet={this.src("jpg")} type="image/jpeg" />
diff --git a/src/shared/components/common/registration-application.tsx b/src/shared/components/common/registration-application.tsx
index 503892c3d1..0084bd52dd 100644
--- a/src/shared/components/common/registration-application.tsx
+++ b/src/shared/components/common/registration-application.tsx
@@ -58,7 +58,7 @@ export class RegistrationApplication extends Component<
     const accepted = a.creator_local_user.accepted_application;
 
     return (
-      <div>
+      <div className="app-registration__root">
         <div>
           {i18n.t("applicant")}: <PersonListing person={a.creator} />
         </div>
@@ -96,7 +96,7 @@ export class RegistrationApplication extends Component<
         )}
 
         {this.state.denyExpanded && (
-          <div className="form-group row">
+          <div className="app-registration__approval-wrap form-group row">
             <label className="col-sm-2 col-form-label">
               {i18n.t("deny_reason")}
             </label>
@@ -113,7 +113,7 @@ export class RegistrationApplication extends Component<
         )}
         {(!ra.admin_id || (ra.admin_id && !accepted)) && (
           <button
-            className="btn btn-secondary mr-2 my-2"
+            className="app-registration__btn-approve btn btn-secondary mr-2 my-2"
             onClick={linkEvent(this, this.handleApprove)}
             aria-label={i18n.t("approve")}
           >
@@ -122,7 +122,7 @@ export class RegistrationApplication extends Component<
         )}
         {(!ra.admin_id || (ra.admin_id && accepted)) && (
           <button
-            className="btn btn-secondary mr-2"
+            className="app-registration__btn-deny btn btn-secondary mr-2"
             onClick={linkEvent(this, this.handleDeny)}
             aria-label={i18n.t("deny")}
           >
diff --git a/src/shared/components/common/searchable-select.tsx b/src/shared/components/common/searchable-select.tsx
index cd63036720..4292db0dde 100644
--- a/src/shared/components/common/searchable-select.tsx
+++ b/src/shared/components/common/searchable-select.tsx
@@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
     const { searchText, selectedIndex, loadingEllipses } = this.state;
 
     return (
-      <div className="dropdown">
+      <div className="searchable-select__root dropdown">
         <button
           id={id}
           type="button"
diff --git a/src/shared/components/common/sort-select.tsx b/src/shared/components/common/sort-select.tsx
index dac6e20d51..9830759a56 100644
--- a/src/shared/components/common/sort-select.tsx
+++ b/src/shared/components/common/sort-select.tsx
@@ -39,7 +39,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           name={this.id}
           value={this.state.sort}
           onChange={linkEvent(this, this.handleSortChange)}
-          className="custom-select w-auto mr-2 mb-2"
+          className="sort-select__root custom-select w-auto mr-2 mb-2"
           aria-label={i18n.t("sort_type")}
         >
           <option disabled aria-hidden="true">
diff --git a/src/shared/components/common/tabs.tsx b/src/shared/components/common/tabs.tsx
index 17980a476c..6d3ce5ad4e 100644
--- a/src/shared/components/common/tabs.tsx
+++ b/src/shared/components/common/tabs.tsx
@@ -30,7 +30,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
   render() {
     return (
       <div>
-        <ul className="nav nav-tabs mb-2">
+        <ul className="tabs__root nav nav-tabs mb-2">
           {this.props.tabs.map(({ key, label }) => (
             <li key={key} className="nav-item">
               <button
diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 3eb7bd3aa7..0d7094108e 100644
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -101,7 +101,7 @@ export class Communities extends Component<any, CommunitiesState> {
         const { listingType, page } = this.getCommunitiesQueryParams();
         return (
           <div>
-            <div className="row">
+            <div className="communities__top row">
               <div className="col-md-6">
                 <h4>{i18n.t("list_of_communities")}</h4>
                 <span className="mb-2">
@@ -118,22 +118,24 @@ export class Communities extends Component<any, CommunitiesState> {
               </div>
             </div>
 
-            <div className="table-responsive">
+            <div className="communities__table-wrap table-responsive">
               <table
                 id="community_table"
                 className="table table-sm table-hover"
               >
                 <thead className="pointer">
                   <tr>
-                    <th>{i18n.t("name")}</th>
-                    <th className="text-right">{i18n.t("subscribers")}</th>
-                    <th className="text-right">
+                    <th className="communities__th-name">{i18n.t("name")}</th>
+                    <th className="communities__th-subscribers text-right">
+                      {i18n.t("subscribers")}
+                    </th>
+                    <th className="communities__th-users text-right">
                       {i18n.t("users")} / {i18n.t("month")}
                     </th>
-                    <th className="text-right d-none d-lg-table-cell">
+                    <th className="communities__th-posts text-right d-none d-lg-table-cell">
                       {i18n.t("posts")}
                     </th>
-                    <th className="text-right d-none d-lg-table-cell">
+                    <th className="communities__th-comments text-right d-none d-lg-table-cell">
                       {i18n.t("comments")}
                     </th>
                     <th></th>
@@ -143,25 +145,25 @@ export class Communities extends Component<any, CommunitiesState> {
                   {this.state.listCommunitiesResponse.data.communities.map(
                     cv => (
                       <tr key={cv.community.id}>
-                        <td>
+                        <td className="communities__td-link">
                           <CommunityLink community={cv.community} />
                         </td>
-                        <td className="text-right">
+                        <td className="communities__td-subscribers text-right">
                           {numToSI(cv.counts.subscribers)}
                         </td>
-                        <td className="text-right">
+                        <td className="communities__td-users text-right">
                           {numToSI(cv.counts.users_active_month)}
                         </td>
-                        <td className="text-right d-none d-lg-table-cell">
+                        <td className="communities__td-posts text-right d-none d-lg-table-cell">
                           {numToSI(cv.counts.posts)}
                         </td>
-                        <td className="text-right d-none d-lg-table-cell">
+                        <td className="communities__td-comments text-right d-none d-lg-table-cell">
                           {numToSI(cv.counts.comments)}
                         </td>
-                        <td className="text-right">
+                        <td className="communities__td-subscribed text-right">
                           {cv.subscribed == "Subscribed" && (
                             <button
-                              className="btn btn-link d-inline-block"
+                              className="communities__btn-unsubscribe btn btn-link d-inline-block"
                               onClick={linkEvent(
                                 {
                                   i: this,
@@ -176,7 +178,7 @@ export class Communities extends Component<any, CommunitiesState> {
                           )}
                           {cv.subscribed === "NotSubscribed" && (
                             <button
-                              className="btn btn-link d-inline-block"
+                              className="communities__btn-subscribe btn btn-link d-inline-block"
                               onClick={linkEvent(
                                 {
                                   i: this,
@@ -190,7 +192,7 @@ export class Communities extends Component<any, CommunitiesState> {
                             </button>
                           )}
                           {cv.subscribed === "Pending" && (
-                            <div className="text-warning d-inline-block">
+                            <div className="communities__subscription-pending text-warning d-inline-block">
                               {i18n.t("subscribe_pending")}
                             </div>
                           )}
@@ -210,7 +212,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="communities__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
diff --git a/src/shared/components/community/community-form.tsx b/src/shared/components/community/community-form.tsx
index 4eed4645d4..24b88ad44d 100644
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@@ -85,7 +85,10 @@ export class CommunityForm extends Component<
 
   render() {
     return (
-      <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
+      <form
+        className="community-form__root"
+        onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
+      >
         <NavigationPrompt
           when={
             !this.props.loading &&
@@ -98,7 +101,7 @@ export class CommunityForm extends Component<
           }
         />
         {!this.props.community_view && (
-          <div className="form-group row">
+          <div className="community-form__row-name form-group row">
             <label
               className="col-12 col-sm-2 col-form-label"
               htmlFor="community-name"
@@ -126,7 +129,7 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="community-form__row-display_name form-group row">
           <label
             className="col-12 col-sm-2 col-form-label"
             htmlFor="community-title"
@@ -152,7 +155,7 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="community-form__row-icon form-group row">
           <label className="col-12 col-sm-2">{i18n.t("icon")}</label>
           <div className="col-12 col-sm-10">
             <ImageUploadForm
@@ -164,7 +167,7 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="community-form__row-banner form-group row">
           <label className="col-12 col-sm-2">{i18n.t("banner")}</label>
           <div className="col-12 col-sm-10">
             <ImageUploadForm
@@ -175,7 +178,7 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="community-form__row-description form-group row">
           <label className="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
             {i18n.t("sidebar")}
           </label>
@@ -192,7 +195,7 @@ export class CommunityForm extends Component<
         </div>
 
         {this.props.enableNsfw && (
-          <div className="form-group row">
+          <div className="community-form__row-nsfw form-group row">
             <legend className="col-form-label col-sm-2 pt-0">
               {i18n.t("nsfw")}
             </legend>
@@ -209,7 +212,7 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="community-form__row-restricted form-group row">
           <legend className="col-form-label col-6 pt-0">
             {i18n.t("only_mods_can_post_in_community")}
           </legend>
@@ -236,11 +239,11 @@ export class CommunityForm extends Component<
           multiple={true}
           onChange={this.handleDiscussionLanguageChange}
         />
-        <div className="form-group row">
+        <div className="community-form__row-submit form-group row">
           <div className="col-12">
             <button
               type="submit"
-              className="btn btn-secondary mr-2"
+              className="community-form__btn-submit btn btn-secondary mr-2"
               disabled={this.props.loading}
             >
               {this.props.loading ? (
@@ -254,7 +257,7 @@ export class CommunityForm extends Component<
             {this.props.community_view && (
               <button
                 type="button"
-                className="btn btn-secondary"
+                className="community-form__btn-cancel btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
                 {i18n.t("cancel")}
diff --git a/src/shared/components/community/community-link.tsx b/src/shared/components/community/community-link.tsx
index 23d52ae654..0cf7757a51 100644
--- a/src/shared/components/community/community-link.tsx
+++ b/src/shared/components/community/community-link.tsx
@@ -37,7 +37,10 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
     return !this.props.realLink ? (
       <Link
         title={apubName}
-        className={`${this.props.muted ? "text-muted" : ""}`}
+        className={[
+          "community-link__root",
+          `${this.props.muted ? "text-muted" : ""}`,
+        ].join(" ")}
         to={link}
       >
         {this.avatarAndName(displayName)}
@@ -45,7 +48,10 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
     ) : (
       <a
         title={apubName}
-        className={`${this.props.muted ? "text-muted" : ""}`}
+        className={[
+          "community-link__root",
+          `${this.props.muted ? "text-muted" : ""}`,
+        ].join(" ")}
         href={link}
         rel={relTags}
       >
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 6f3c9112f7..b4bc71b407 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -323,10 +323,10 @@ export class Community extends Component<
               image={res.community_view.community.icon}
             />
 
-            <div className="row">
+            <div className="community__row row">
               <div className="col-12 col-md-8">
                 {this.communityInfo(res)}
-                <div className="d-block d-md-none">
+                <div className="community__show-sidebar d-block d-md-none">
                   <button
                     className="btn btn-secondary d-inline-block mb-2 mr-3"
                     onClick={linkEvent(this, this.handleShowSidebarMobile)}
@@ -358,7 +358,9 @@ export class Community extends Component<
   }
 
   render() {
-    return <div className="container-lg">{this.renderCommunity()}</div>;
+    return (
+      <div className="community__root container-lg">{this.renderCommunity()}</div>
+    );
   }
 
   sidebar(res: GetCommunityResponse) {
@@ -485,9 +487,11 @@ export class Community extends Component<
 
     return (
       community && (
-        <div className="mb-2">
+        <div className="community__info mb-2">
           <BannerIconHeader banner={community.banner} icon={community.icon} />
-          <h5 className="mb-0 overflow-wrap-anywhere">{community.title}</h5>
+          <h5 className="community__title mb-0 overflow-wrap-anywhere">
+            {community.title}
+          </h5>
           <CommunityLink
             community={community}
             realLink
@@ -510,14 +514,14 @@ export class Community extends Component<
       : undefined;
 
     return (
-      <div className="mb-3">
+      <div className="community__selects mb-3">
         <span className="mr-3">
           <DataTypeSelect
             type_={dataType}
             onChange={this.handleDataTypeChange}
           />
         </span>
-        <span className="mr-2">
+        <span className="community__sort-select-wrap mr-2">
           <SortSelect sort={sort} onChange={this.handleSortChange} />
         </span>
         {communityRss && (
diff --git a/src/shared/components/community/create-community.tsx b/src/shared/components/community/create-community.tsx
index ff31b839ed..d9d748b3fe 100644
--- a/src/shared/components/community/create-community.tsx
+++ b/src/shared/components/community/create-community.tsx
@@ -33,13 +33,13 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="create-community__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <div className="row">
-          <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+        <div className="create-comunity__form-w-row row">
+          <div className="create-community__form-wrap col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>{i18n.t("create_community")}</h5>
             <CommunityForm
               onUpsertCommunity={this.handleCommunityCreate}
diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 720e596fb6..c1ffe19a3d 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -131,7 +131,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const myUSerInfo = UserService.Instance.myUserInfo;
     const { name, actor_id } = this.props.community_view.community;
     return (
-      <aside className="mb-3">
+      <aside className="community-sidebar__sidebar mb-3">
         <div id="sidebarContainer">
           <section id="sidebarMain" className="card border-secondary mb-3">
             <div className="card-body">
@@ -174,17 +174,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const community = this.props.community_view.community;
     const subscribed = this.props.community_view.subscribed;
     return (
-      <div>
+      <div className="community-sidebar__title">
         <h5 className="mb-0">
           {this.props.showIcon && !community.removed && (
             <BannerIconHeader icon={community.icon} banner={community.banner} />
           )}
-          <span className="mr-2">
+          <span className="community-sidebar__title-link mr-2">
             <CommunityLink community={community} hideAvatar />
           </span>
           {subscribed === "Subscribed" && (
             <button
-              className="btn btn-secondary btn-sm mr-2"
+              className="community-sidebar__btn-subscribe btn btn-secondary btn-sm mr-2"
               onClick={linkEvent(this, this.handleUnfollowCommunity)}
             >
               {this.state.followCommunityLoading ? (
@@ -199,7 +199,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           )}
           {subscribed === "Pending" && (
             <button
-              className="btn btn-warning mr-2"
+              className="community-sidebar__btn-subscribe-pending btn btn-warning mr-2"
               onClick={linkEvent(this, this.handleUnfollowCommunity)}
             >
               {this.state.followCommunityLoading ? (
@@ -210,17 +210,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             </button>
           )}
           {community.removed && (
-            <small className="mr-2 text-muted font-italic">
+            <small className="community-sidebar__title-removed mr-2 text-muted font-italic">
               {i18n.t("removed")}
             </small>
           )}
           {community.deleted && (
-            <small className="mr-2 text-muted font-italic">
+            <small className="community-sidebar__title-deleted mr-2 text-muted font-italic">
               {i18n.t("deleted")}
             </small>
           )}
           {community.nsfw && (
-            <small className="mr-2 text-muted font-italic">
+            <small className="community-sidebar__title-nsfw mr-2 text-muted font-italic">
               {i18n.t("nsfw")}
             </small>
           )}
@@ -238,7 +238,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   mods() {
     return (
-      <ul className="list-inline small">
+      <ul className="community-sidebar__mods list-inline small">
         <li className="list-inline-item">{i18n.t("mods")}: </li>
         {this.props.moderators.map(mod => (
           <li key={mod.moderator.id} className="list-inline-item">
@@ -253,7 +253,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const cv = this.props.community_view;
     return (
       <Link
-        className={`btn btn-secondary btn-block mb-2 ${
+        className={`community-sidebar__create-post btn btn-secondary btn-block mb-2 ${
           cv.community.deleted || cv.community.removed ? "no-click" : ""
         }`}
         to={`/create_post?communityId=${cv.community.id}`}
@@ -266,7 +266,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   subscribe() {
     const community_view = this.props.community_view;
     return (
-      <div className="mb-2">
+      <div className="community-sidebar__subscribe mb-2">
         {community_view.subscribed == "NotSubscribed" && (
           <button
             className="btn btn-secondary btn-block"
@@ -287,7 +287,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const { subscribed, blocked } = this.props.community_view;
 
     return (
-      <div className="mb-2">
+      <div className="community-sidebar__block mb-2">
         {subscribed == "NotSubscribed" && (
           <button
             className="btn btn-danger btn-block"
@@ -304,7 +304,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const desc = this.props.community_view.community.description;
     return (
       desc && (
-        <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
+        <div
+          className="community-sidebar__desc md-div"
+          dangerouslySetInnerHTML={mdToHtml(desc)}
+        />
       )
     );
   }
@@ -313,10 +316,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const community_view = this.props.community_view;
     return (
       <>
-        <ul className="list-inline mb-1 text-muted font-weight-bold">
+        <ul className="community-sidebar__admin-btns list-inline mb-1 text-muted font-weight-bold">
           {amMod(this.props.moderators) && (
             <>
-              <li className="list-inline-item-action">
+              <li className="community-sidebar__li-mod-edit list-inline-item-action">
                 <button
                   className="btn btn-link text-muted d-inline-block"
                   onClick={linkEvent(this, this.handleEditClick)}
@@ -328,7 +331,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               </li>
               {!amTopMod(this.props.moderators) &&
                 (!this.state.showConfirmLeaveModTeam ? (
-                  <li className="list-inline-item-action">
+                  <li className="community-sidebar__li-leave list-inline-item-action">
                     <button
                       className="btn btn-link text-muted d-inline-block"
                       onClick={linkEvent(
@@ -341,7 +344,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   </li>
                 ) : (
                   <>
-                    <li className="list-inline-item-action">
+                    <li className="community-sidebar__li-confirm-leave list-inline-item-action">
                       {i18n.t("are_you_sure")}
                     </li>
                     <li className="list-inline-item-action">
@@ -352,7 +355,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                         {i18n.t("yes")}
                       </button>
                     </li>
-                    <li className="list-inline-item-action">
+                    <li className="community-sidebar__li-cancel-leave list-inline-item-action">
                       <button
                         className="btn btn-link text-muted d-inline-block"
                         onClick={linkEvent(
@@ -366,7 +369,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   </>
                 ))}
               {amTopMod(this.props.moderators) && (
-                <li className="list-inline-item-action">
+                <li className="community-sidebar__li-delete-community list-inline-item-action">
                   <button
                     className="btn btn-link text-muted d-inline-block"
                     onClick={linkEvent(this, this.handleDeleteCommunity)}
@@ -397,17 +400,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             </>
           )}
           {amAdmin() && (
-            <li className="list-inline-item">
+            <li className="community-sidebar__li-manage-mods list-inline-item">
               {!this.props.community_view.community.removed ? (
                 <button
-                  className="btn btn-link text-muted d-inline-block"
+                  className="community-sidebar__btn-mod-remove btn btn-link text-muted d-inline-block"
                   onClick={linkEvent(this, this.handleModRemoveShow)}
                 >
                   {i18n.t("remove")}
                 </button>
               ) : (
                 <button
-                  className="btn btn-link text-muted d-inline-block"
+                  className="community-sidebar__btn-mod-restore btn btn-link text-muted d-inline-block"
                   onClick={linkEvent(this, this.handleRemoveCommunity)}
                 >
                   {this.state.removeCommunityLoading ? (
@@ -418,7 +421,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 </button>
               )}
               <button
-                className="btn btn-link text-muted d-inline-block"
+                className="community-sidebar__btn-purge btn btn-link text-muted d-inline-block"
                 onClick={linkEvent(this, this.handlePurgeCommunityShow)}
                 aria-label={i18n.t("purge_community")}
               >
@@ -428,15 +431,18 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           )}
         </ul>
         {this.state.showRemoveDialog && (
-          <form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
-            <div className="form-group">
+          <form
+            className="community-sidebar__remove-community-form"
+            onSubmit={linkEvent(this, this.handleRemoveCommunity)}
+          >
+            <div className="community-sidebar__remove-community-wrap form-group">
               <label className="col-form-label" htmlFor="remove-reason">
                 {i18n.t("reason")}
               </label>
               <input
                 type="text"
                 id="remove-reason"
-                className="form-control mr-2"
+                className="community-sidebar__remove-community-reason form-control mr-2"
                 placeholder={i18n.t("optional")}
                 value={this.state.removeReason}
                 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
@@ -447,7 +453,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             {/*   <label class="col-form-label">Expires</label> */}
             {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
             {/* </div> */}
-            <div className="form-group">
+            <div className="community-sidebar__remove-community-submit-wrap form-group">
               <button type="submit" className="btn btn-secondary">
                 {this.state.removeCommunityLoading ? (
                   <Spinner />
@@ -460,10 +466,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         )}
         {this.state.showPurgeDialog && (
           <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
-            <div className="form-group">
+            <div className="community-sidebar__purge-dialog-warning-wrap form-group">
               <PurgeWarning />
             </div>
-            <div className="form-group">
+            <div className="community-sidebar__purge-dialog-reason-wrap form-group">
               <label className="sr-only" htmlFor="purge-reason">
                 {i18n.t("reason")}
               </label>
@@ -476,7 +482,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 onInput={linkEvent(this, this.handlePurgeReasonChange)}
               />
             </div>
-            <div className="form-group">
+            <div className="community-sidebar__purge-dialog-btn-wrap form-group">
               {this.state.purgeCommunityLoading ? (
                 <Spinner />
               ) : (
diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx
index ad7ac931ae..e702a647e9 100644
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@@ -120,7 +120,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         : undefined;
 
     return (
-      <div className="container-lg">
+      <div className="admin-settings__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index f77f51258e..eaea96b617 100644
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@@ -75,7 +75,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
 
   render() {
     return (
-      <div className="col-12">
+      <div className="emojis-form__root col-12">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -89,7 +89,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
             ></EmojiMart>
           </div>
         )}
-        <div className="table-responsive">
+        <div className="emojis-table__root table-responsive">
           <table id="emojis_table" className="table table-sm table-hover">
             <thead className="pointer">
               <tr>
@@ -117,7 +117,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                 )
                 .map((cv, index) => (
                   <tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
-                    <td style="text-align:center;">
+                    <td
+                      className="emojis-table__td-imguploadw"
+                      style="text-align:center;"
+                    >
                       <label
                         htmlFor={index.toString()}
                         className="pointer text-muted small font-weight-bold"
@@ -146,7 +149,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         )}
                       />
                     </td>
-                    <td className="text-right">
+                    <td className="emojis-table__td-shortcode text-right">
                       <input
                         type="text"
                         placeholder="ShortCode"
@@ -159,7 +162,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         )}
                       />
                     </td>
-                    <td className="text-right">
+                    <td className="emojis-table__td-category text-right">
                       <input
                         type="text"
                         placeholder="Category"
@@ -171,7 +174,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         )}
                       />
                     </td>
-                    <td className="text-right d-lg-table-cell d-none">
+                    <td className="emojis-table__td-url text-right d-lg-table-cell d-none">
                       <input
                         type="text"
                         placeholder="Url"
@@ -183,7 +186,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         )}
                       />
                     </td>
-                    <td className="text-right">
+                    <td className="emojis-table__td-alttext text-right">
                       <input
                         type="text"
                         placeholder="Alt Text"
@@ -195,7 +198,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         )}
                       />
                     </td>
-                    <td className="text-right d-lg-table-cell">
+                    <td className="emojis-table__td--keywords text-right d-lg-table-cell">
                       <input
                         type="text"
                         placeholder="Keywords"
@@ -207,13 +210,13 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         )}
                       />
                     </td>
-                    <td>
+                    <td className="emojis-table__td-btns">
                       <div>
                         <span title={this.getEditTooltip(cv)}>
                           <button
                             className={
                               (cv.changed ? "text-success " : "text-muted ") +
-                              "btn btn-link btn-animate"
+                              "emojis-table__btn-save btn btn-link btn-animate"
                             }
                             onClick={linkEvent(
                               { i: this, cv: cv },
@@ -235,7 +238,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                           </button>
                         </span>
                         <button
-                          className="btn btn-link btn-animate text-muted"
+                          className="emojis-table__btn-delete btn btn-link btn-animate text-muted"
                           onClick={linkEvent(
                             { i: this, index: index, cv: cv },
                             this.handleDeleteEmojiClick
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 4d79bc6359..be89f0c07b 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -375,7 +375,7 @@ export class Home extends Component<any, HomeState> {
     } = this.state;
 
     return (
-      <div className="container-lg">
+      <div className="home__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -418,7 +418,7 @@ export class Home extends Component<any, HomeState> {
     } = this.state;
 
     return (
-      <div className="row">
+      <div className="home__mobile-view row">
         <div className="col-12">
           {this.hasFollows && (
             <MobileButton
@@ -514,7 +514,9 @@ export class Home extends Component<any, HomeState> {
       case "success": {
         const trending = this.state.trendingCommunitiesRes.data.communities;
         return (
-          <div className={!isMobile ? "mb-2" : ""}>
+          <div
+            className={"home__trending-communities-wrap" + (!isMobile ? " mb-2" : "")}
+          >
             <h5>
               <T i18nKey="trending_communities">
                 #
@@ -523,11 +525,11 @@ export class Home extends Component<any, HomeState> {
                 </Link>
               </T>
             </h5>
-            <ul className="list-inline mb-0">
+            <ul className="home__trending-communities-list list-inline mb-0">
               {trending.map(cv => (
                 <li
                   key={cv.community.id}
-                  className="list-inline-item d-inline-block"
+                  className="home__trending-community list-inline-item d-inline-block"
                 >
                   <CommunityLink community={cv.community} />
                 </li>
@@ -543,7 +545,7 @@ export class Home extends Component<any, HomeState> {
     const { subscribedCollapsed } = this.state;
 
     return (
-      <div>
+      <div className="home__subscribed-communities">
         <h5>
           <T class="d-inline" i18nKey="subscribed_to_communities">
             #
@@ -552,7 +554,7 @@ export class Home extends Component<any, HomeState> {
             </Link>
           </T>
           <button
-            className="btn btn-sm text-muted"
+            className="home__subscribed-communities-btn-collapse btn btn-sm text-muted"
             onClick={linkEvent(this, this.handleCollapseSubscribe)}
             aria-label={i18n.t("collapse")}
             data-tippy-content={i18n.t("collapse")}
@@ -564,7 +566,7 @@ export class Home extends Component<any, HomeState> {
           </button>
         </h5>
         {!subscribedCollapsed && (
-          <ul className="list-inline mb-0">
+          <ul className="home__subscribed-communities-links list-inline mb-0">
             {UserService.Instance.myUserInfo?.follows.map(cfv => (
               <li
                 key={cfv.community.id}
diff --git a/src/shared/components/home/instances.tsx b/src/shared/components/home/instances.tsx
index ec2ff63572..a79cd05b15 100644
--- a/src/shared/components/home/instances.tsx
+++ b/src/shared/components/home/instances.tsx
@@ -82,7 +82,7 @@ export class Instances extends Component<any, InstancesState> {
       case "success": {
         const instances = this.state.instancesRes.data.federated_instances;
         return instances ? (
-          <div className="row">
+          <div className="home-instances__list-wrap row">
             <div className="col-md-6">
               <h5>{i18n.t("linked_instances")}</h5>
               {this.itemList(instances.linked)}
@@ -109,7 +109,7 @@ export class Instances extends Component<any, InstancesState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="home-instances---root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -121,25 +121,27 @@ export class Instances extends Component<any, InstancesState> {
 
   itemList(items: Instance[]) {
     return items.length > 0 ? (
-      <div className="table-responsive">
+      <div className="home-instances__item-list table-responsive">
         <table id="instances_table" className="table table-sm table-hover">
           <thead className="pointer">
             <tr>
-              <th>{i18n.t("name")}</th>
-              <th>{i18n.t("software")}</th>
-              <th>{i18n.t("version")}</th>
+              <th className="home-instances__th-name">{i18n.t("name")}</th>
+              <th className="home-instances__th-software">
+                {i18n.t("software")}
+              </th>
+              <th className="home-instances__th-version">{i18n.t("version")}</th>
             </tr>
           </thead>
           <tbody>
             {items.map(i => (
               <tr key={i.domain}>
-                <td>
+                <td className="home-instances__td-name">
                   <a href={`https://${i.domain}`} rel={relTags}>
                     {i.domain}
                   </a>
                 </td>
-                <td>{i.software}</td>
-                <td>{i.version}</td>
+                <td className="home-instances__td-software">{i.software}</td>
+                <td className="home-instances__td-version">{i.version}</td>
               </tr>
             ))}
           </tbody>
diff --git a/src/shared/components/home/legal.tsx b/src/shared/components/home/legal.tsx
index 15bea9b5b3..1de9bcedbe 100644
--- a/src/shared/components/home/legal.tsx
+++ b/src/shared/components/home/legal.tsx
@@ -25,7 +25,7 @@ export class Legal extends Component<any, LegalState> {
   render() {
     const legal = this.state.siteRes.site_view.local_site.legal_information;
     return (
-      <div className="container-lg">
+      <div className="legal__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index 841a3d2b2c..4b6d5e0411 100644
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@@ -49,7 +49,7 @@ export class Login extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="home-login__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -63,10 +63,10 @@ export class Login extends Component<any, State> {
 
   loginForm() {
     return (
-      <div>
+      <div className="home-login__form">
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
           <h5>{i18n.t("login")}</h5>
-          <div className="form-group row">
+          <div className="home-login__row-email-or-username form-group row">
             <label
               className="col-sm-2 col-form-label"
               htmlFor="login-email-or-username"
@@ -86,7 +86,7 @@ export class Login extends Component<any, State> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="home-login__row-password form-group row">
             <label className="col-sm-2 col-form-label" htmlFor="login-password">
               {i18n.t("password")}
             </label>
@@ -116,7 +116,7 @@ export class Login extends Component<any, State> {
             </div>
           </div>
           {this.state.showTotp && (
-            <div className="form-group row">
+            <div className="home-login__row-totp form-group row">
               <label
                 className="col-sm-6 col-form-label"
                 htmlFor="login-totp-token"
@@ -137,7 +137,7 @@ export class Login extends Component<any, State> {
               </div>
             </div>
           )}
-          <div className="form-group row">
+          <div className="home-login__row-btns form-group row">
             <div className="col-sm-10">
               <button type="submit" className="btn btn-secondary">
                 {this.state.loginRes.state == "loading" ? (
diff --git a/src/shared/components/home/rate-limit-form.tsx b/src/shared/components/home/rate-limit-form.tsx
index 0ce0126008..ee86045ecb 100644
--- a/src/shared/components/home/rate-limit-form.tsx
+++ b/src/shared/components/home/rate-limit-form.tsx
@@ -51,8 +51,11 @@ function RateLimits({
   rateLimitValue,
 }: RateLimitsProps) {
   return (
-    <div className="form-group row">
-      <label className="col-12 col-form-label" htmlFor="rate-limit">
+    <div className="rate-limit__row form-group row">
+      <label
+        className="rate-limit__label-title col-12 col-form-label"
+        htmlFor="rate-limit"
+      >
         {i18n.t("rate_limit")}
       </label>
       <input
@@ -63,7 +66,12 @@ function RateLimits({
         value={rateLimitValue}
         onInput={handleRateLimit}
       />
-      <label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
+
+      <label
+        id="rate-limit__label-per-sec"
+        className="col-12 col-form-label"
+        htmlFor="rate-limit__per-second"
+      >
         {i18n.t("per_second")}
       </label>
       <input
@@ -133,7 +141,10 @@ export default class RateLimitsForm extends Component<
 
   render() {
     return (
-      <form onSubmit={linkEvent(this, submitRateLimitForm)}>
+      <form
+        className="rate-limit__root"
+        onSubmit={linkEvent(this, submitRateLimitForm)}
+      >
         <h5>{i18n.t("rate_limit_header")}</h5>
         <Tabs
           tabs={rateLimitTypes.map(rateLimitType => ({
@@ -157,7 +168,7 @@ export default class RateLimitsForm extends Component<
             ),
           }))}
         />
-        <div className="form-group row">
+        <div className="rate-limit__row-btns form-group row">
           <div className="col-12">
             <button
               type="submit"
diff --git a/src/shared/components/home/setup.tsx b/src/shared/components/home/setup.tsx
index b658bd2432..00f8a5befc 100644
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@@ -60,7 +60,7 @@ export class Setup extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="setup__root container-lg">
         <Helmet title={this.documentTitle} />
         <div className="row">
           <div className="col-12 offset-lg-3 col-lg-6">
@@ -84,9 +84,12 @@ export class Setup extends Component<any, State> {
 
   registerUser() {
     return (
-      <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
+      <form
+        className="setup__form"
+        onSubmit={linkEvent(this, this.handleRegisterSubmit)}
+      >
         <h5>{i18n.t("setup_admin")}</h5>
-        <div className="form-group row">
+        <div className="setup__form-row-username form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="username">
             {i18n.t("username")}
           </label>
@@ -103,7 +106,7 @@ export class Setup extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="setup__form-row-email form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="email">
             {i18n.t("email")}
           </label>
@@ -120,7 +123,7 @@ export class Setup extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="setup__form-row-password form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="password">
             {i18n.t("password")}
           </label>
@@ -138,7 +141,7 @@ export class Setup extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="setup__form-row-verifypass form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="verify-password">
             {i18n.t("verify_password")}
           </label>
@@ -156,7 +159,7 @@ export class Setup extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="setup__form-row-btns form-group row">
           <div className="col-sm-10">
             <button type="submit" className="btn btn-secondary">
               {this.state.registerRes.state == "loading" ? (
diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx
index 16a3cc6d3e..eb99fedb5d 100644
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@@ -127,7 +127,7 @@ export class Signup extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="signup__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -144,11 +144,14 @@ export class Signup extends Component<any, State> {
   registerForm() {
     const siteView = this.state.siteRes.site_view;
     return (
-      <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
+      <form
+        className="signup__form"
+        onSubmit={linkEvent(this, this.handleRegisterSubmit)}
+      >
         <h5>{this.titleName(siteView)}</h5>
 
         {this.isLemmyMl && (
-          <div className="form-group row">
+          <div className="signup__form-row-joinurl form-group row">
             <div className="mt-2 mb-0 alert alert-warning" role="alert">
               <T i18nKey="lemmy_ml_registration_message">
                 #<a href={joinLemmyUrl}>#</a>
@@ -157,7 +160,7 @@ export class Signup extends Component<any, State> {
           </div>
         )}
 
-        <div className="form-group row">
+        <div className="signup__form-row-username form-group row">
           <label
             className="col-sm-2 col-form-label"
             htmlFor="register-username"
@@ -180,7 +183,7 @@ export class Signup extends Component<any, State> {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="signup__form-row-email form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="register-email">
             {i18n.t("email")}
           </label>
@@ -211,7 +214,7 @@ export class Signup extends Component<any, State> {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="signup__form-row-password form-group row">
           <label
             className="col-sm-2 col-form-label"
             htmlFor="register-password"
@@ -238,7 +241,7 @@ export class Signup extends Component<any, State> {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="signup__form-row-verifypass form-group row">
           <label
             className="col-sm-2 col-form-label"
             htmlFor="register-verify-password"
@@ -261,7 +264,7 @@ export class Signup extends Component<any, State> {
 
         {siteView.local_site.registration_mode == "RequireApplication" && (
           <>
-            <div className="form-group row">
+            <div className="signup__form-row-application form-group row">
               <div className="offset-sm-2 col-sm-10">
                 <div className="mt-2 alert alert-warning" role="alert">
                   <Icon icon="alert-triangle" classes="icon-inline mr-2" />
@@ -299,7 +302,7 @@ export class Signup extends Component<any, State> {
         )}
         {this.renderCaptcha()}
         {siteView.local_site.enable_nsfw && (
-          <div className="form-group row">
+          <div className="signup__form-row-nsfw form-group row">
             <div className="col-sm-10">
               <div className="form-check">
                 <input
@@ -329,7 +332,7 @@ export class Signup extends Component<any, State> {
           value={this.state.form.honeypot}
           onInput={linkEvent(this, this.handleHoneyPotChange)}
         />
-        <div className="form-group row">
+        <div className="signup__form-row-btns form-group row">
           <div className="col-sm-10">
             <button type="submit" className="btn btn-secondary">
               {this.state.registerRes.state == "loading" ? (
@@ -351,7 +354,7 @@ export class Signup extends Component<any, State> {
       case "success": {
         const res = this.state.captchaRes.data;
         return (
-          <div className="form-group row">
+          <div className="signup__form-captcha form-group row">
             <label className="col-sm-2" htmlFor="register-captcha">
               <span className="mr-2">{i18n.t("enter_code")}</span>
               <button
diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx
index 4035c74f1d..c648122838 100644
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@@ -120,7 +120,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
   render() {
     const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
     return (
-      <form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
+      <form
+        className="site-form-root"
+        onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}
+      >
         <NavigationPrompt
           when={
             !this.props.loading &&
@@ -139,7 +142,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             ? capitalizeFirstLetter(i18n.t("edit"))
             : capitalizeFirstLetter(i18n.t("setup"))
         } ${i18n.t("your_site")}`}</h5>
-        <div className="form-group row">
+        <div className="site-form__row-name form-group row">
           <label className="col-12 col-form-label" htmlFor="create-site-name">
             {i18n.t("name")}
           </label>
@@ -156,7 +159,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group">
+        <div className="site-form__row-icon form-group">
           <label className="mr-2">{i18n.t("icon")}</label>
           <ImageUploadForm
             uploadTitle={i18n.t("upload_icon")}
@@ -166,7 +169,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             rounded
           />
         </div>
-        <div className="form-group">
+        <div className="site-form__row-banner form-group">
           <label className="mr-2">{i18n.t("banner")}</label>
           <ImageUploadForm
             uploadTitle={i18n.t("upload_banner")}
@@ -175,7 +178,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             onRemove={this.handleBannerRemove}
           />
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-desc form-group row">
           <label className="col-12 col-form-label" htmlFor="site-desc">
             {i18n.t("description")}
           </label>
@@ -190,7 +193,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-sidebar form-group row">
           <label className="col-12 col-form-label">{i18n.t("sidebar")}</label>
           <div className="col-12">
             <MarkdownTextArea
@@ -202,7 +205,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-legal form-group row">
           <label className="col-12 col-form-label">
             {i18n.t("legal_information")}
           </label>
@@ -216,7 +219,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-downvotes form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -235,7 +238,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-nsfw form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -254,7 +257,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-regmode form-group row">
           <div className="col-12">
             <label
               className="form-check-label mr-2"
@@ -277,7 +280,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
         {this.state.siteForm.registration_mode == "RequireApplication" && (
-          <div className="form-group row">
+          <div className="site-form__row-questionnaire form-group row">
             <label className="col-12 col-form-label">
               {i18n.t("application_questionnaire")}
             </label>
@@ -292,7 +295,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="site-form__row-creation-mode form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -314,7 +317,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-email-verif form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -336,7 +339,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-app-email-admins form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -358,7 +361,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-reports-email form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -377,7 +380,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-theme form-group row">
           <div className="col-12">
             <label
               className="form-check-label mr-2"
@@ -401,7 +404,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
         {this.props.showLocal && (
-          <form className="form-group row">
+          <form className="site-form__row-local form-group row">
             <label className="col-sm-3">{i18n.t("listing_type")}</label>
             <div className="col-sm-9">
               <ListingTypeSelect
@@ -413,7 +416,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </form>
         )}
-        <div className="form-group row">
+        <div className="site-form__row-private form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -432,7 +435,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-show-modlog form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -451,7 +454,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-slur-filter form-group row">
           <label
             className="col-12 col-form-label"
             htmlFor="create-site-slur-filter-regex"
@@ -478,7 +481,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           onChange={this.handleDiscussionLanguageChange}
           showAll
         />
-        <div className="form-group row">
+        <div className="site-form__row-actor-name form-group row">
           <label
             className="col-12 col-form-label"
             htmlFor="create-site-actor-name"
@@ -496,7 +499,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="site-form__row-federation form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -517,7 +520,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
         </div>
         {this.state.siteForm.federation_enabled && (
           <>
-            <div className="form-group row">
+            <div className="site-form__row-federation-debug form-group row">
               {this.federatedInstanceSelect("allowed_instances")}
               {this.federatedInstanceSelect("blocked_instances")}
             </div>
@@ -540,7 +543,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 </div>
               </div>
             </div>
-            <div className="form-group row">
+            <div className="site-form__row-federation-workerct form-group row">
               <label
                 className="col-12 col-form-label"
                 htmlFor="create-site-federation-worker-count"
@@ -563,7 +566,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </>
         )}
-        <div className="form-group row">
+        <div className="site-form__row-captcha-enabled form-group row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -583,7 +586,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
         {this.state.siteForm.captcha_enabled && (
-          <div className="form-group row">
+          <div className="site-form__row-captcha-diffic form-group row">
             <div className="col-12">
               <label
                 className="form-check-label mr-2"
@@ -604,7 +607,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="site-form__row-btns form-group row">
           <div className="col-12">
             <button
               type="submit"
@@ -630,11 +633,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     const value = this.state.instance_select[key];
     const selectedInstances = this.state.siteForm[key];
     return (
-      <div className="col-12 col-md-6">
+      <div className="site-form__fed-instance-sel--root col-12 col-md-6">
         <label className="col-form-label" htmlFor={id}>
           {i18n.t(key)}
         </label>
-        <div className="d-flex justify-content-between align-items-center">
+        <div className="site-form__fed-instance-add d-flex justify-content-between align-items-center">
           <input
             type="text"
             placeholder="instance.tld"
@@ -660,11 +663,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </button>
         </div>
         {selectedInstances && selectedInstances.length > 0 && (
-          <ul className="mt-3 list-unstyled w-100 d-flex flex-column justify-content-around align-items-center">
+          <ul className="site-form__fed-instance-list mt-3 list-unstyled w-100 d-flex flex-column justify-content-around align-items-center">
             {selectedInstances.map(instance => (
               <li
                 key={instance}
-                className="my-1 w-100 w-md-75 d-flex align-items-center justify-content-between"
+                className="site-form__fed-instance my-1 w-100 w-md-75 d-flex align-items-center justify-content-between"
               >
                 <label className="d-block m-0 w-100 " htmlFor={instance}>
                   <strong>{instance}</strong>
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 66a48ca11e..6bf2f897f6 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -47,7 +47,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   siteName() {
     return (
-      <h5 className="mb-0 d-inline">
+      <h5 className="site-sidebar__name mb-0 d-inline">
         {this.props.site.name}
         <button
           className="btn btn-sm text-muted"
@@ -68,7 +68,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
   siteInfo() {
     const site = this.props.site;
     return (
-      <div>
+      <div className="site-sidebar__info">
         {site.description && <h6>{site.description}</h6>}
         {site.sidebar && this.siteSidebar(site.sidebar)}
         {this.props.counts && <Badges counts={this.props.counts} />}
@@ -85,10 +85,10 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   admins(admins: PersonView[]) {
     return (
-      <ul className="mt-1 list-inline small mb-0">
+      <ul className="site-sidebar__info-admins mt-1 list-inline small mb-0">
         <li className="list-inline-item">{i18n.t("admins")}:</li>
         {admins.map(av => (
-          <li key={av.person.id} className="list-inline-item">
+          <li key={av.person.id} className="site-sidebar__info-admin list-inline-item">
             <PersonListing person={av.person} />
           </li>
         ))}
diff --git a/src/shared/components/home/tagline-form.tsx b/src/shared/components/home/tagline-form.tsx
index 59e8dec4a2..5f06021305 100644
--- a/src/shared/components/home/tagline-form.tsx
+++ b/src/shared/components/home/tagline-form.tsx
@@ -31,13 +31,13 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
 
   render() {
     return (
-      <div className="col-12">
+      <div className="tagline-form__root col-12">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
         <h5 className="col-12">{i18n.t("taglines")}</h5>
-        <div className="table-responsive col-12">
+        <div className="tagline-form__wrap table-responsive col-12">
           <table id="taglines_table" className="table table-sm table-hover">
             <thead className="pointer">
               <th></th>
@@ -46,7 +46,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
             <tbody>
               {this.state.taglines.map((cv, index) => (
                 <tr key={index}>
-                  <td>
+                  <td className="tagline-form__td-editor">
                     {this.state.editingRow == index && (
                       <MarkdownTextArea
                         initialContent={cv}
@@ -60,7 +60,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
                     )}
                     {this.state.editingRow != index && <div>{cv}</div>}
                   </td>
-                  <td className="text-right">
+                  <td className="tagline-form__td-btns text-right">
                     <button
                       className="btn btn-link btn-animate text-muted"
                       onClick={linkEvent(
@@ -89,7 +89,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
               ))}
             </tbody>
           </table>
-          <div className="form-group row">
+          <div className="tagline-form__row-add-tagline form-group row">
             <div className="col-12">
               <button
                 className="btn btn-sm btn-secondary mr-2"
@@ -100,7 +100,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
             </div>
           </div>
 
-          <div className="form-group row">
+          <div className="tagline-form__row-btns form-group row">
             <div className="col-12">
               <button
                 onClick={linkEvent(this, this.handleSaveClick)}
diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx
index b3f1fff154..765c434f7d 100644
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@@ -742,7 +742,7 @@ export class Modlog extends Component<
     const { actionType, modId, userId } = getModlogQueryParams();
 
     return (
-      <div className="container-lg">
+      <div className="modlog__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
diff --git a/src/shared/components/person/cake-day.tsx b/src/shared/components/person/cake-day.tsx
index 91ee7c0c77..0f16a7ba69 100644
--- a/src/shared/components/person/cake-day.tsx
+++ b/src/shared/components/person/cake-day.tsx
@@ -10,7 +10,7 @@ export class CakeDay extends Component<CakeDayProps, any> {
   render() {
     return (
       <div
-        className={`mx-2 d-inline-block unselectable pointer`}
+        className="cakeday__root mx-2 d-inline-block unselectable pointer"
         data-tippy-content={this.cakeDayTippy()}
       >
         <Icon icon="cake" classes="icon-inline" />
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index c65d897b5b..675d1d19c5 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -216,7 +216,7 @@ export class Inbox extends Component<any, InboxState> {
     const auth = myAuth();
     const inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined;
     return (
-      <div className="container-lg">
+      <div className="inbox__root container-lg">
         <div className="row">
           <div className="col-12">
             <HtmlTags
@@ -284,7 +284,7 @@ export class Inbox extends Component<any, InboxState> {
 
   unreadOrAllRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="inbox__unread-radios btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@@ -317,9 +317,9 @@ export class Inbox extends Component<any, InboxState> {
 
   messageTypeRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="inbox__msg-type-radios btn-group btn-group-toggle flex-wrap mb-2">
         <label
-          className={`btn btn-outline-secondary pointer
+          className={`inbox__msg-type-label-all btn btn-outline-secondary pointer
             ${this.state.messageType == MessageType.All && "active"}
           `}
         >
@@ -332,7 +332,7 @@ export class Inbox extends Component<any, InboxState> {
           {i18n.t("all")}
         </label>
         <label
-          className={`btn btn-outline-secondary pointer
+          className={`inbox__msg-type-label-replies btn btn-outline-secondary pointer
             ${this.state.messageType == MessageType.Replies && "active"}
           `}
         >
@@ -345,7 +345,7 @@ export class Inbox extends Component<any, InboxState> {
           {i18n.t("replies")}
         </label>
         <label
-          className={`btn btn-outline-secondary pointer
+          className={`inbox__msg-type-label-mentions btn btn-outline-secondary pointer
             ${this.state.messageType == MessageType.Mentions && "active"}
           `}
         >
@@ -358,7 +358,7 @@ export class Inbox extends Component<any, InboxState> {
           {i18n.t("mentions")}
         </label>
         <label
-          className={`btn btn-outline-secondary pointer
+          className={`inbox__msg-type-label-msgs btn btn-outline-secondary pointer
             ${this.state.messageType == MessageType.Messages && "active"}
           `}
         >
@@ -376,7 +376,7 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="mb-2">
+      <div className="inbox__selects mb-2">
         <span className="mr-3">{this.unreadOrAllRadios()}</span>
         <span className="mr-3">{this.messageTypeRadios()}</span>
         <CommentSortSelect
@@ -543,7 +543,9 @@ export class Inbox extends Component<any, InboxState> {
       );
     } else {
       return (
-        <div>{this.buildCombined().map(r => this.renderReplyType(r))}</div>
+        <div className="inbox__all">
+          {this.buildCombined().map(r => this.renderReplyType(r))}
+        </div>
       );
     }
   }
@@ -559,7 +561,7 @@ export class Inbox extends Component<any, InboxState> {
       case "success": {
         const replies = this.state.repliesRes.data.replies;
         return (
-          <div>
+          <div className="inbox__replies">
             <CommentNodes
               nodes={commentsToFlatNodes(replies)}
               viewType={CommentViewType.Flat}
@@ -607,7 +609,7 @@ export class Inbox extends Component<any, InboxState> {
       case "success": {
         const mentions = this.state.mentionsRes.data.mentions;
         return (
-          <div>
+          <div className="inbox__mentions">
             {mentions.map(umv => (
               <CommentNodes
                 key={umv.person_mention.id}
@@ -658,7 +660,7 @@ export class Inbox extends Component<any, InboxState> {
       case "success": {
         const messages = this.state.messagesRes.data.private_messages;
         return (
-          <div>
+          <div className="inbox__messages">
             {messages.map(pmv => (
               <PrivateMessage
                 key={pmv.private_message.id}
diff --git a/src/shared/components/person/password-change.tsx b/src/shared/components/person/password-change.tsx
index 9f5bf9277d..f9ecfc2336 100644
--- a/src/shared/components/person/password-change.tsx
+++ b/src/shared/components/person/password-change.tsx
@@ -40,12 +40,12 @@ export class PasswordChange extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="password-change__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <div className="row">
+        <div className="password-form__wrap row">
           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>{i18n.t("password_change")}</h5>
             {this.passwordChangeForm()}
@@ -58,7 +58,7 @@ export class PasswordChange extends Component<any, State> {
   passwordChangeForm() {
     return (
       <form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
-        <div className="form-group row">
+        <div className="password-form__row-password form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="new-password">
             {i18n.t("new_password")}
           </label>
@@ -74,7 +74,7 @@ export class PasswordChange extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="password-form__row-verifypass form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="verify-password">
             {i18n.t("verify_password")}
           </label>
@@ -90,7 +90,7 @@ export class PasswordChange extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="password-form__row-btns form-group row">
           <div className="col-sm-10">
             <button type="submit" className="btn btn-secondary">
               {this.state.passwordChangeRes.state == "loading" ? (
diff --git a/src/shared/components/person/person-details.tsx b/src/shared/components/person/person-details.tsx
index d1f319606f..47d9dcb0a4 100644
--- a/src/shared/components/person/person-details.tsx
+++ b/src/shared/components/person/person-details.tsx
@@ -109,7 +109,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
 
   render() {
     return (
-      <div>
+      <div className="person-details__root">
         {this.viewSelector(this.props.view)}
 
         <Paginator page={this.props.page} onChange={this.handlePageChange} />
@@ -235,7 +235,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
     }
 
     return (
-      <div>
+      <div className="person-details__overview">
         {combined.map(i => [
           this.renderItemType(i),
           <hr key={i.type_} className="my-3" />,
@@ -246,7 +246,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
 
   comments() {
     return (
-      <div>
+      <div className="person-details__comments">
         <CommentNodes
           nodes={commentsToFlatNodes(this.props.personRes.comments)}
           viewType={CommentViewType.Flat}
@@ -284,7 +284,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
 
   posts() {
     return (
-      <div>
+      <div className="person-details__posts">
         {this.props.personRes.posts.map(post => (
           <>
             <PostListing
diff --git a/src/shared/components/person/person-listing.tsx b/src/shared/components/person/person-listing.tsx
index fe8b841862..940f837ea1 100644
--- a/src/shared/components/person/person-listing.tsx
+++ b/src/shared/components/person/person-listing.tsx
@@ -48,7 +48,9 @@ export class PersonListing extends Component<PersonListingProps, any> {
         {!this.props.realLink ? (
           <Link
             title={apubName}
-            className={this.props.muted ? "text-muted" : "text-info"}
+            className={
+              "person-details__listing " + this.props.muted ? "text-muted" : "text-info"
+            }
             to={link}
           >
             {this.avatarAndName(displayName)}
@@ -56,7 +58,9 @@ export class PersonListing extends Component<PersonListingProps, any> {
         ) : (
           <a
             title={apubName}
-            className={this.props.muted ? "text-muted" : "text-info"}
+            className={
+              "person-details__listing " + this.props.muted ? "text-muted" : "text-info"
+            }
             href={link}
             rel={relTags}
           >
@@ -81,7 +85,7 @@ export class PersonListing extends Component<PersonListingProps, any> {
               icon
             />
           )}
-        <span>{displayName}</span>
+        <span className="person-details__listing--name">{displayName}</span>
       </>
     );
   }
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index 5466bc5fcb..92966733e1 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -389,12 +389,16 @@ export class Profile extends Component<
   }
 
   render() {
-    return <div className="container-lg">{this.renderPersonRes()}</div>;
+    return (
+      <div className="person-profile__root container-lg">
+        {this.renderPersonRes()}
+      </div>
+    );
   }
 
   get viewRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="person-profile__radios btn-group btn-group-toggle flex-wrap mb-2">
         {this.getRadio(PersonDetailsView.Overview)}
         {this.getRadio(PersonDetailsView.Comments)}
         {this.getRadio(PersonDetailsView.Posts)}
@@ -409,9 +413,12 @@ export class Profile extends Component<
 
     return (
       <label
-        className={classNames("btn btn-outline-secondary pointer", {
-          active,
-        })}
+        className={classNames(
+          "person-profile__radio btn btn-outline-secondary pointer",
+          {
+            active,
+          }
+        )}
       >
         <input
           type="radio"
@@ -456,22 +463,22 @@ export class Profile extends Component<
 
     return (
       pv && (
-        <div>
+        <div className="person-profile__user-info">
           {!isBanned(pv.person) && (
             <BannerIconHeader
               banner={pv.person.banner}
               icon={pv.person.avatar}
             />
           )}
-          <div className="mb-3">
-            <div className="">
-              <div className="mb-0 d-flex flex-wrap">
+          <div className="person-profile__wrap mb-3">
+            <div className="person-profile-">
+              <div className="person-profile__overview mb-0 d-flex flex-wrap">
                 <div>
                   {pv.person.display_name && (
                     <h5 className="mb-0">{pv.person.display_name}</h5>
                   )}
                   <ul className="list-inline mb-2">
-                    <li className="list-inline-item">
+                    <li className="person-profile__li-listing list-inline-item">
                       <PersonListing
                         person={pv.person}
                         realLink
@@ -481,22 +488,22 @@ export class Profile extends Component<
                       />
                     </li>
                     {isBanned(pv.person) && (
-                      <li className="list-inline-item badge badge-danger">
+                      <li className="person-profile__li-banned list-inline-item badge badge-danger">
                         {i18n.t("banned")}
                       </li>
                     )}
                     {pv.person.deleted && (
-                      <li className="list-inline-item badge badge-danger">
+                      <li className="person-profile__li-deleted list-inline-item badge badge-danger">
                         {i18n.t("deleted")}
                       </li>
                     )}
                     {pv.person.admin && (
-                      <li className="list-inline-item badge badge-light">
+                      <li className="person-profile__li-admin list-inline-item badge badge-light">
                         {i18n.t("admin")}
                       </li>
                     )}
                     {pv.person.bot_account && (
-                      <li className="list-inline-item badge badge-light">
+                      <li className="person-profile__li-bot-acct list-inline-item badge badge-light">
                         {i18n.t("bot_account").toLowerCase()}
                       </li>
                     )}
@@ -507,7 +514,7 @@ export class Profile extends Component<
                 {!this.amCurrentUser && UserService.Instance.myUserInfo && (
                   <>
                     <a
-                      className={`d-flex align-self-start btn btn-secondary mr-2 ${
+                      className={`prod-user-matrix d-flex align-self-start btn btn-secondary mr-2 ${
                         !pv.person.matrix_user_id && "invisible"
                       }`}
                       rel={relTags}
@@ -517,7 +524,7 @@ export class Profile extends Component<
                     </a>
                     <Link
                       className={
-                        "d-flex align-self-start btn btn-secondary mr-2"
+                        "person-profile__send-msg d-flex align-self-start btn btn-secondary mr-2"
                       }
                       to={`/create_private_message/${pv.person.id}`}
                     >
@@ -526,7 +533,7 @@ export class Profile extends Component<
                     {personBlocked ? (
                       <button
                         className={
-                          "d-flex align-self-start btn btn-secondary mr-2"
+                          "person-profile__btn-unblock d-flex align-self-start btn btn-secondary mr-2"
                         }
                         onClick={linkEvent(
                           pv.person.id,
@@ -538,7 +545,7 @@ export class Profile extends Component<
                     ) : (
                       <button
                         className={
-                          "d-flex align-self-start btn btn-secondary mr-2"
+                          "person-profile__btn-block d-flex align-self-start btn btn-secondary mr-2"
                         }
                         onClick={linkEvent(
                           pv.person.id,
@@ -557,7 +564,7 @@ export class Profile extends Component<
                   (!isBanned(pv.person) ? (
                     <button
                       className={
-                        "d-flex align-self-start btn btn-secondary mr-2"
+                        "person-profile__btn-ban d-flex align-self-start btn btn-secondary mr-2"
                       }
                       onClick={linkEvent(this, this.handleModBanShow)}
                       aria-label={i18n.t("ban")}
@@ -567,7 +574,7 @@ export class Profile extends Component<
                   ) : (
                     <button
                       className={
-                        "d-flex align-self-start btn btn-secondary mr-2"
+                        "person-profile__btn-unban d-flex align-self-start btn btn-secondary mr-2"
                       }
                       onClick={linkEvent(this, this.handleModBanSubmit)}
                       aria-label={i18n.t("unban")}
@@ -577,22 +584,22 @@ export class Profile extends Component<
                   ))}
               </div>
               {pv.person.bio && (
-                <div className="d-flex align-items-center mb-2">
+                <div className="person-profile__bio-mdn d-flex align-items-center mb-2">
                   <div
                     className="md-div"
                     dangerouslySetInnerHTML={mdToHtml(pv.person.bio)}
                   />
                 </div>
               )}
-              <div>
-                <ul className="list-inline mb-2">
-                  <li className="list-inline-item badge badge-light">
+              <div className="person-profile__site-info">
+                <ul className="person-profile__counts list-inline mb-2">
+                  <li className="person-profile__li-post_count list-inline-item badge badge-light">
                     {i18n.t("number_of_posts", {
                       count: Number(pv.counts.post_count),
                       formattedCount: numToSI(pv.counts.post_count),
                     })}
                   </li>
-                  <li className="list-inline-item badge badge-light">
+                  <li className="person-profile__li-comment_count list-inline-item badge badge-light">
                     {i18n.t("number_of_comments", {
                       count: Number(pv.counts.comment_count),
                       formattedCount: numToSI(pv.counts.comment_count),
@@ -600,7 +607,7 @@ export class Profile extends Component<
                   </li>
                 </ul>
               </div>
-              <div className="text-muted">
+              <div className="person-profile__published text-muted">
                 {i18n.t("joined")}{" "}
                 <MomentTime
                   published={pv.person.published}
@@ -608,7 +615,7 @@ export class Profile extends Component<
                   ignoreUpdated
                 />
               </div>
-              <div className="d-flex align-items-center text-muted mb-2">
+              <div className="person-profile__cakeday-wrap d-flex align-items-center text-muted mb-2">
                 <Icon icon="cake" />
                 <span className="ml-2">
                   {i18n.t("cake_day_title")}{" "}
@@ -619,7 +626,10 @@ export class Profile extends Component<
                 </span>
               </div>
               {!UserService.Instance.myUserInfo && (
-                <div className="alert alert-info" role="alert">
+                <div
+                  className="person-profile__li-alert alert alert-info"
+                  role="alert"
+                >
                   {i18n.t("profile_not_logged_in_alert")}
                 </div>
               )}
@@ -635,8 +645,11 @@ export class Profile extends Component<
 
     return (
       showBanDialog && (
-        <form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
-          <div className="form-group row col-12">
+        <form
+          className="person-profile__ban-dialog--root"
+          onSubmit={linkEvent(this, this.handleModBanSubmit)}
+        >
+          <div className="person-profile__ban-dialog form-group row col-12">
             <label className="col-form-label" htmlFor="profile-ban-reason">
               {i18n.t("reason")}
             </label>
diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index be1eb2c11d..ac9b4cf7c9 100644
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@@ -117,7 +117,9 @@ export class RegistrationApplications extends Component<
   }
 
   render() {
-    return <div className="container-lg">{this.renderApps()}</div>;
+    return (
+      <div className="person-registration-app__root container-lg">{this.renderApps()}</div>
+    );
   }
 
   unreadOrAllRadios() {
diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx
index 99a0333645..259ab70968 100644
--- a/src/shared/components/person/reports.tsx
+++ b/src/shared/components/person/reports.tsx
@@ -142,7 +142,7 @@ export class Reports extends Component<any, ReportsState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="person-reports__root container-lg">
         <div className="row">
           <div className="col-12">
             <HtmlTags
@@ -185,7 +185,7 @@ export class Reports extends Component<any, ReportsState> {
 
   unreadOrAllRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="person-reports__unread-or-all btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@@ -218,7 +218,7 @@ export class Reports extends Component<any, ReportsState> {
 
   messageTypeRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="person-reports__message-type btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.messageType == MessageType.All && "active"}
diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 56d57a7a56..dc59cf1f43 100644
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -111,7 +111,7 @@ const Filter = ({
   onChange: (choice: Choice) => void;
   loading: boolean;
 }) => (
-  <div className="form-group row">
+  <div className="person-settings__filter form-group row">
     <label
       className="col-md-4 col-form-label"
       htmlFor={`block-${filterType}-filter`}
@@ -241,7 +241,7 @@ export class Settings extends Component<any, SettingsState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="person-settings__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -268,7 +268,7 @@ export class Settings extends Component<any, SettingsState> {
 
   userSettings() {
     return (
-      <div className="row">
+      <div className="person-settings__row-user-settings row">
         <div className="col-12 col-md-6">
           <div className="card border-secondary mb-3">
             <div className="card-body">{this.saveUserSettingsHtmlForm()}</div>
@@ -285,7 +285,7 @@ export class Settings extends Component<any, SettingsState> {
 
   blockCards() {
     return (
-      <div className="row">
+      <div className="person-settings__row-block-cards row">
         <div className="col-12 col-md-6">
           <div className="card border-secondary mb-3">
             <div className="card-body">{this.blockUserCard()}</div>
@@ -304,8 +304,11 @@ export class Settings extends Component<any, SettingsState> {
     return (
       <>
         <h5>{i18n.t("change_password")}</h5>
-        <form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
-          <div className="form-group row">
+        <form
+          className="person-settings__changepw-form"
+          onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}
+        >
+          <div className="person-settings__changepw-form-row-password form-group row">
             <label className="col-sm-5 col-form-label" htmlFor="user-password">
               {i18n.t("new_password")}
             </label>
@@ -321,7 +324,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="person-settings__changepw-form-row-verifypass form-group row">
             <label
               className="col-sm-5 col-form-label"
               htmlFor="user-verify-password"
@@ -340,7 +343,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="person-settings__changepw-form-row-oldpass form-group row">
             <label
               className="col-sm-5 col-form-label"
               htmlFor="user-old-password"
@@ -359,7 +362,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group">
+          <div className="person-settings__changepw-form-row-btns form-group">
             <button type="submit" className="btn btn-block btn-secondary mr-4">
               {this.state.changePasswordRes.state === "loading" ? (
                 <Spinner />
@@ -377,7 +380,7 @@ export class Settings extends Component<any, SettingsState> {
     const { searchPersonLoading, searchPersonOptions } = this.state;
 
     return (
-      <div>
+      <div className="person-settings__blockuser">
         <Filter
           filterType="user"
           loading={searchPersonLoading}
@@ -394,7 +397,7 @@ export class Settings extends Component<any, SettingsState> {
     return (
       <>
         <h5>{i18n.t("blocked_users")}</h5>
-        <ul className="list-unstyled mb-0">
+        <ul className="person-settings__blocked-users-list list-unstyled mb-0">
           {this.state.personBlocks.map(pb => (
             <li key={pb.target.id}>
               <span>
@@ -438,7 +441,7 @@ export class Settings extends Component<any, SettingsState> {
     return (
       <>
         <h5>{i18n.t("blocked_communities")}</h5>
-        <ul className="list-unstyled mb-0">
+        <ul className="person-settings__blocked-communities-list list-unstyled mb-0">
           {this.state.communityBlocks.map(cb => (
             <li key={cb.community.id}>
               <span>
@@ -467,8 +470,11 @@ export class Settings extends Component<any, SettingsState> {
     return (
       <>
         <h5>{i18n.t("settings")}</h5>
-        <form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
-          <div className="form-group row">
+        <form
+          className="person-settings__save-user-settings-html-form"
+          onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}
+        >
+          <div className="person-settings__form-row-display-name form-group row">
             <label className="col-sm-5 col-form-label" htmlFor="display-name">
               {i18n.t("display_name")}
             </label>
@@ -485,7 +491,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="person-settings__form-row-langs form-group row">
             <label className="col-sm-3 col-form-label" htmlFor="user-bio">
               {i18n.t("bio")}
             </label>
@@ -500,7 +506,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="person-settings__form-row-email form-group row">
             <label className="col-sm-3 col-form-label" htmlFor="user-email">
               {i18n.t("email")}
             </label>
@@ -516,7 +522,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="person-settings__form-row-matrix form-group row">
             <label className="col-sm-5 col-form-label" htmlFor="matrix-user-id">
               <a href={elementUrl} rel={relTags}>
                 {i18n.t("matrix_user_id")}
@@ -534,7 +540,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="person-settings__form-row-avatar form-group row">
             <label className="col-sm-3">{i18n.t("avatar")}</label>
             <div className="col-sm-9">
               <ImageUploadForm
@@ -546,7 +552,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="person-settings__form-row-banner form-group row">
             <label className="col-sm-3">{i18n.t("banner")}</label>
             <div className="col-sm-9">
               <ImageUploadForm
@@ -557,7 +563,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="person-settings__form-row-lang form-group row">
             <label className="col-sm-3" htmlFor="user-language">
               {i18n.t("interface_language")}
             </label>
@@ -594,7 +600,7 @@ export class Settings extends Component<any, SettingsState> {
             showSite
             onChange={this.handleDiscussionLanguageChange}
           />
-          <div className="form-group row">
+          <div className="person-settings__form-row-theme form-group row">
             <label className="col-sm-3" htmlFor="user-theme">
               {i18n.t("theme")}
             </label>
@@ -617,7 +623,7 @@ export class Settings extends Component<any, SettingsState> {
               </select>
             </div>
           </div>
-          <form className="form-group row">
+          <form className="person-settings__form-row-listing-type form-group row">
             <label className="col-sm-3">{i18n.t("type")}</label>
             <div className="col-sm-9">
               <ListingTypeSelect
@@ -631,7 +637,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </form>
-          <form className="form-group row">
+          <form className="person-settings__form-row-sort-type form-group row">
             <label className="col-sm-3">{i18n.t("sort_type")}</label>
             <div className="col-sm-9">
               <SortSelect
@@ -643,7 +649,7 @@ export class Settings extends Component<any, SettingsState> {
             </div>
           </form>
           {enableNsfw(this.state.siteRes) && (
-            <div className="form-group">
+            <div className="person-settings__form-row-nsfw form-group">
               <div className="form-check">
                 <input
                   className="form-check-input"
@@ -658,7 +664,7 @@ export class Settings extends Component<any, SettingsState> {
               </div>
             </div>
           )}
-          <div className="form-group">
+          <div className="person-settings__form-row-show-scores form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -672,7 +678,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="person-settings__form-row-show-avatars form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -686,7 +692,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="person-settings__form-row-bot-acct form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -700,7 +706,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="person-settings__form-row-show-bot-accts form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -717,7 +723,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="person-settings__form-row-show-read-posts form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -734,7 +740,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="person-settings__form-row-show-new-post-notif form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -751,7 +757,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="person-settings__form-row-send-notif form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -775,7 +781,7 @@ export class Settings extends Component<any, SettingsState> {
             </div>
           </div>
           {this.totpSection()}
-          <div className="form-group">
+          <div className="person-settings__form-row-save form-group">
             <button type="submit" className="btn btn-block btn-secondary mr-4">
               {this.state.saveRes.state === "loading" ? (
                 <Spinner />
@@ -785,7 +791,7 @@ export class Settings extends Component<any, SettingsState> {
             </button>
           </div>
           <hr />
-          <div className="form-group">
+          <div className="person-settings__form-row-delete-acct form-group">
             <button
               className="btn btn-block btn-danger"
               onClick={linkEvent(
@@ -846,7 +852,7 @@ export class Settings extends Component<any, SettingsState> {
     return (
       <>
         {!totpUrl && (
-          <div className="form-group">
+          <div className="person-settings__totp-section-setup form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -864,12 +870,12 @@ export class Settings extends Component<any, SettingsState> {
 
         {totpUrl && (
           <>
-            <div>
+            <div className="person-settings__totp-section-title">
               <a className="btn btn-secondary mb-2" href={totpUrl}>
                 {i18n.t("two_factor_link")}
               </a>
             </div>
-            <div className="form-group">
+            <div className="person-settings__totp-section-remove form-group">
               <div className="form-check">
                 <input
                   className="form-check-input"
diff --git a/src/shared/components/person/verify-email.tsx b/src/shared/components/person/verify-email.tsx
index da6eb91736..e1245b7f6c 100644
--- a/src/shared/components/person/verify-email.tsx
+++ b/src/shared/components/person/verify-email.tsx
@@ -52,7 +52,7 @@ export class VerifyEmail extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="person-verify-email__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx
index 278977977b..13e9078d4a 100644
--- a/src/shared/components/post/create-post.tsx
+++ b/src/shared/components/post/create-post.tsx
@@ -163,7 +163,7 @@ export class CreatePost extends Component<
       | undefined;
 
     return (
-      <div className="container-lg">
+      <div className="post-create__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index c57ecd5172..905498a092 100644
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -30,7 +30,7 @@ export class MetadataCard extends Component<
     return (
       <>
         {!this.state.expanded && post.embed_title && post.url && (
-          <div className="card border-secondary mt-3 mb-2">
+          <div className="post-metadata__root card border-secondary mt-3 mb-2">
             <div className="row">
               <div className="col-12">
                 <div className="card-body">
diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index 4640922d02..2e79886208 100644
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@@ -193,7 +193,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     // !!this.state.form.name || !!this.state.form.url || !!this.state.form.body;
     // <Prompt when={promptCheck} message={i18n.t("block_leaving")} />
     return (
-      <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
+      <form
+        className="post-form__root"
+        onSubmit={linkEvent(this, this.handlePostSubmit)}
+      >
         <NavigationPrompt
           when={
             !!(
@@ -203,7 +206,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             ) && !this.state.submitted
           }
         />
-        <div className="form-group row">
+        <div className="post-form---row-main form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="post-url">
             {i18n.t("url")}
           </label>
@@ -220,7 +223,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             <form>
               <label
                 htmlFor="file-upload"
-                className={`${
+                className={`post-form__label-icon ${
                   UserService.Instance.myUserInfo && "pointer"
                 } d-inline-block float-right text-muted font-weight-bold`}
                 data-tippy-content={i18n.t("upload_image")}
@@ -238,7 +241,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               />
             </form>
             {url && validURL(url) && (
-              <div>
+              <div className="post-form__archives">
                 <a
                   href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
                   className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
@@ -272,7 +275,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             )}
             {this.state.imageDeleteUrl && (
               <button
-                className="btn btn-danger btn-sm mt-2"
+                className="post-form__btn-imgdel btn btn-danger btn-sm mt-2"
                 onClick={linkEvent(this, this.handleImageDelete)}
                 aria-label={i18n.t("delete")}
                 data-tippy-content={i18n.t("delete")}
@@ -283,7 +286,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             )}
             {this.props.crossPosts && this.props.crossPosts.length > 0 && (
               <>
-                <div className="my-1 text-muted small font-weight-bold">
+                <div className="post-form__cross_posts-wrap my-1 text-muted small font-weight-bold">
                   {i18n.t("cross_posts")}
                 </div>
                 <PostListings
@@ -316,7 +319,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             )}
           </div>
         </div>
-        <div className="form-group row">
+        <div className="post-form__row-title form-group row">
           <label className="col-sm-2 col-form-label" htmlFor="post-title">
             {i18n.t("title")}
           </label>
@@ -342,7 +345,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="post-form__row-body form-group row">
           <label className="col-sm-2 col-form-label">{i18n.t("body")}</label>
           <div className="col-sm-10">
             <MarkdownTextArea
@@ -412,7 +415,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           value={this.state.form.honeypot}
           onInput={linkEvent(this, this.handleHoneyPotChange)}
         />
-        <div className="form-group row">
+        <div className="post-form__row-btns form-group row">
           <div className="col-sm-10">
             <button
               disabled={!this.state.form.community_id || this.state.loading}
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index b9d4125075..6d0449051f 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -245,12 +245,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get img() {
     return this.imageSrc ? (
       <>
-        <div className="offset-sm-3 my-2 d-none d-sm-block">
+        <div className="post-listing__img-top offset-sm-3 my-2 d-none d-sm-block">
           <a href={this.imageSrc} className="d-inline-block">
             <PictrsImage src={this.imageSrc} />
           </a>
         </div>
-        <div className="my-2 d-block d-sm-none">
+        <div className="post-listing__img-bottom my-2 d-block d-sm-none">
           <a
             className="d-inline-block"
             onClick={linkEvent(this, this.handleImageExpandClick)}
@@ -370,7 +370,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const url = post_view.post.url;
     const body = post_view.post.body;
     return (
-      <ul className="list-inline mb-1 text-muted small">
+      <ul className="post-listing__created-line list-inline mb-1 text-muted small">
         <li className="list-inline-item">
           <PersonListing person={post_view.creator} />
 
@@ -448,7 +448,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     return (
       <div className={`vote-bar col-1 pr-0 small text-center`}>
         <button
-          className={`btn-animate btn btn-link p-0 ${
+          className={`post-listing__btn-upvote btn-animate btn btn-link p-0 ${
             this.postView.my_vote == 1 ? "text-info" : "text-muted"
           }`}
           onClick={linkEvent(this, this.handleUpvote)}
@@ -474,7 +474,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         )}
         {this.props.enableDownvotes && (
           <button
-            className={`btn-animate btn btn-link p-0 ${
+            className={`post-listing__btn-downvote btn-animate btn btn-link p-0 ${
               this.postView.my_vote == -1 ? "text-danger" : "text-muted"
             }`}
             onClick={linkEvent(this, this.handleDownvote)}
@@ -497,7 +497,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
     return (
       <Link
-        className={`d-inline-block ${
+        className={`post-listing__postlink d-inline-block ${
           !post.featured_community && !post.featured_local
             ? "text-body"
             : "text-primary"
@@ -546,7 +546,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           {(url && isImage(url)) ||
             (post.thumbnail_url && (
               <button
-                className="btn btn-link text-monospace text-muted small d-inline-block"
+                className="post-listing__btn-expand btn btn-link text-monospace text-muted small d-inline-block"
                 data-tippy-content={i18n.t("expand_here")}
                 onClick={linkEvent(this, this.handleImageExpandClick)}
               >
@@ -608,7 +608,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   duplicatesLine() {
     const dupes = this.props.crossPosts;
     return dupes && dupes.length > 0 ? (
-      <ul className="list-inline mb-1 small text-muted">
+      <ul className="post-listing__duplicatesline list-inline mb-1 small text-muted">
         <>
           <li className="list-inline-item mr-2">{i18n.t("cross_posted_to")}</li>
           {dupes.map(pv => (
@@ -631,11 +631,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
 
     return (
-      <div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold mb-1">
+      <div className="post-listing__commentsline d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold mb-1">
         {this.commentsButton}
         {canShare() && (
           <button
-            className="btn btn-link"
+            className="post-listing-btn-share btn btn-link"
             onClick={linkEvent(this, this.handleShare)}
             type="button"
           >
@@ -644,7 +644,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         )}
         {!post.local && (
           <a
-            className="btn btn-link btn-animate text-muted py-0"
+            className="post-listing__btn-link btn btn-link btn-animate text-muted py-0"
             title={i18n.t("link")}
             href={post.ap_id}
           >
@@ -706,7 +706,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
     return (
       <Link
-        className="btn btn-link text-muted py-0 pl-0 text-muted"
+        className="post-listing__btn-comments btn btn-link text-muted py-0 pl-0 text-muted"
         title={i18n.t("number_of_comments", {
           count: Number(post_view.counts.comments),
           formattedCount: Number(post_view.counts.comments),
@@ -743,7 +743,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       : {};
     return (
       <>
-        <div>
+        <div className="post-listing__mobile-votes">
           <button
             className={`btn-animate btn py-0 px-1 ${
               this.postView.my_vote === 1 ? "text-info" : "text-muted"
@@ -804,7 +804,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = saved ? i18n.t("unsave") : i18n.t("save");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-save btn btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleSavePostClick)}
         data-tippy-content={label}
         aria-label={label}
@@ -825,7 +825,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get crossPostButton() {
     return (
       <Link
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-xpost btn btn-link btn-animate text-muted py-0"
         to={{
           /* Empty string properties are required to satisfy type*/
           pathname: "/create_post",
@@ -846,7 +846,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get reportButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-report btn btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleShowReportDialog)}
         data-tippy-content={i18n.t("show_report_dialog")}
         aria-label={i18n.t("show_report_dialog")}
@@ -859,7 +859,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get blockButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-block btn btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleBlockPersonClick)}
         data-tippy-content={i18n.t("block_user")}
         aria-label={i18n.t("block_user")}
@@ -872,7 +872,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get editButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-edit btn btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleEditClick)}
         data-tippy-content={i18n.t("edit")}
         aria-label={i18n.t("edit")}
@@ -887,7 +887,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = !deleted ? i18n.t("delete") : i18n.t("restore");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-delete btn btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleDeleteClick)}
         data-tippy-content={label}
         aria-label={label}
@@ -908,7 +908,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get showMoreButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-showmore btn btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleShowAdvanced)}
         data-tippy-content={i18n.t("more")}
         aria-label={i18n.t("more")}
@@ -921,7 +921,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get viewSourceButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-viewsrc btn btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleViewSource)}
         data-tippy-content={i18n.t("view_source")}
         aria-label={i18n.t("view_source")}
@@ -940,7 +940,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = locked ? i18n.t("unlock") : i18n.t("lock");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-lock btn btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleModLock)}
         data-tippy-content={label}
         aria-label={label}
@@ -971,7 +971,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     return (
       <span>
         <button
-          className="btn btn-link btn-animate text-muted py-0 pl-0"
+          className="post-listing__btn-feature btn btn-link btn-animate text-muted py-0 pl-0"
           onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
           data-tippy-content={labelCommunity}
           aria-label={labelCommunity}
@@ -991,7 +991,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         </button>
         {amAdmin() && (
           <button
-            className="btn btn-link btn-animate text-muted py-0"
+            className="post-listing__btn-pin btn btn-link btn-animate text-muted py-0"
             onClick={linkEvent(this, this.handleModFeaturePostLocal)}
             data-tippy-content={labelLocal}
             aria-label={labelLocal}
@@ -1018,7 +1018,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const removed = this.postView.post.removed;
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="post-listing__btn-modremove btn btn-link btn-animate text-muted py-0"
         onClick={linkEvent(
           this,
           !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
@@ -1050,7 +1050,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {!this.creatorIsMod_ &&
                 (!post_view.creator_banned_from_community ? (
                   <button
-                    className="btn btn-link btn-animate text-muted py-0"
+                    className="post-listing__btn-banfc btn btn-link btn-animate text-muted py-0"
                     onClick={linkEvent(
                       this,
                       this.handleModBanFromCommunityShow
@@ -1061,7 +1061,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   </button>
                 ) : (
                   <button
-                    className="btn btn-link btn-animate text-muted py-0"
+                    className="post-listing__btn-unban-fc btn btn-link btn-animate text-muted py-0"
                     onClick={linkEvent(
                       this,
                       this.handleModBanFromCommunitySubmit
@@ -1073,7 +1073,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 ))}
               {!post_view.creator_banned_from_community && (
                 <button
-                  className="btn btn-link btn-animate text-muted py-0"
+                  className="post-listing__btn-modappt btn btn-link btn-animate text-muted py-0"
                   onClick={linkEvent(this, this.handleAddModToCommunity)}
                   aria-label={
                     this.creatorIsMod_
@@ -1098,7 +1098,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             this.creatorIsMod_ &&
             (!this.state.showConfirmTransferCommunity ? (
               <button
-                className="btn btn-link btn-animate text-muted py-0"
+                className="post-listing__btn-transf btn btn-link btn-animate text-muted py-0"
                 onClick={linkEvent(
                   this,
                   this.handleShowConfirmTransferCommunity
@@ -1110,20 +1110,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             ) : (
               <>
                 <button
-                  className="d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
+                  className="post-listing__btn-transfc-confirm d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
                   aria-label={i18n.t("are_you_sure")}
                 >
                   {i18n.t("are_you_sure")}
                 </button>
                 <button
-                  className="btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
+                  className="post-listing__btn-htransfc btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
                   aria-label={i18n.t("yes")}
                   onClick={linkEvent(this, this.handleTransferCommunity)}
                 >
                   {this.state.transferLoading ? <Spinner /> : i18n.t("yes")}
                 </button>
                 <button
-                  className="btn btn-link btn-animate text-muted py-0 d-inline-block"
+                  className="post-listing__btn-cshtransfc btn btn-link btn-animate text-muted py-0 d-inline-block"
                   onClick={linkEvent(
                     this,
                     this.handleCancelShowConfirmTransferCommunity
@@ -1141,7 +1141,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 <>
                   {!isBanned(post_view.creator) ? (
                     <button
-                      className="btn btn-link btn-animate text-muted py-0"
+                      className="post-listing__btn-banfs btn btn-link btn-animate text-muted py-0"
                       onClick={linkEvent(this, this.handleModBanShow)}
                       aria-label={i18n.t("ban_from_site")}
                     >
@@ -1149,7 +1149,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                     </button>
                   ) : (
                     <button
-                      className="btn btn-link btn-animate text-muted py-0"
+                      className="post-listing__btn-unbanfs btn btn-link btn-animate text-muted py-0"
                       onClick={linkEvent(this, this.handleModBanSubmit)}
                       aria-label={i18n.t("unban_from_site")}
                     >
@@ -1161,14 +1161,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                     </button>
                   )}
                   <button
-                    className="btn btn-link btn-animate text-muted py-0"
+                    className="post-listing__btn-purge-user btn btn-link btn-animate text-muted py-0"
                     onClick={linkEvent(this, this.handlePurgePersonShow)}
                     aria-label={i18n.t("purge_user")}
                   >
                     {i18n.t("purge_user")}
                   </button>
                   <button
-                    className="btn btn-link btn-animate text-muted py-0"
+                    className="post-listing__purge-purge-post btn btn-link btn-animate text-muted py-0"
                     onClick={linkEvent(this, this.handlePurgePostShow)}
                     aria-label={i18n.t("purge_post")}
                   >
@@ -1178,7 +1178,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               )}
               {!isBanned(post_view.creator) && post_view.creator.local && (
                 <button
-                  className="btn btn-link btn-animate text-muted py-0"
+                  className="post-listing__btn-handle-admin btn btn-link btn-animate text-muted py-0"
                   onClick={linkEvent(this, this.handleAddAdmin)}
                   aria-label={
                     this.creatorIsAdmin_
diff --git a/src/shared/components/post/post-listings.tsx b/src/shared/components/post/post-listings.tsx
index 00370f039b..40532eccf3 100644
--- a/src/shared/components/post/post-listings.tsx
+++ b/src/shared/components/post/post-listings.tsx
@@ -66,7 +66,7 @@ export class PostListings extends Component<PostListingsProps, any> {
 
   render() {
     return (
-      <div>
+      <div className="post-listings__root">
         {this.posts.length > 0 ? (
           this.posts.map((post_view, idx) => (
             <>
@@ -103,7 +103,7 @@ export class PostListings extends Component<PostListingsProps, any> {
           ))
         ) : (
           <>
-            <div>{i18n.t("no_posts")}</div>
+            <div className="post-listings__no-posts-title">{i18n.t("no_posts")}</div>
             {this.props.showCommunity && (
               <T i18nKey="subscribe_to_communities">
                 #<Link to="/communities">#</Link>
diff --git a/src/shared/components/post/post-report.tsx b/src/shared/components/post/post-report.tsx
index 7854c0ce1b..bf2bd09f16 100644
--- a/src/shared/components/post/post-report.tsx
+++ b/src/shared/components/post/post-report.tsx
@@ -60,7 +60,7 @@ export class PostReport extends Component<PostReportProps, PostReportState> {
     };
 
     return (
-      <div>
+      <div className="report-post__root">
         <PostListing
           post_view={pv}
           showCommunity={true}
@@ -88,14 +88,14 @@ export class PostReport extends Component<PostReportProps, PostReportState> {
           onAddAdmin={() => {}}
           onTransferCommunity={() => {}}
         />
-        <div>
+        <div className="report-post__reporter">
           {i18n.t("reporter")}: <PersonListing person={r.creator} />
         </div>
-        <div>
+        <div className="report-post__reason">
           {i18n.t("reason")}: {r.post_report.reason}
         </div>
         {resolver && (
-          <div>
+          <div className="report-post__resolver">
             {r.post_report.resolved ? (
               <T i18nKey="resolved_by">
                 #
@@ -110,7 +110,7 @@ export class PostReport extends Component<PostReportProps, PostReportState> {
           </div>
         )}
         <button
-          className="btn btn-link btn-animate text-muted py-0"
+          className="report-post__btn btn btn-link btn-animate text-muted py-0"
           onClick={linkEvent(this, this.handleResolveReport)}
           data-tippy-content={tippyContent}
           aria-label={tippyContent}
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index a7365e0d00..bd210adebe 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -347,7 +347,7 @@ export class Post extends Component<any, PostState> {
       case "success": {
         const res = this.state.postRes.data;
         return (
-          <div className="row">
+          <div className="post__item row">
             <div className="col-12 col-md-8 mb-3">
               <HtmlTags
                 title={this.documentTitle}
@@ -383,7 +383,10 @@ export class Post extends Component<any, PostState> {
                 onTransferCommunity={this.handleTransferCommunity}
                 onFeaturePost={this.handleFeaturePost}
               />
-              <div ref={this.state.commentSectionRef} className="mb-2" />
+              <div
+                ref={this.state.commentSectionRef}
+                className="post__comment-section mb-2"
+              />
               <CommentForm
                 node={res.post_view.post.id}
                 disabled={res.post_view.post.locked}
@@ -393,7 +396,7 @@ export class Post extends Component<any, PostState> {
                 onUpsertComment={this.handleCreateComment}
                 finished={this.state.finished.get(0)}
               />
-              <div className="d-block d-md-none">
+              <div className="post__sidebar-toggle d-block d-md-none">
                 <button
                   className="btn btn-secondary d-inline-block mb-2 mr-3"
                   onClick={linkEvent(this, this.handleShowSidebarMobile)}
@@ -416,7 +419,9 @@ export class Post extends Component<any, PostState> {
               {this.state.commentViewType == CommentViewType.Flat &&
                 this.commentsFlat()}
             </div>
-            <div className="d-none d-md-block col-md-4">{this.sidebar()}</div>
+            <div className="post__sidebar d-none d-md-block col-md-4">
+              {this.sidebar()}
+            </div>
           </div>
         );
       }
@@ -424,13 +429,15 @@ export class Post extends Component<any, PostState> {
   }
 
   render() {
-    return <div className="container-lg">{this.renderPostRes()}</div>;
+    return (
+      <div className="post__root container-lg">{this.renderPostRes()}</div>
+    );
   }
 
   sortRadios() {
     return (
       <>
-        <div className="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
+        <div className="post__sort btn-group btn-group-toggle flex-wrap mr-3 mb-2">
           <label
             className={`btn btn-outline-secondary pointer ${
               this.state.commentSort === "Hot" && "active"
@@ -510,7 +517,7 @@ export class Post extends Component<any, PostState> {
 
     if (commentsRes.state == "success" && postRes.state == "success") {
       return (
-        <div>
+        <div className="post__comments-flat">
           <CommentNodes
             nodes={commentsToFlatNodes(commentsRes.data.comments)}
             viewType={this.state.commentViewType}
@@ -581,7 +588,7 @@ export class Post extends Component<any, PostState> {
 
     return (
       res.state == "success" && (
-        <div>
+        <div className="post__comments-tree">
           {!!this.state.commentId && (
             <>
               <button
diff --git a/src/shared/components/private_message/create-private-message.tsx b/src/shared/components/private_message/create-private-message.tsx
index 5b9eb98198..ef352944af 100644
--- a/src/shared/components/private_message/create-private-message.tsx
+++ b/src/shared/components/private_message/create-private-message.tsx
@@ -118,7 +118,7 @@ export class CreatePrivateMessage extends Component<
       case "success": {
         const res = this.state.recipientRes.data;
         return (
-          <div className="row">
+          <div className="private-message-create__recipient row">
             <div className="col-12 col-lg-6 offset-lg-3 mb-4">
               <h5>{i18n.t("create_private_message")}</h5>
               <PrivateMessageForm
@@ -134,7 +134,7 @@ export class CreatePrivateMessage extends Component<
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="private-message-create__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
diff --git a/src/shared/components/private_message/private-message-form.tsx b/src/shared/components/private_message/private-message-form.tsx
index 6cbf363ee2..ff8d6b97a7 100644
--- a/src/shared/components/private_message/private-message-form.tsx
+++ b/src/shared/components/private_message/private-message-form.tsx
@@ -80,7 +80,7 @@ export class PrivateMessageForm extends Component<
           }
         />
         {!this.props.privateMessageView && (
-          <div className="form-group row">
+          <div className="private-message-form__row-recipient form-group row">
             <label className="col-sm-2 col-form-label">
               {capitalizeFirstLetter(i18n.t("to"))}
             </label>
@@ -90,7 +90,7 @@ export class PrivateMessageForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="private-message-form__row-mdn form-group row">
           <label className="col-sm-2 col-form-label">
             {i18n.t("message")}
             <button
@@ -114,7 +114,7 @@ export class PrivateMessageForm extends Component<
         </div>
 
         {this.state.showDisclaimer && (
-          <div className="form-group row">
+          <div className="private-message-form__row-alert form-group row">
             <div className="offset-sm-2 col-sm-10">
               <div className="alert alert-danger" role="alert">
                 <T i18nKey="private_message_disclaimer">
@@ -131,7 +131,7 @@ export class PrivateMessageForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="private-message-form__row-btns form-group row">
           <div className="offset-sm-2 col-sm-10">
             <button
               type="submit"
diff --git a/src/shared/components/private_message/private-message-report.tsx b/src/shared/components/private_message/private-message-report.tsx
index 602654816b..b8afcf5687 100644
--- a/src/shared/components/private_message/private-message-report.tsx
+++ b/src/shared/components/private_message/private-message-report.tsx
@@ -43,26 +43,26 @@ export class PrivateMessageReport extends Component<Props, State> {
     );
 
     return (
-      <div>
-        <div>
+      <div className="private-message-report__root">
+        <div className="private-message-report__row-creator">
           {i18n.t("creator")}:{" "}
           <PersonListing person={r.private_message_creator} />
         </div>
-        <div>
+        <div className="private-message-report__row-message">
           {i18n.t("message")}:
           <div
             className="md-div"
             dangerouslySetInnerHTML={mdToHtml(pmr.original_pm_text)}
           />
         </div>
-        <div>
+        <div className="private-message-report__row-reporter">
           {i18n.t("reporter")}: <PersonListing person={r.creator} />
         </div>
-        <div>
+        <div className="private-message-report__row-reason">
           {i18n.t("reason")}: {pmr.reason}
         </div>
         {r.resolver && (
-          <div>
+          <div className="private-message-report__row-resolver">
             {pmr.resolved ? (
               <T i18nKey="resolved_by">
                 #
@@ -77,7 +77,7 @@ export class PrivateMessageReport extends Component<Props, State> {
           </div>
         )}
         <button
-          className="btn btn-link btn-animate text-muted py-0"
+          className="private-message__report-btn btn btn-link btn-animate text-muted py-0"
           onClick={linkEvent(this, this.handleResolveReport)}
           data-tippy-content={tippyContent}
           aria-label={tippyContent}
diff --git a/src/shared/components/private_message/private-message.tsx b/src/shared/components/private_message/private-message.tsx
index 89571aca54..44ba8bd252 100644
--- a/src/shared/components/private_message/private-message.tsx
+++ b/src/shared/components/private_message/private-message.tsx
@@ -88,17 +88,17 @@ export class PrivateMessage extends Component<
       : message_view.creator;
 
     return (
-      <div className="border-top border-light">
+      <div className="private-message__root border-top border-light">
         <div>
-          <ul className="list-inline mb-0 text-muted small">
+          <ul className="private-message__ul list-inline mb-0 text-muted small">
             {/* TODO refactor this */}
-            <li className="list-inline-item">
+            <li className="private-message__li-me list-inline-item">
               {this.mine ? i18n.t("to") : i18n.t("from")}
             </li>
-            <li className="list-inline-item">
+            <li className="private-message__li-other list-inline-item">
               <PersonListing person={otherPerson} />
             </li>
-            <li className="list-inline-item">
+            <li className="private-message__li-when list-inline-item">
               <span>
                 <MomentTime
                   published={message_view.private_message.published}
@@ -106,7 +106,7 @@ export class PrivateMessage extends Component<
                 />
               </span>
             </li>
-            <li className="list-inline-item">
+            <li className="private-message__li-exp list-inline-item">
               <div
                 role="button"
                 className="pointer text-monospace"
@@ -129,7 +129,7 @@ export class PrivateMessage extends Component<
             />
           )}
           {!this.state.showEdit && !this.state.collapsed && (
-            <div>
+            <div className="private-message-edit__root">
               {this.state.viewSource ? (
                 <pre>{this.messageUnlessRemoved}</pre>
               ) : (
@@ -141,7 +141,7 @@ export class PrivateMessage extends Component<
               <ul className="list-inline mb-0 text-muted font-weight-bold">
                 {!this.mine && (
                   <>
-                    <li className="list-inline-item">
+                    <li className="private-message-edit__li-btns list-inline-item">
                       <button
                         className="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleMarkRead)}
@@ -169,8 +169,10 @@ export class PrivateMessage extends Component<
                         )}
                       </button>
                     </li>
-                    <li className="list-inline-item">{this.reportButton}</li>
-                    <li className="list-inline-item">
+                    <li className="private-message-edit__li-report list-inline-item">
+                      {this.reportButton}
+                    </li>
+                    <li className="private-message-edit__li-btns list-inline-item">
                       <button
                         className="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleReplyClick)}
@@ -184,7 +186,7 @@ export class PrivateMessage extends Component<
                 )}
                 {this.mine && (
                   <>
-                    <li className="list-inline-item">
+                    <li className="private-message-edit__li-edit list-inline-item">
                       <button
                         className="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleEditClick)}
@@ -194,7 +196,7 @@ export class PrivateMessage extends Component<
                         <Icon icon="edit" classes="icon-inline" />
                       </button>
                     </li>
-                    <li className="list-inline-item">
+                    <li className="private-message-edit__li-delete-restore list-inline-item">
                       <button
                         className="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleDeleteClick)}
@@ -224,7 +226,7 @@ export class PrivateMessage extends Component<
                     </li>
                   </>
                 )}
-                <li className="list-inline-item">
+                <li className="private-message-edit__li-view-source list-inline-item">
                   <button
                     className="btn btn-link btn-animate text-muted"
                     onClick={linkEvent(this, this.handleViewSource)}
@@ -245,7 +247,7 @@ export class PrivateMessage extends Component<
         </div>
         {this.state.showReportDialog && (
           <form
-            className="form-inline"
+            className="report-dialog__root form-inline"
             onSubmit={linkEvent(this, this.handleReportSubmit)}
           >
             <label className="sr-only" htmlFor="pm-report-reason">
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 054cab016b..ae69db2aa9 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -455,7 +455,7 @@ export class Search extends Component<any, SearchState> {
     const { type, page } = getSearchQueryParams();
 
     return (
-      <div className="container-lg">
+      <div className="search__root container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}