diff --git a/web/libs/editor/src/common/Button/Button.tsx b/web/libs/editor/src/common/Button/Button.tsx
index 07b0ac064a39..9beb8ad4cbf2 100644
--- a/web/libs/editor/src/common/Button/Button.tsx
+++ b/web/libs/editor/src/common/Button/Button.tsx
@@ -8,11 +8,10 @@ import {
   forwardRef,
   type ForwardRefExoticComponent,
   useMemo,
-  createElement,
 } from "react";
 import { Hotkey } from "../../core/Hotkey";
 import { useHotkey } from "../../hooks/useHotkey";
-import { cn, type CNTagName } from "../../utils/bem";
+import { Block, type CNTagName, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import "./Button.scss";
 
@@ -108,19 +107,18 @@ export const Button: ButtonType<ButtonProps> = forwardRef(
 
     useHotkey(hotkey, rest.onClick as unknown as Keymaster.KeyHandler, hotkeyScope);
 
-    const buttonBody = createElement(
-      finalTag as any,
-      {
-        ref,
-        type,
-        ...rest,
-        className: cn("button").mod(mods).mix(className).toClassName(),
-      },
-      <>
-        {iconElem && <span className={cn("button").elem("icon").toClassName()}>{iconElem}</span>}
-        {iconElem && children ? <span>{children}</span> : children}
-        {extra !== undefined ? <div className={cn("button").elem("extra").toClassName()}>{extra}</div> : null}
-      </>,
+    const buttonBody = (
+      <Block name="button" mod={mods} mix={className} ref={ref} tag={finalTag} type={type} {...rest}>
+        <>
+          {iconElem && (
+            <Elem tag="span" name="icon">
+              {iconElem}
+            </Elem>
+          )}
+          {iconElem && children ? <span>{children}</span> : children}
+          {extra !== undefined ? <Elem name="extra">{extra}</Elem> : null}
+        </>
+      </Block>
     );
 
     if (
@@ -149,7 +147,11 @@ export const Button: ButtonType<ButtonProps> = forwardRef(
 Button.displayName = "Button";
 
 const Group: FC<ButtonGroupProps> = ({ className, children, collapsed }) => {
-  return <div className={cn("button-group").mod({ collapsed }).mix(className).toClassName()}>{children}</div>;
+  return (
+    <Block name="button-group" mod={{ collapsed }} mix={className}>
+      {children}
+    </Block>
+  );
 };
 
 Button.Group = Group;
diff --git a/web/libs/editor/src/common/Dropdown/DropdownComponent.tsx b/web/libs/editor/src/common/Dropdown/DropdownComponent.tsx
index 2a2c427e9927..43d1487aedea 100644
--- a/web/libs/editor/src/common/Dropdown/DropdownComponent.tsx
+++ b/web/libs/editor/src/common/Dropdown/DropdownComponent.tsx
@@ -12,7 +12,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { useFullscreen } from "../../hooks/useFullscreen";
-import { cn } from "../../utils/bem";
+import { Block, cn } from "../../utils/bem";
 import { alignElements, type Align } from "@humansignal/core/lib/utils/dom";
 import { aroundTransition } from "@humansignal/core/lib/utils/transition";
 import "./Dropdown.scss";
@@ -213,10 +213,11 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
     }, [props.style, dropdownIndex, minIndex, offset]);
 
     const result = (
-      <div
-        ref={dropdown as any}
+      <Block
+        ref={dropdown}
+        name="dropdown"
         data-testid={props.dataTestId}
-        className={rootName.mix(props.className, visibilityClasses).toClassName()}
+        mix={[props.className, visibilityClasses]}
         style={{
           ...compositeStyles,
           borderRadius: isFF(FF_DEV_3873) && 4,
@@ -224,7 +225,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
         onClick={(e: MouseEvent) => e.stopPropagation()}
       >
         {content}
-      </div>
+      </Block>
     );
 
     return props.inline === true ? result : createPortal(result, document.body);
diff --git a/web/libs/editor/src/common/Icon/Icon.jsx b/web/libs/editor/src/common/Icon/Icon.jsx
index 9562ac8c59e5..0e12b84f62cb 100644
--- a/web/libs/editor/src/common/Icon/Icon.jsx
+++ b/web/libs/editor/src/common/Icon/Icon.jsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { cn } from "../../utils/bem";
+import { Block } from "../../utils/bem";
 import "./Icon.scss";
 
 export const Icon = React.forwardRef(({ icon, ...props }, ref) => {
   return (
-    <span ref={ref} className={cn("icon").toClassName()}>
+    <Block tag="span" name="icon" ref={ref}>
       {React.createElement(icon, props)}
-    </span>
+    </Block>
   );
 });
diff --git a/web/libs/editor/src/common/Label/Label.jsx b/web/libs/editor/src/common/Label/Label.jsx
index ff0eca475f5a..2f8a9bf06dbd 100644
--- a/web/libs/editor/src/common/Label/Label.jsx
+++ b/web/libs/editor/src/common/Label/Label.jsx
@@ -1,5 +1,5 @@
-import { createElement, forwardRef } from "react";
-import { cn } from "../../utils/bem";
+import { forwardRef } from "react";
+import { Block, Elem } from "../../utils/bem";
 import "./Label.scss";
 
 export const Label = forwardRef(
@@ -14,21 +14,16 @@ export const Label = forwardRef(
       empty: !children,
     };
 
-    return createElement(
-      tagName,
-      {
-        ref,
-        style,
-        "data-required": required,
-        className: cn("field-label").mod(mods).toClassName(),
-      },
-      <div className={cn("field-label").elem("text").toClassName()}>
-        <div className={cn("field-label").elem("content").toClassName()}>
-          {text}
-          {description && <div className={cn("field-label").elem("description").toClassName()}>{description}</div>}
-        </div>
-      </div>,
-      <div className={cn("field-label").elem("field").toClassName()}>{children}</div>,
+    return (
+      <Block ref={ref} name="field-label" mod={mods} tag={tagName} style={style} data-required={required}>
+        <Elem name="text">
+          <Elem name="content">
+            {text}
+            {description && <Elem name="description">{description}</Elem>}
+          </Elem>
+        </Elem>
+        <Elem name="field">{children}</Elem>
+      </Block>
     );
   },
 );
diff --git a/web/libs/editor/src/common/Menu/Menu.jsx b/web/libs/editor/src/common/Menu/Menu.jsx
index 327b2e94248a..1d5921f61b2c 100644
--- a/web/libs/editor/src/common/Menu/Menu.jsx
+++ b/web/libs/editor/src/common/Menu/Menu.jsx
@@ -1,5 +1,5 @@
 import { forwardRef, useCallback, useMemo } from "react";
-import { cn } from "../../utils/bem";
+import { Block, cn } from "../../utils/bem";
 import { useDropdown } from "../Dropdown/DropdownTrigger";
 import "./Menu.scss";
 import { MenuContext } from "./MenuContext";
@@ -34,14 +34,17 @@ export const Menu = forwardRef(
 
     return (
       <MenuContext.Provider value={contextValue}>
-        <ul
+        <Block
           ref={ref}
-          className={cn("menu").mod({ size, collapsed }).mix(className).toClassName()}
+          tag="ul"
+          name="menu"
+          mod={{ size, collapsed }}
+          mix={className}
           style={style}
           onClick={clickHandler}
         >
           {children}
-        </ul>
+        </Block>
       </MenuContext.Provider>
     );
   },
diff --git a/web/libs/editor/src/common/Pagination/Pagination.tsx b/web/libs/editor/src/common/Pagination/Pagination.tsx
index c25dbd762607..bc084a3f7e30 100644
--- a/web/libs/editor/src/common/Pagination/Pagination.tsx
+++ b/web/libs/editor/src/common/Pagination/Pagination.tsx
@@ -1,5 +1,5 @@
 import { type ChangeEvent, type FC, forwardRef, type KeyboardEvent, useCallback, useMemo, useState } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { Select } from "@humansignal/ui";
 import { WithHotkey } from "../Hotkey/WithHotkey";
 import "./Pagination.scss";
@@ -66,15 +66,15 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
     }, [pageSizeOptions]);
 
     return (
-      <div className={cn("pagination").mod({ size, outline, align, noPadding, disabled }).toClassName()}>
-        <div className={cn("pagination").elem("navigation").toClassName()}>
+      <Block name="pagination" mod={{ size, outline, align, noPadding, disabled }}>
+        <Elem name="navigation">
           <>
             <NavigationButton
               mod={["arrow-left", "arrow-left-double"]}
               onClick={() => onChange?.(1)}
               disabled={currentPage === 1 || disabled}
             />
-            <div className={cn("pagination").elem("divider").toClassName()} />
+            <Elem name="divider" />
           </>
           <NavigationButton
             mod={["arrow-left"]}
@@ -82,7 +82,7 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
             hotkey={hotkey?.prev}
             disabled={currentPage === 1 || disabled}
           />
-          <div className={cn("pagination").elem("input").toClassName()}>
+          <Elem name="input">
             {inputMode ? (
               <input
                 type="text"
@@ -116,8 +116,8 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
                 }}
               />
             ) : (
-              <div
-                className={cn("pagination").elem("page-indicator").toClassName()}
+              <Elem
+                name="page-indicator"
                 onClick={() => {
                   setInputMode(true);
                 }}
@@ -128,9 +128,9 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
                     /*  */
                   }}
                 />
-              </div>
+              </Elem>
             )}
-          </div>
+          </Elem>
           <NavigationButton
             mod={["arrow-right"]}
             onClick={() => onChange?.(currentPage + 1)}
@@ -138,20 +138,20 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
             hotkey={hotkey?.next}
           />
           <>
-            <div className={cn("pagination").elem("divider").toClassName()} />
+            <Elem name="divider" />
             <NavigationButton
               mod={["arrow-right", "arrow-right-double"]}
               onClick={() => onChange?.(totalPages)}
               disabled={currentPage === totalPages || disabled}
             />
           </>
-        </div>
+        </Elem>
         {pageSizeSelectable && (
-          <div className={cn("pagination").elem("page-size").toClassName()}>
+          <Elem name="page-size">
             <Select value={pageSize} onChange={handleChangeSelect} options={options} />
-          </div>
+          </Elem>
         )}
-      </div>
+      </Block>
     );
   },
 );
@@ -174,7 +174,7 @@ const NavigationButton: FC<NavigationButtonProps> = ({ mod, disabled, hotkey, on
 
   return (
     <WithHotkey binging={hotkey as HotkeyList}>
-      <div className={cn("pagination").elem("btn").mod(buttonMod).toClassName()} onClick={actionHandler} />
+      <Elem name="btn" mod={buttonMod} onClick={actionHandler} />
     </WithHotkey>
   );
 };
diff --git a/web/libs/editor/src/common/Range/Range.tsx b/web/libs/editor/src/common/Range/Range.tsx
index 371acf7e8fad..46d6141e9ddd 100644
--- a/web/libs/editor/src/common/Range/Range.tsx
+++ b/web/libs/editor/src/common/Range/Range.tsx
@@ -1,5 +1,5 @@
 import { type CSSProperties, type FC, type MouseEvent as RMouseEvent, useCallback } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { clamp, isDefined } from "../../utils/utilities";
 import { useValueTracker } from "../Utils/useValueTracker";
 import "./Range.scss";
@@ -138,20 +138,20 @@ export const Range: FC<RangeProps> = ({
   const sizeProperty = align === "horizontal" ? "minWidth" : "minHeight";
 
   return (
-    <div className={cn("range").mod({ align }).toClassName()} style={{ [sizeProperty]: size }}>
+    <Block name="range" mod={{ align }} style={{ [sizeProperty]: size }}>
       {reverse
         ? maxIcon && (
-            <div className={cn("range").elem("icon").toClassName()} onMouseDown={increase}>
+            <Elem name="icon" onMouseDown={increase}>
               {maxIcon}
-            </div>
+            </Elem>
           )
         : minIcon && (
-            <div className={cn("range").elem("icon").toClassName()} onMouseDown={decrease}>
+            <Elem name="icon" onMouseDown={decrease}>
               {minIcon}
-            </div>
+            </Elem>
           )}
-      <div className={cn("range").elem("body").toClassName()} onClick={onClick}>
-        <div className={cn("range").elem("line").toClassName()} />
+      <Elem name="body" onClick={onClick}>
+        <Elem name="line" />
         <RangeIndicator align={align} reverse={reverse} value={currentValue} valueConvert={valueToPercentage} />
         {isMultiArray ? (
           arrayReverse(currentValue, reverse).map((value, i) => {
@@ -196,19 +196,19 @@ export const Range: FC<RangeProps> = ({
             onChange={(val) => updateValue(val, true, true)}
           />
         )}
-      </div>
+      </Elem>
       {reverse
         ? minIcon && (
-            <div className={cn("range").elem("icon").toClassName()} onMouseDown={decrease}>
+            <Elem name="icon" onMouseDown={decrease}>
               {minIcon}
-            </div>
+            </Elem>
           )
         : maxIcon && (
-            <div className={cn("range").elem("icon").toClassName()} onMouseDown={increase}>
+            <Elem name="icon" onMouseDown={increase}>
               {maxIcon}
-            </div>
+            </Elem>
           )}
-    </div>
+    </Block>
   );
 };
 
@@ -276,8 +276,8 @@ const RangeHandle: FC<RangeHandleProps> = ({
   };
 
   return (
-    <div
-      className={cn("range").elem("range-handle").toClassName()}
+    <Elem
+      name="range-handle"
       style={{ [offsetProperty]: `${valueConvert(value)}%` }}
       onMouseDownCapture={handleMouseDown}
       onDoubleClick={handleDoubleClick}
@@ -318,5 +318,5 @@ const RangeIndicator: FC<RangeIndicatorProps> = ({ value, valueConvert, align, r
     if (reverse && !multi) [style.top, style.bottom] = [style.bottom, style.top];
   }
 
-  return <div className={cn("range").elem("indicator").toClassName()} style={style} />;
+  return <Elem name="indicator" style={style} />;
 };
diff --git a/web/libs/editor/src/common/Space/Space.tsx b/web/libs/editor/src/common/Space/Space.tsx
index 9b5f55211d77..8d81545e4e63 100644
--- a/web/libs/editor/src/common/Space/Space.tsx
+++ b/web/libs/editor/src/common/Space/Space.tsx
@@ -1,8 +1,9 @@
 import type { CSSProperties, FC } from "react";
-
-import { cn } from "../../utils/bem";
+import { BemWithSpecificContext } from "../../utils/bem";
 import "./Space.scss";
 
+const { Block } = BemWithSpecificContext();
+
 export interface SpaceProps {
   direction?: "horizontal" | "vertical";
   size?: "small" | "medium" | "large" | "none";
@@ -29,15 +30,14 @@ export const Space: FC<SpaceProps> = ({
   ...rest
 }) => {
   return (
-    <div
+    <Block
+      name="space"
+      mod={{ direction, size, spread, stretch, align, collapsed, truncated }}
+      mix={className}
       style={style}
       {...rest}
-      className={cn("space")
-        .mod({ direction, size, spread, stretch, align, collapsed, truncated })
-        .mix(className)
-        .toClassName()}
     >
       {children}
-    </div>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx b/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx
index ec7e89b17031..9ef34aa43e0c 100644
--- a/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx
+++ b/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx
@@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
 import { IconCheck, IconCross } from "@humansignal/icons";
 import { Button, Toggle } from "@humansignal/ui";
 import { Space } from "../../common/Space/Space";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 
 import "./AutoAcceptToggle.scss";
 
@@ -27,27 +27,31 @@ export const AutoAcceptToggle = injector(
     const loading = store.awaitingSuggestions;
 
     return (
-      <div className={cn("auto-accept").toClassName()}>
+      <Block name="auto-accept">
         {withSuggestions && (
-          <div className={cn("auto-accept").elem("wrapper").mod({ loading }).toClassName()}>
+          <Elem name="wrapper" mod={{ loading }}>
             <Space spread>
               {suggestions.size > 0 ? (
                 <Space size="small">
-                  <div className={cn("auto-accept").elem("info").toClassName()}>
+                  <Elem name="info">
                     {suggestions.size} suggestion{suggestions.size > 0 && "s"}
-                  </div>
-                  <Button
-                    className={cn("auto-accept").elem("action").mod({ type: "reject" }).toClassName()}
+                  </Elem>
+                  <Elem
+                    name="action"
+                    tag={Button}
+                    mod={{ type: "reject" }}
                     onClick={() => annotation.rejectAllSuggestions()}
                   >
                     <IconCross />
-                  </Button>
-                  <Button
-                    className={cn("auto-accept").elem("action").mod({ type: "accept" }).toClassName()}
+                  </Elem>
+                  <Elem
+                    name="action"
+                    tag={Button}
+                    mod={{ type: "accept" }}
                     onClick={() => annotation.acceptAllSuggestions()}
                   >
                     <IconCheck />
-                  </Button>
+                  </Elem>
                 </Space>
               ) : (
                 <Toggle
@@ -57,10 +61,10 @@ export const AutoAcceptToggle = injector(
                 />
               )}
             </Space>
-          </div>
+          </Elem>
         )}
-        {loading && <div className={cn("auto-accept").elem("spinner").toClassName()} />}
-      </div>
+        {loading && <Elem name="spinner" />}
+      </Block>
     );
   }),
 );
diff --git a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx b/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx
index 8a038948343e..367ddf0cf595 100644
--- a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx
+++ b/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { Space } from "../../common/Space/Space";
 import { Toggle } from "@humansignal/ui";
 import ToolsManager from "../../tools/Manager";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import "./DynamicPreannotationsToggle.scss";
 
 export const DynamicPreannotationsToggle = inject("store")(
@@ -15,8 +15,8 @@ export const DynamicPreannotationsToggle = inject("store")(
     }, [enabled]);
 
     return enabled ? (
-      <div className={cn("dynamic-preannotations").toClassName()}>
-        <div className={cn("dynamic-preannotations").elem("wrapper").toClassName()}>
+      <Block name="dynamic-preannotations">
+        <Elem name="wrapper">
           <Space spread>
             <Toggle
               checked={store.autoAnnotation}
@@ -32,8 +32,8 @@ export const DynamicPreannotationsToggle = inject("store")(
               label="Auto-Annotation"
             />
           </Space>
-        </div>
-      </div>
+        </Elem>
+      </Block>
     ) : null;
   }),
 );
diff --git a/web/libs/editor/src/components/AnnotationTabs/AnnotationTabs.jsx b/web/libs/editor/src/components/AnnotationTabs/AnnotationTabs.jsx
index 5dc58c7d7c54..edceaa3348a8 100644
--- a/web/libs/editor/src/components/AnnotationTabs/AnnotationTabs.jsx
+++ b/web/libs/editor/src/components/AnnotationTabs/AnnotationTabs.jsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { IconBan, IconSparks, IconStar } from "@humansignal/icons";
 import { Userpic } from "@humansignal/ui";
 import { Space } from "../../common/Space/Space";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import "./AnnotationTabs.scss";
 
 export const EntityTab = observer(
@@ -13,9 +13,10 @@ export const EntityTab = observer(
       const infoIsHidden = entity.store.hasInterface("annotations:hide-info");
 
       return (
-        <div
+        <Block
+          name="entity-tab"
           ref={ref}
-          className={cn("entity-tab").mod({ selected, bordered }).toClassName()}
+          mod={{ selected, bordered }}
           style={style}
           onClick={(e) => {
             e.preventDefault();
@@ -24,28 +25,28 @@ export const EntityTab = observer(
           }}
         >
           <Space size="small">
-            <Userpic
-              className={cn("entity-tab").elem("userpic").mod({ prediction }).toClassName()}
+            <Elem
+              name="userpic"
+              tag={Userpic}
               showUsername
               username={prediction ? entity.createdBy : null}
               user={infoIsHidden ? {} : (entity.user ?? { email: entity.createdBy })}
+              mod={{ prediction }}
             >
               {prediction && <IconSparks style={{ width: 16, height: 16 }} />}
-            </Userpic>
+            </Elem>
 
             {!infoIsHidden && (
-              <div className={cn("entity-tab").elem("identifier").toClassName()}>
+              <Elem name="identifier">
                 ID {entity.pk ?? entity.id} {isUnsaved && "*"}
-              </div>
+              </Elem>
             )}
 
-            {displayGroundTruth && entity.ground_truth && (
-              <IconStar className={cn("entity-tab").elem("ground-truth").toClassName()} />
-            )}
+            {displayGroundTruth && entity.ground_truth && <Elem name="ground-truth" tag={IconStar} />}
 
-            {entity.skipped && <IconBan className={cn("entity-tab").elem("skipped").toClassName()} />}
+            {entity.skipped && <Elem name="skipped" tag={IconBan} />}
           </Space>
-        </div>
+        </Block>
       );
     },
   ),
diff --git a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx
index 83232ce5e0eb..cf8480bd035e 100644
--- a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx
+++ b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { inject, observer } from "mobx-react";
 import { useCopyText } from "@humansignal/core";
 import { isDefined, userDisplayName } from "@humansignal/core/lib/utils/helpers";
-import { cn } from "../../utils/bem";
+import { Block, cn, Elem } from "../../utils/bem";
 import {
   IconAnnotationGroundTruth,
   IconAnnotationSkipped2,
@@ -212,20 +212,20 @@ export const AnnotationButton = observer(
     );
 
     return (
-      <div className={cn("annotation-button").mod({ selected: entity.selected }).toClassName()}>
-        <div className={cn("annotation-button").elem("mainSection").toClassName()} onClick={clickHandler}>
-          <div className={cn("annotation-button").elem("picSection").toClassName()}>
-            <Userpic
-              className={cn("annotation-button").elem("userpic").mod({ prediction: isPrediction }).toClassName()}
+      <Block name="annotation-button" mod={{ selected: entity.selected }}>
+        <Elem name="mainSection" onClick={clickHandler}>
+          <Elem name="picSection">
+            <Elem
+              name="userpic"
+              tag={Userpic}
               showUsername
               username={isPrediction ? entity.createdBy : null}
               user={hiddenUser ?? entity.user ?? { email: entity.createdBy }}
+              mod={{ prediction: isPrediction }}
               size={24}
-              block="lsf-annotation-button"
             >
               {isPrediction && <IconSparks style={{ width: 18, height: 18 }} />}
-            </Userpic>
-            {/* TODO: Remove block. Selenium is using this anchor that was mistakenly propagated into this element. */}
+            </Elem>
             {/* to do: return these icons when we have a better way to grab the history action type */}
             {/* {historyActionType === 'accepted' && <Elem name='status' mod={{ approved: true }}><IconCheckBold /></Elem>}
           {historyActionType && (
@@ -238,62 +238,62 @@ export const AnnotationButton = observer(
               <IconCheckBold />
             </Elem>
           )} */}
-          </div>
-          <div className={cn("annotation-button").elem("main").toClassName()}>
-            <div className={cn("annotation-button").elem("user").toClassName()}>
-              <span className={cn("annotation-button").elem("name").toClassName()}>
+          </Elem>
+          <Elem name="main">
+            <Elem name="user">
+              <Elem tag="span" name="name">
                 {hiddenUser ? hiddenUser.email : username}
-              </span>
+              </Elem>
               {!infoIsHidden && (
-                <span className={cn("annotation-button").elem("entity-id").toClassName()}>
+                <Elem tag="span" name="entity-id">
                   #{entity.pk ?? entity.id}
-                </span>
+                </Elem>
               )}
-            </div>
+            </Elem>
             {!infoIsHidden && (
-              <div className={cn("annotation-button").elem("info").toClassName()}>
-                <TimeAgo className={cn("annotation-button").elem("date").toClassName()} date={entity.createdDate} />
+              <Elem name="info">
+                <Elem name="date" component={TimeAgo} date={entity.createdDate} />
                 {isPrediction && isDefined(entity.score) && (
                   <span title={`Prediction score = ${entity.score}`}>
                     {" · "} {(entity.score * 100).toFixed(2)}%
                   </span>
                 )}
-              </div>
+              </Elem>
             )}
-          </div>
+          </Elem>
           {!isPrediction && (
-            <div className={cn("annotation-button").elem("icons").toClassName()}>
+            <Elem name="icons">
               {entity.draftId > 0 && (
                 <Tooltip title="Draft">
-                  <div className={cn("annotation-button").elem("icon").mod({ draft: true }).toClassName()}>
+                  <Elem name="icon" mod={{ draft: true }}>
                     <IconDraftCreated2 color="#617ADA" />
-                  </div>
+                  </Elem>
                 </Tooltip>
               )}
               {entity.skipped && (
                 <Tooltip title="Skipped">
-                  <div className={cn("annotation-button").elem("icon").mod({ skipped: true }).toClassName()}>
+                  <Elem name="icon" mod={{ skipped: true }}>
                     <IconAnnotationSkipped2 color="#DD0000" />
-                  </div>
+                  </Elem>
                 </Tooltip>
               )}
               {isGroundTruth && (
                 <Tooltip title="Ground-truth">
-                  <div className={cn("annotation-button").elem("icon").mod({ groundTruth: true }).toClassName()}>
+                  <Elem name="icon" mod={{ groundTruth: true }}>
                     <IconAnnotationGroundTruth />
-                  </div>
+                  </Elem>
                 </Tooltip>
               )}
               {CommentIcon && (
                 <Tooltip title={renderCommentTooltip(entity)}>
-                  <div className={cn("annotation-button").elem("icon").mod({ comments: true }).toClassName()}>
+                  <Elem name="icon" mod={{ comments: true }}>
                     <CommentIcon />
-                  </div>
+                  </Elem>
                 </Tooltip>
               )}
-            </div>
+            </Elem>
           )}
-        </div>
+        </Elem>
         <ContextMenuTrigger
           className={cn("annotation-button").elem("trigger").toClassName()}
           content={
@@ -304,7 +304,7 @@ export const AnnotationButton = observer(
             />
           }
         />
-      </div>
+      </Block>
     );
   },
 );
diff --git a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx
index aec5edc02a17..853978097a60 100644
--- a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx
+++ b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx
@@ -1,7 +1,7 @@
 import { Button, IconChevronLeft, IconChevronRight } from "@humansignal/ui";
 import { observer } from "mobx-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { clamp, sortAnnotations } from "../../utils/utilities";
 import { AnnotationButton } from "./AnnotationButton";
 import "./AnnotationsCarousel.scss";
@@ -62,14 +62,13 @@ export const AnnotationsCarousel = observer(({ store, annotationStore }: Annotat
   }, [annotationStore, JSON.stringify(annotationStore.predictions), JSON.stringify(annotationStore.annotations)]);
 
   return enableAnnotations || enablePredictions || enableCreateAnnotation ? (
-    <div
-      className={cn("annotations-carousel")
-        .mod({ scrolled: currentPosition > 0 })
-        .toClassName()}
-      style={{ "--carousel-left": `${currentPosition}px` } as any}
+    <Block
+      name="annotations-carousel"
+      mod={{ scrolled: currentPosition > 0 }}
+      style={{ "--carousel-left": `${currentPosition}px` }}
     >
-      <div ref={containerRef as any} className={cn("annotations-carousel").elem("container").toClassName()}>
-        <div ref={carouselRef as any} className={cn("annotations-carousel").elem("carosel").toClassName()}>
+      <Elem ref={containerRef} name="container">
+        <Elem ref={carouselRef} name="carosel">
           {sortAnnotations(entities).map((entity) => (
             <AnnotationButton
               key={entity?.id}
@@ -84,10 +83,10 @@ export const AnnotationsCarousel = observer(({ store, annotationStore }: Annotat
               annotationStore={annotationStore}
             />
           ))}
-        </div>
-      </div>
+        </Elem>
+      </Elem>
       {(!isLeftDisabled || !isRightDisabled) && (
-        <div className={cn("annotations-carousel").elem("carousel-controls").toClassName()}>
+        <Elem name="carousel-controls">
           <Button
             disabled={isLeftDisabled}
             aria-label="Carousel left"
@@ -106,8 +105,8 @@ export const AnnotationsCarousel = observer(({ store, annotationStore }: Annotat
           >
             <IconChevronRight />
           </Button>
-        </div>
+        </Elem>
       )}
-    </div>
+    </Block>
   ) : null;
 });
diff --git a/web/libs/editor/src/components/App/App.jsx b/web/libs/editor/src/components/App/App.jsx
index 988e169f35bf..c8ddaadcd67f 100644
--- a/web/libs/editor/src/components/App/App.jsx
+++ b/web/libs/editor/src/components/App/App.jsx
@@ -25,7 +25,7 @@ import "../../tags/Custom";
  */
 import { Space } from "../../common/Space/Space";
 import { Button } from "@humansignal/ui";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { isSelfServe } from "../../utils/billing";
 import {
   FF_BULK_ANNOTATION,
@@ -74,24 +74,24 @@ class App extends Component {
 
   renderSuccess() {
     return (
-      <div className={cn("editor").toClassName()}>
+      <Block name="editor">
         <Result status="success" title={getEnv(this.props.store).messages.DONE} />
-      </div>
+      </Block>
     );
   }
 
   renderNoAnnotation() {
     return (
-      <div className={cn("editor").toClassName()}>
+      <Block name="editor">
         <Result status="success" title={getEnv(this.props.store).messages.NO_COMP_LEFT} />
-      </div>
+      </Block>
     );
   }
 
   renderNothingToLabel(store) {
     return (
-      <div
-        className={cn("editor").toClassName()}
+      <Block
+        name="editor"
         style={{
           display: "flex",
           alignItems: "center",
@@ -101,7 +101,7 @@ class App extends Component {
         }}
       >
         <Result status="success" title={getEnv(this.props.store).messages.NO_NEXT_TASK} />
-        <div className={cn("sub__result").toClassName()}>All tasks in the queue have been completed</div>
+        <Block name="sub__result">All tasks in the queue have been completed</Block>
         {store.taskHistory.length > 0 && (
           <Button
             onClick={(e) => store.prevTask(e, true)}
@@ -112,28 +112,26 @@ class App extends Component {
             Go to Previous Task
           </Button>
         )}
-      </div>
+      </Block>
     );
   }
 
   renderNoAccess() {
     return (
-      <div className={cn("editor").toClassName()}>
+      <Block name="editor">
         <Result status="warning" title={getEnv(this.props.store).messages.NO_ACCESS} />
-      </div>
+      </Block>
     );
   }
 
   renderConfigValidationException(store) {
     return (
-      <div className={cn("main-view").toClassName()}>
-        <div className={cn("main-view").elem("annotation").toClassName()}>
+      <Block name="main-view">
+        <Elem name="annotation">
           <TreeValidation errors={this.props.store.annotationStore.validation} />
-        </div>
-        {!isFF(FF_DEV_3873) && store.hasInterface("infobar") && (
-          <div className={cn("main-view").elem("infobar").toClassName()}>Task #{store.task.id}</div>
-        )}
-      </div>
+        </Elem>
+        {!isFF(FF_DEV_3873) && store.hasInterface("infobar") && <Elem name="infobar">Task #{store.task.id}</Elem>}
+      </Block>
     );
   }
 
@@ -145,18 +143,14 @@ class App extends Component {
     if (as.viewingAll) return this.renderAllAnnotations();
 
     return (
-      <div
-        key={(as.selectedHistory ?? as.selected)?.id}
-        className={cn("main-view").toClassName()}
-        onScrollCapture={this._notifyScroll}
-      >
-        <div className={cn("main-view").elem("annotation").toClassName()}>
+      <Block key={(as.selectedHistory ?? as.selected)?.id} name="main-view" onScrollCapture={this._notifyScroll}>
+        <Elem name="annotation">
           {<Annotation root={root} annotation={as.selected} />}
           {this.renderRelations(as.selected)}
           {isFF(FF_PER_FIELD_COMMENTS) && this.renderCommentsOverlay(as.selected)}
-        </div>
+        </Elem>
         {!isFF(FF_DEV_3873) && getRoot(as).hasInterface("infobar") && this._renderInfobar(as)}
-      </div>
+      </Block>
     );
   }
 
@@ -164,11 +158,11 @@ class App extends Component {
     const { id, queue } = getRoot(as).task;
 
     return (
-      <Space className={cn("main-view").elem("infobar").toClassName()} size="small">
+      <Elem name="infobar" tag={Space} size="small">
         <span>Task #{id}</span>
 
         {queue && <span>{queue}</span>}
-      </Space>
+      </Elem>
     );
   }
 
@@ -227,23 +221,20 @@ class App extends Component {
 
     // tags can be styled in config when user is awaiting for suggestions from ML backend
     const mainContent = (
-      <div
-        className={cn("main-content")
-          .mix(...(store.awaitingSuggestions ? ["requesting"] : []))
-          .toClassName()}
-      >
+      <Block name="main-content" mix={store.awaitingSuggestions ? ["requesting"] : []}>
         {as.validation === null
           ? this._renderUI(as.selectedHistory?.root ?? root, as)
           : this.renderConfigValidationException(store)}
-      </div>
+      </Block>
     );
 
     const isBulkMode = isFF(FF_BULK_ANNOTATION) && !isSelfServe() && store.hasInterface("annotation:bulk");
     const newUIEnabled = isFF(FF_DEV_3873);
 
     return (
-      <div
-        className={cn("editor").mod({ fullscreen: settings.fullscreen }).toClassName()}
+      <Block
+        name="editor"
+        mod={{ fullscreen: settings.fullscreen }}
         ref={isFF(FF_LSDV_4620_3_ML) ? reactCleaner(this) : null}
       >
         <Settings store={store} />
@@ -269,14 +260,13 @@ class App extends Component {
             )}
 
             {isDefined(store) && store.hasInterface("topbar") && <TopBar store={store} />}
-            <div
-              className={cn("wrapper")
-                .mod({
-                  viewAll: viewingAll,
-                  bsp: settings.effectiveBottomSidePanel,
-                  showingBottomBar: newUIEnabled,
-                })
-                .toClassName()}
+            <Block
+              name="wrapper"
+              mod={{
+                viewAll: viewingAll,
+                bsp: settings.effectiveBottomSidePanel,
+                showingBottomBar: newUIEnabled,
+              }}
             >
               {newUIEnabled ? (
                 isBulkMode || !store.hasInterface("side-column") ? (
@@ -307,12 +297,12 @@ class App extends Component {
                   {mainContent}
                 </SidePanels>
               )}
-            </div>
+            </Block>
             <ToastViewport />
           </ToastProvider>
         </Provider>
         {store.hasInterface("debug") && <Debug store={store} />}
-      </div>
+      </Block>
     );
   }
 
diff --git a/web/libs/editor/src/components/BottomBar/Actions.jsx b/web/libs/editor/src/components/BottomBar/Actions.jsx
index 5856c06e49ce..6df74c5c779d 100644
--- a/web/libs/editor/src/components/BottomBar/Actions.jsx
+++ b/web/libs/editor/src/components/BottomBar/Actions.jsx
@@ -1,8 +1,8 @@
 import { IconInfoOutline, IconSettings } from "@humansignal/icons";
 import { Button, Space } from "@humansignal/ui";
-import { cn } from "../../utils/bem";
+import { Elem } from "../../utils/bem";
 import { isSelfServe } from "../../utils/billing";
-import { FF_BULK_ANNOTATION, isFF } from "../../utils/feature-flags";
+import { FF_BULK_ANNOTATION } from "../../utils/feature-flags";
 import { AutoAcceptToggle } from "../AnnotationTab/AutoAcceptToggle";
 import { DynamicPreannotationsToggle } from "../AnnotationTab/DynamicPreannotationsToggle";
 import { GroundTruth } from "../CurrentEntity/GroundTruth";
@@ -48,10 +48,10 @@ export const Actions = ({ store }) => {
       {store.hasInterface("ground-truth") && !isBulkMode && <GroundTruth entity={entity} />}
 
       {!isViewAll && (
-        <div className={cn("bottombar").elem("section").toClassName()}>
+        <Elem name="section">
           <DynamicPreannotationsToggle />
           <AutoAcceptToggle />
-        </div>
+        </Elem>
       )}
     </Space>
   );
diff --git a/web/libs/editor/src/components/BottomBar/BottomBar.jsx b/web/libs/editor/src/components/BottomBar/BottomBar.jsx
index 6808bd1a9b3a..1cb46a8b0a7f 100644
--- a/web/libs/editor/src/components/BottomBar/BottomBar.jsx
+++ b/web/libs/editor/src/components/BottomBar/BottomBar.jsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { Actions } from "./Actions";
 import { Controls } from "./Controls";
 import "./BottomBar.scss";
@@ -13,20 +13,17 @@ export const BottomBar = observer(({ store }) => {
   const isViewAll = annotationStore?.viewingAll === true;
 
   return store && !isViewAll ? (
-    <div
-      className={cn("bottombar").toClassName()}
-      style={{ borderTop: isFF(FF_DEV_3873) && "1px solid rgba(0,0,0,0.1)" }}
-    >
-      <div className={cn("bottombar").elem("group").toClassName()}>
+    <Block name="bottombar" style={{ borderTop: isFF(FF_DEV_3873) && "1px solid rgba(0,0,0,0.1)" }}>
+      <Elem name="group">
         <Actions store={store} />
-      </div>
-      <div className={cn("bottombar").elem("group").toClassName()}>
+      </Elem>
+      <Elem name="group">
         {store.hasInterface("controls") && (store.hasInterface("review") || !isPrediction) && (
-          <div className={cn("bottombar").elem("section").mod({ flat: true }).toClassName()}>
+          <Elem name="section" mod={{ flat: true }}>
             <Controls annotation={entity} />
-          </div>
+          </Elem>
         )}
-      </div>
-    </div>
+      </Elem>
+    </Block>
   ) : null;
 });
diff --git a/web/libs/editor/src/components/BottomBar/Controls.tsx b/web/libs/editor/src/components/BottomBar/Controls.tsx
index 316199e07f97..751f3fb8c7b9 100644
--- a/web/libs/editor/src/components/BottomBar/Controls.tsx
+++ b/web/libs/editor/src/components/BottomBar/Controls.tsx
@@ -12,7 +12,7 @@ import { Button, ButtonGroup, type ButtonProps } from "@humansignal/ui";
 import { IconBan, IconChevronDown } from "@humansignal/icons";
 import { Dropdown } from "../../common/Dropdown/Dropdown";
 import type { CustomButtonType } from "../../stores/CustomButton";
-import { cn } from "../../utils/bem";
+import { Block, cn, Elem } from "../../utils/bem";
 import { FF_REVIEWER_FLOW, isFF } from "../../utils/feature-flags";
 import { isDefined, toArray } from "../../utils/utilities";
 import {
@@ -147,7 +147,7 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
     }
 
     if (buttonsReplacement) {
-      return <div className={cn("controls").toClassName()}>{buttons}</div>;
+      return <Block name="controls">{buttons}</Block>;
     }
 
     if (isReview) {
@@ -180,9 +180,9 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
       buttons.push(<AcceptButton key="review-accept" disabled={disabled} history={history} store={store} />);
     } else if (annotation.skipped) {
       buttons.push(
-        <div className={cn("controls").elem("skipped-info").toClassName()} key="skipped">
+        <Elem name="skipped-info" key="skipped">
           <IconBan /> Was skipped
-        </div>,
+        </Elem>,
       );
       buttons.push(<UnskipButton key="unskip" disabled={disabled} store={store} />);
     } else {
@@ -237,7 +237,7 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
 
         buttons.push(
           <ButtonTooltip key="submit" title={title}>
-            <div className={cn("controls").elem("tooltip-wrapper").toClassName()}>
+            <Elem name="tooltip-wrapper">
               <ButtonGroup>
                 <Button
                   aria-label="Submit current annotation"
@@ -270,7 +270,7 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
                   </Dropdown.Trigger>
                 ) : null}
               </ButtonGroup>
-            </div>
+            </Elem>
           </ButtonTooltip>,
         );
       } else if ((userGenerate && sentUserGenerate) || (!userGenerate && store.hasInterface("update"))) {
@@ -315,6 +315,6 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
       }
     }
 
-    return <div className={cn("controls").toClassName()}>{buttons}</div>;
+    return <Block name="controls">{buttons}</Block>;
   }),
 );
diff --git a/web/libs/editor/src/components/BottomBar/CurrentTask.jsx b/web/libs/editor/src/components/BottomBar/CurrentTask.jsx
index 0d46aa59cfe9..fc163ae284e7 100644
--- a/web/libs/editor/src/components/BottomBar/CurrentTask.jsx
+++ b/web/libs/editor/src/components/BottomBar/CurrentTask.jsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { Button, IconChevronLeft, IconChevronRight } from "@humansignal/ui";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { guidGenerator } from "../../utils/unique";
 import { isDefined } from "../../utils/utilities";
 import { FF_LEAP_1173, FF_TASK_COUNT_FIX, isFF } from "../../utils/feature-flags";
@@ -23,23 +23,23 @@ export const CurrentTask = observer(({ store }) => {
     store.hasInterface("postpone");
 
   return (
-    <div className={cn("bottombar").elem("section").toClassName()}>
-      <div className={cn("current-task").mod({ "with-history": historyEnabled }).toClassName()}>
-        <div className={cn("current-task").elem("task-id").toClassName()}>
+    <Elem name="section">
+      <Block name="current-task" mod={{ "with-history": historyEnabled }}>
+        <Elem name="task-id">
           {store.task.id ?? guidGenerator()}
           {historyEnabled &&
             (isFF(FF_TASK_COUNT_FIX) ? (
-              <div className={cn("current-task").elem("task-count").toClassName()}>
+              <Elem name="task-count">
                 {store.queuePosition} of {store.queueTotal}
-              </div>
+              </Elem>
             ) : (
-              <div className={cn("current-task").elem("task-count").toClassName()}>
+              <Elem name="task-count">
                 {currentIndex} of {store.taskHistory.length}
-              </div>
+              </Elem>
             ))}
-        </div>
+        </Elem>
         {historyEnabled && (
-          <div className={cn("current-task").elem("history-controls").toClassName()}>
+          <Elem name="history-controls">
             <Button
               variant="neutral"
               data-testid="prev-task"
@@ -56,9 +56,9 @@ export const CurrentTask = observer(({ store }) => {
             >
               <IconChevronRight />
             </Button>
-          </div>
+          </Elem>
         )}
-      </div>
-    </div>
+      </Block>
+    </Elem>
   );
 });
diff --git a/web/libs/editor/src/components/CurrentEntity/AnnotationHistory.tsx b/web/libs/editor/src/components/CurrentEntity/AnnotationHistory.tsx
index 3a8985cf360c..f425abbc6ed8 100644
--- a/web/libs/editor/src/components/CurrentEntity/AnnotationHistory.tsx
+++ b/web/libs/editor/src/components/CurrentEntity/AnnotationHistory.tsx
@@ -17,7 +17,7 @@ import {
 } from "@humansignal/icons";
 import { Tooltip, Userpic } from "@humansignal/ui";
 import { Space } from "../../common/Space/Space";
-import { cn } from "../../utils/bem";
+import { Block, cn, Elem } from "../../utils/bem";
 import { humanDateDiff, userDisplayName } from "../../utils/utilities";
 import { EmptyState } from "../SidePanels/Components/EmptyState";
 import "./AnnotationHistory.scss";
@@ -78,17 +78,17 @@ const DraftState: FC<{
       date={annotation.draftSaved}
       extra={
         annotation.isDraftSaving ? (
-          <div className={cn("annotation-history").elem("saving").toClassName()}>
-            <div className={cn("annotation-history").elem("spin").toClassName()} />
-          </div>
+          <Elem name="saving">
+            <Elem name="spin" />
+          </Elem>
         ) : hasUnsavedChanges ? (
-          <div className={cn("annotation-history").elem("saving").toClassName()}>
-            <div className={cn("annotation-history").elem("dot").toClassName()} />
-          </div>
+          <Elem name="saving">
+            <Elem name="dot" />
+          </Elem>
         ) : hasChanges ? (
-          <div className={cn("annotation-history").elem("saving").toClassName()}>
-            <IconCheck className={cn("annotation-history").elem("saved").toClassName()} />
-          </div>
+          <Elem name="saving">
+            <Elem name="saved" component={IconCheck} />
+          </Elem>
         ) : null
       }
       inline={inline}
@@ -141,17 +141,17 @@ const AnnotationHistoryComponent: FC<any> = ({
   // If we should show empty state, render it
   if (shouldShowEmptyState) {
     return (
-      <div className={cn("annotation-history").mod({ inline, empty: true }).toClassName()}>
+      <Block name="annotation-history" mod={{ inline, empty: true }}>
         {sectionHeader && (
           <div className={`${cn("annotation-history").elem("section-head").toString()} sr-only`}>{sectionHeader}</div>
         )}
         {renderEmptyState ? renderEmptyState() : defaultEmptyState}
-      </div>
+      </Block>
     );
   }
 
   return (
-    <div className={cn("annotation-history").mod({ inline }).toClassName()}>
+    <Block name="annotation-history" mod={{ inline }}>
       {sectionHeader && (
         <div className={`${cn("annotation-history").elem("section-head").toString()} sr-only`}>{sectionHeader}</div>
       )}
@@ -194,7 +194,7 @@ const AnnotationHistoryComponent: FC<any> = ({
             />
           );
         })}
-    </div>
+    </Block>
   );
 };
 
@@ -264,42 +264,44 @@ const HistoryItemComponent: FC<{
   );
 
   return (
-    <div className={cn("history-item").mod({ inline, selected, disabled }).toClassName()} onClick={handleClick}>
+    <Block name="history-item" mod={{ inline, selected, disabled }} onClick={handleClick}>
       <Space spread size="medium" truncated>
         <Space size="small" truncated>
-          <Userpic
-            className={cn("history-item").elem("userpic").mod({ prediction: isPrediction }).toClassName()}
+          <Elem
+            tag={Userpic}
             user={user}
+            name="userpic"
             showUsername
             username={isPrediction ? entity.createdBy : null}
+            mod={{ prediction: isPrediction }}
           >
             {isPrediction && <IconSparks style={{ width: 16, height: 16 }} />}
-          </Userpic>
-          <span className={cn("history-item").elem("name").toClassName()}>
+          </Elem>
+          <Elem name="name" tag="span">
             {isPrediction ? entity.createdBy : userDisplayName(user)}
-          </span>
+          </Elem>
         </Space>
 
         {!infoIsHidden && (
           <Space size="small">
-            {extra && <div className={cn("history-item").elem("date").toClassName()}>{extra}</div>}
+            {extra && <Elem name="date">{extra}</Elem>}
             {date && (
-              <div className={cn("history-item").elem("date").toClassName()}>
+              <Elem name="date">
                 <Tooltip alignment="top-right" title={new Date(date).toLocaleString()}>
                   <span>{humanDateDiff(date)}</span>
                 </Tooltip>
-              </div>
+              </Elem>
             )}
           </Space>
         )}
       </Space>
       {(reason || comment) && (
-        <Space className={cn("history-item").elem("action").toClassName()} size="small">
+        <Elem name="action" tag={Space} size="small">
           {acceptedState && <HistoryIcon type={acceptedState} />}
           <HistoryComment comment={comment} reason={reason} />
-        </Space>
+        </Elem>
       )}
-    </div>
+    </Block>
   );
 };
 
@@ -323,26 +325,24 @@ const HistoryComment: FC<{
   }, []);
 
   return (
-    <div className={cn("history-item").elem("comment").mod({ collapsed }).toClassName()} ref={commentRef as any}>
-      <div
-        className={cn("history-item").elem("comment-content").toClassName()}
-        data-reason={`${reason}${comment ? ": " : ""}`}
-      >
+    <Elem name="comment" ref={commentRef} mod={{ collapsed }}>
+      <Elem name="comment-content" data-reason={`${reason}${comment ? ": " : ""}`}>
         {comment}
-      </div>
+      </Elem>
 
       {collapsible && (
-        <div
-          className={cn("history-item").elem("collapse-comment").mod({ collapsed }).toClassName()}
-          onClick={(e: any) => {
+        <Elem
+          name="collapse-comment"
+          mod={{ collapsed }}
+          onClick={(e: MouseEvent) => {
             e.stopPropagation();
             setCollapsed((v) => !v);
           }}
         >
           {collapsed ? "Show more" : "Show less"}
-        </div>
+        </Elem>
       )}
-    </div>
+    </Elem>
   );
 };
 
@@ -376,7 +376,7 @@ const HistoryIcon: FC<{ type: HistoryItemType }> = ({ type }) => {
     }
   }, [type]);
 
-  return icon && <div className={cn("history-item").elem("history-icon").toClassName()}>{icon}</div>;
+  return icon && <Elem name="history-icon">{icon}</Elem>;
 };
 
 const HistoryItem = observer(HistoryItemComponent);
diff --git a/web/libs/editor/src/components/CurrentEntity/GroundTruth.jsx b/web/libs/editor/src/components/CurrentEntity/GroundTruth.jsx
index 09344171bfe7..a50a349a2673 100644
--- a/web/libs/editor/src/components/CurrentEntity/GroundTruth.jsx
+++ b/web/libs/editor/src/components/CurrentEntity/GroundTruth.jsx
@@ -1,19 +1,20 @@
 import { observer } from "mobx-react";
 import { IconStar, IconStarOutline } from "@humansignal/icons";
 import { Button, Tooltip } from "@humansignal/ui";
-import { cn } from "../../utils/bem";
+import { BemWithSpecificContext } from "../../utils/bem";
 import { FF_DEV_3873, isFF } from "../../utils/feature-flags";
 import "./GroundTruth.scss";
 
+const { Block, Elem } = BemWithSpecificContext();
+
 export const GroundTruth = observer(({ entity, disabled = false, size = "md" }) => {
   const title = entity.ground_truth ? "Unset this result as a ground truth" : "Set this result as a ground truth";
-  const IndicatorIcon = isFF(FF_DEV_3873) && !entity.ground_truth ? IconStarOutline : IconStar;
 
   return (
     !entity.skipped &&
     !entity.userGenerate &&
     entity.type !== "prediction" && (
-      <div className={cn("ground-truth").mod({ disabled, size }).toClassName()}>
+      <Block name="ground-truth" mod={{ disabled, size }}>
         <Tooltip alignment="top-left" title={title}>
           <Button
             size="small"
@@ -24,15 +25,14 @@ export const GroundTruth = observer(({ entity, disabled = false, size = "md" })
               entity.setGroundTruth(!entity.ground_truth);
             }}
           >
-            <IndicatorIcon
-              className={cn("ground-truth")
-                .elem("indicator")
-                .mod({ active: entity.ground_truth, dark: isFF(FF_DEV_3873) })
-                .toClassName()}
+            <Elem
+              name="indicator"
+              tag={isFF(FF_DEV_3873) && !entity.ground_truth ? IconStarOutline : IconStar}
+              mod={{ active: entity.ground_truth, dark: isFF(FF_DEV_3873) }}
             />
           </Button>
         </Tooltip>
-      </div>
+      </Block>
     )
   );
 });
diff --git a/web/libs/editor/src/components/Hint/Hint.tsx b/web/libs/editor/src/components/Hint/Hint.tsx
index b9feacc1ed15..2bd08054b23a 100644
--- a/web/libs/editor/src/components/Hint/Hint.tsx
+++ b/web/libs/editor/src/components/Hint/Hint.tsx
@@ -1,5 +1,5 @@
 import type { CSSProperties, FC } from "react";
-import { cn } from "../../utils/bem";
+import { Block } from "../../utils/bem";
 
 import "./Hint.scss";
 
@@ -14,9 +14,9 @@ interface HintProps {
  */
 const Hint: FC<HintProps> = (props) => {
   return (
-    <sup className={cn("hint").mix(props.className).toClassName()} data-copy={props.copy} style={props.style}>
+    <Block name="hint" tag="sup" className={props.className} data-copy={props.copy} style={props.style}>
       {props.children}
-    </sup>
+    </Block>
   );
 };
 
diff --git a/web/libs/editor/src/components/ImageView/Image.jsx b/web/libs/editor/src/components/ImageView/Image.jsx
index 9f4e5a81dcc9..ba33c11a8fd1 100644
--- a/web/libs/editor/src/components/ImageView/Image.jsx
+++ b/web/libs/editor/src/components/ImageView/Image.jsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { forwardRef, useCallback, useMemo } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import messages from "../../utils/messages";
 import { ErrorMessage } from "../ErrorMessage/ErrorMessage";
 import "./Image.scss";
@@ -41,7 +41,7 @@ export const Image = observer(
     );
 
     return (
-      <div className={cn("image").toClassName()} style={imageSize}>
+      <Block name="image" style={imageSize}>
         {overlay}
         <ImageProgress
           downloading={imageEntity.downloading}
@@ -60,23 +60,17 @@ export const Image = observer(
             imageTransform={imageTransform}
           />
         ) : null}
-      </div>
+      </Block>
     );
   }),
 );
 
 const ImageProgress = observer(({ downloading, progress, error, src, usedValue }) => {
   return downloading ? (
-    <div className={cn("image-progress").toClassName()}>
-      <div className={cn("image-progress").elem("message").toClassName()}>Downloading image</div>
-      <progress
-        className={cn("image-progress").elem("bar").toClassName()}
-        value={progress}
-        min="0"
-        max={1}
-        step={0.0001}
-      />
-    </div>
+    <Block name="image-progress">
+      <Elem name="message">Downloading image</Elem>
+      <Elem tag="progress" name="bar" value={progress} min="0" max={1} step={0.0001} />
+    </Block>
   ) : error ? (
     <ImageLoadingError src={src} value={usedValue} />
   ) : null;
diff --git a/web/libs/editor/src/components/NewTaxonomy/TaxonomySearch.tsx b/web/libs/editor/src/components/NewTaxonomy/TaxonomySearch.tsx
index 1c614df526a4..0fe203f0fb47 100644
--- a/web/libs/editor/src/components/NewTaxonomy/TaxonomySearch.tsx
+++ b/web/libs/editor/src/components/NewTaxonomy/TaxonomySearch.tsx
@@ -9,7 +9,7 @@ import React, {
 } from "react";
 
 import "./TaxonomySearch.scss";
-import { cn } from "../../utils/bem";
+import { Block } from "../../utils/bem";
 import type { AntTaxonomyItem } from "./NewTaxonomy";
 import debounce from "lodash/debounce";
 
@@ -116,9 +116,10 @@ const TaxonomySearch = React.forwardRef<TaxonomySearchRef, TaxonomySearchProps>(
   );
 
   return (
-    <input
-      ref={inputRef as any}
+    <Block
+      ref={inputRef}
       value={inputValue}
+      tag={"input"}
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
         setInputValue(e.target.value);
         handleSearch(e);
@@ -130,7 +131,6 @@ const TaxonomySearch = React.forwardRef<TaxonomySearchRef, TaxonomySearchProps>(
       placeholder={"Search"}
       data-testid={"taxonomy-search"}
       name={"taxonomy-search-input"}
-      className={cn("taxonomy-search-input").toClassName()}
     />
   );
 });
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.tsx
index 30774d9504ad..dc4a8788f2cc 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.tsx
@@ -1,6 +1,6 @@
 import { inject, observer } from "mobx-react";
 import type { FC } from "react";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import { Comments as CommentsComponent } from "../../Comments/Comments";
 import { AnnotationHistory } from "../../CurrentEntity/AnnotationHistory";
 import { PanelBase, type PanelProps } from "../PanelBase";
@@ -34,9 +34,9 @@ const DetailsComponent: FC<DetailsPanelProps> = ({ currentEntity, regions }) =>
   const selectedRegions = regions.selection;
 
   return (
-    <div className={cn("details-tab").toClassName()}>
+    <Block name="details-tab">
       <Content selection={selectedRegions} currentEntity={currentEntity} />
-    </div>
+    </Block>
   );
 };
 
@@ -49,17 +49,17 @@ const CommentsTab: FC<any> = inject("store")(
     return (
       <>
         {store.hasInterface("annotations:comments") && store.commentStore.isCommentable && (
-          <div className={cn("comments-panel").toClassName()}>
-            <div className={cn("comments-panel").elem("section-tab").toClassName()}>
-              <div className={cn("comments-panel").elem("section-content").toClassName()}>
+          <Block name="comments-panel">
+            <Elem name="section-tab">
+              <Elem name="section-content">
                 <CommentsComponent
                   annotationStore={store.annotationStore}
                   commentStore={store.commentStore}
                   cacheKey={`task.${store.task.id}`}
                 />
-              </div>
-            </div>
-          </div>
+              </Elem>
+            </Elem>
+          </Block>
         )}
       </>
     );
@@ -73,19 +73,17 @@ const RelationsTab: FC<any> = inject("store")(
 
     return (
       <>
-        <div className={cn("relations").toClassName()}>
-          <div className={cn("relations").elem("section-tab").toClassName()}>
+        <Block name="relations">
+          <Elem name="section-tab">
             {hasRelations ? (
               <>
-                <div className={cn("relations").elem("view-control").toClassName()}>
-                  <div className={cn("relations").elem("section-head").toClassName()}>
-                    Relations ({relationStore.size})
-                  </div>
+                <Elem name="view-control">
+                  <Elem name="section-head">Relations ({relationStore.size})</Elem>
                   <RelationsControls relationStore={relationStore} />
-                </div>
-                <div className={cn("relations").elem("section-content").toClassName()}>
+                </Elem>
+                <Elem name="section-content">
                   <RelationsComponent relationStore={relationStore} />
-                </div>
+                </Elem>
               </>
             ) : (
               <EmptyState
@@ -99,8 +97,8 @@ const RelationsTab: FC<any> = inject("store")(
                 }}
               />
             )}
-          </div>
-        </div>
+          </Elem>
+        </Block>
       </>
     );
   }),
@@ -112,8 +110,8 @@ const HistoryTab: FC<any> = inject("store")(
 
     return (
       <>
-        <div className={cn("history").toClassName()}>
-          <div className={cn("history").elem("section-tab").toClassName()}>
+        <Block name="history">
+          <Elem name="section-tab">
             <AnnotationHistory
               inline
               enabled={showAnnotationHistory}
@@ -124,8 +122,8 @@ const HistoryTab: FC<any> = inject("store")(
                 </>
               }
             />
-          </div>
-        </div>
+          </Elem>
+        </Block>
       </>
     );
   }),
@@ -136,8 +134,8 @@ const InfoTab: FC<any> = inject("store")(
     const nothingSelected = !selection || selection.size === 0;
     return (
       <>
-        <div className={cn("info").toClassName()}>
-          <div className={cn("info").elem("section-tab").toClassName()}>
+        <Block name="info">
+          <Elem name="section-tab">
             {nothingSelected ? (
               <EmptyState
                 icon={<IconCursor width={24} height={24} />}
@@ -149,8 +147,8 @@ const InfoTab: FC<any> = inject("store")(
                 <RegionsPanel regions={selection} />
               </>
             )}
-          </div>
-        </div>
+          </Elem>
+        </Block>
       </>
     );
   }),
@@ -162,7 +160,7 @@ const GeneralPanel: FC<any> = inject("store")(
     const showAnnotationHistory = store.hasInterface("annotations:history");
     return (
       <>
-        <div className={cn("details").elem("section").toClassName()}>
+        <Elem name="section">
           <AnnotationHistory
             inline
             enabled={showAnnotationHistory}
@@ -173,27 +171,27 @@ const GeneralPanel: FC<any> = inject("store")(
               </>
             }
           />
-        </div>
-        <div className={cn("details").elem("section").toClassName()}>
-          <div className={cn("details").elem("view-control").toClassName()}>
-            <div className={cn("details").elem("section-head").toClassName()}>Relations ({relationStore.size})</div>
+        </Elem>
+        <Elem name="section">
+          <Elem name="view-control">
+            <Elem name="section-head">Relations ({relationStore.size})</Elem>
             <RelationsControls relationStore={relationStore} />
-          </div>
-          <div className={cn("details").elem("section-content").toClassName()}>
+          </Elem>
+          <Elem name="section-content">
             <RelationsComponent relationStore={relationStore} />
-          </div>
-        </div>
+          </Elem>
+        </Elem>
         {store.hasInterface("annotations:comments") && store.commentStore.isCommentable && (
-          <div className={cn("details").elem("section").toClassName()}>
-            <div className={cn("details").elem("section-head").toClassName()}>Comments</div>
-            <div className={cn("details").elem("section-content").toClassName()}>
+          <Elem name="section">
+            <Elem name="section-head">Comments</Elem>
+            <Elem name="section-content">
               <CommentsComponent
                 annotationStore={store.annotationStore}
                 commentStore={store.commentStore}
                 cacheKey={`task.${store.task.id}`}
               />
-            </div>
-          </div>
+            </Elem>
+          </Elem>
         )}
       </>
     );
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionDetails.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionDetails.tsx
index dd3f074884d3..15c20a2b4e5b 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionDetails.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionDetails.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { type FC, useEffect, useMemo, useRef } from "react";
-import { cn } from "../../../utils/bem";
+import { Block, Elem, useBEM } from "../../../utils/bem";
 import { RegionEditor } from "./RegionEditor";
 import "./RegionDetails.scss";
 import { Typography } from "@humansignal/ui";
@@ -48,53 +48,53 @@ export const ResultItem: FC<{ result: any }> = observer(({ result }) => {
   const content = useMemo(() => {
     if (type === "rating") {
       return (
-        <div className={cn("region-meta").elem("result").toClassName()}>
+        <Elem name="result">
           <Typography size="small">Rating: </Typography>
-          <div className={cn("region-meta").elem("value").toClassName()}>
+          <Elem name="value">
             <RatingResult mainValue={mainValue} />
-          </div>
-        </div>
+          </Elem>
+        </Elem>
       );
     }
     if (type === "textarea") {
       return (
-        <div className={cn("region-meta").elem("result").toClassName()}>
+        <Elem name="result">
           <Typography size="small">Text: </Typography>
-          <div className={cn("region-meta").elem("value").toClassName()}>
+          <Elem name="value">
             <TextResult mainValue={mainValue} />
-          </div>
-        </div>
+          </Elem>
+        </Elem>
       );
     }
     if (type === "choices") {
       return (
-        <div className={cn("region-meta").elem("result").toClassName()}>
+        <Elem name="result">
           <Typography size="small">Choices: </Typography>
-          <div className={cn("region-meta").elem("value").toClassName()}>
+          <Elem name="value">
             <ChoicesResult mainValue={mainValue} />
-          </div>
-        </div>
+          </Elem>
+        </Elem>
       );
     }
     if (type === "taxonomy") {
       return (
-        <div className={cn("region-meta").elem("result").toClassName()}>
+        <Elem name="result">
           <Typography size="small">Taxonomy: </Typography>
-          <div className={cn("region-meta").elem("value").toClassName()}>
+          <Elem name="value">
             <ChoicesResult mainValue={mainValue.map((v: string[]) => v.join("/"))} />
-          </div>
-        </div>
+          </Elem>
+        </Elem>
       );
     }
   }, [type, mainValue]);
 
-  return content ? <div className={cn("region-meta").toClassName()}>{content}</div> : null;
+  return content ? <Block name="region-meta">{content}</Block> : null;
 });
 
 export const RegionDetailsMain: FC<{ region: any }> = observer(({ region }) => {
   return (
     <>
-      <div className={cn("detailed-region").elem("result").toClassName()}>
+      <Elem name="result">
         {(region?.results as any[])
           // hide per-regions stored only in this session just for a better UX
           .filter((res) => res.canBeSubmitted)
@@ -104,15 +104,15 @@ export const RegionDetailsMain: FC<{ region: any }> = observer(({ region }) => {
         {/* @todo dirty hack to not duplicate text for OCR regions */}
         {/* @todo should be converted into universal solution */}
         {region?.text && !region?.ocrtext ? (
-          <div className={cn("region-meta").toClassName()}>
-            <div className={cn("region-meta").elem("item").toClassName()}>
-              <div className={cn("region-meta").elem("content").mod({ type: "text" }).toClassName()}>
+          <Block name="region-meta">
+            <Elem name="item">
+              <Elem name="content" mod={{ type: "text" }}>
                 {region.text.replace(/\\n/g, "\n")}
-              </div>
-            </div>
-          </div>
+              </Elem>
+            </Elem>
+          </Block>
         ) : null}
-      </div>
+      </Elem>
       <RegionEditor region={region} />
     </>
   );
@@ -127,6 +127,7 @@ type RegionDetailsMetaProps = {
 
 export const RegionDetailsMeta: FC<RegionDetailsMetaProps> = observer(
   ({ region, editMode, cancelEditMode, enterEditMode }) => {
+    const bem = useBEM();
     const input = useRef<HTMLTextAreaElement | null>();
 
     const saveMeta = (value: string) => {
@@ -148,7 +149,7 @@ export const RegionDetailsMeta: FC<RegionDetailsMetaProps> = observer(
           <textarea
             ref={(el) => (input.current = el)}
             placeholder="Meta"
-            className={cn("detailed-region").elem("meta-text").toClassName()}
+            className={bem.elem("meta-text").toClassName()}
             value={region.meta.text}
             onChange={(e) => saveMeta(e.target.value)}
             onBlur={(e) => {
@@ -165,9 +166,9 @@ export const RegionDetailsMeta: FC<RegionDetailsMetaProps> = observer(
           />
         ) : (
           region.meta?.text && (
-            <div className={cn("detailed-region").elem("meta-text").toClassName()} onClick={() => enterEditMode?.()}>
+            <Elem name="meta-text" onClick={() => enterEditMode?.()}>
               {region.meta?.text}
-            </div>
+            </Elem>
           )
         )}
       </>
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx
index f87fdd54a52a..c9d461f01053 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx
@@ -14,7 +14,7 @@ import {
 } from "react";
 import { IconPropertyAngle } from "@humansignal/icons";
 import { Checkbox, Select } from "@humansignal/ui";
-import { cn } from "../../../utils/bem";
+import { Block, Elem, useBEM } from "../../../utils/bem";
 import { TimeDurationControl } from "../../TimeDurationControl/TimeDurationControl";
 import { TimelineRegionEditor } from "./TimelineRegionEditor";
 import "./RegionEditor.scss";
@@ -57,9 +57,9 @@ const RegionEditorComponent: FC<RegionEditorProps> = ({ region }) => {
   const Component = isTimelineRegion ? TimelineRegionEditor : isAudioRegion ? AudioRegionProperties : RegionProperties;
 
   return (
-    <div className={cn("region-editor").mod({ disabled: region.isReadOnly() }).toClassName()}>
+    <Block name="region-editor" mod={{ disabled: region.isReadOnly() }}>
       <Component region={region} />
-    </div>
+    </Block>
   );
 };
 
@@ -67,7 +67,7 @@ const RegionProperties = ({ region }: RegionEditorProps) => {
   const fields = region.editableFields ?? [];
 
   return (
-    <div className={cn("region-editor").elem("wrapper").toClassName()}>
+    <Elem name="wrapper">
       {region.editorEnabled &&
         fields.map((field, i) => {
           return (
@@ -79,7 +79,7 @@ const RegionProperties = ({ region }: RegionEditorProps) => {
             />
           );
         })}
-    </div>
+    </Elem>
   );
 };
 
@@ -93,7 +93,7 @@ const AudioRegionProperties = observer(({ region }: { region: any }) => {
   };
 
   return (
-    <div className={cn("region-editor").elem("wrapper-time-control").toClassName()}>
+    <Elem name="wrapper-time-control">
       <TimeDurationControl
         startTime={region.start}
         endTime={region.end}
@@ -105,7 +105,7 @@ const AudioRegionProperties = observer(({ region }: { region: any }) => {
         showLabels
         showDuration
       />
-    </div>
+    </Elem>
   );
 });
 
@@ -116,6 +116,7 @@ interface RegionPropertyProps {
 }
 
 const RegionProperty: FC<RegionPropertyProps> = ({ property, label, region }) => {
+  const block = useBEM();
   const [value, setValue] = useState(region.getProperty(property));
 
   const propertyType = useMemo(() => {
@@ -181,10 +182,10 @@ const RegionProperty: FC<RegionPropertyProps> = ({ property, label, region }) =>
   }, [region]);
 
   return (
-    <label className={cn("region-editor").elem("property").mod({ text: isString }).toClassName()}>
+    <Elem name="property" mod={{ text: isString }} tag="label">
       {isBoolean ? (
         <Checkbox
-          className={cn("region-editor").elem("input").toClassName()}
+          className={block?.elem("input").toClassName()}
           checked={value}
           onChange={(e) => onChangeHandler(e.target.checked)}
         />
@@ -201,12 +202,12 @@ const RegionProperty: FC<RegionPropertyProps> = ({ property, label, region }) =>
         <Select
           value={value}
           onChange={(val) => onChangeHandler(val)}
-          triggerClassName={cn("region-editor").elem("select").toClassName()}
+          triggerClassName={block?.elem("select").toClassName()}
           options={options}
         />
       ) : null}
       <PropertyLabel label={label} />
-    </label>
+    </Elem>
   );
 };
 
@@ -216,6 +217,7 @@ interface RegionInputProps extends InputHTMLAttributes<HTMLInputElement | HTMLTe
 }
 
 const RegionInput: FC<RegionInputProps> = ({ onChange: onChangeValue, type, value, step, ...props }) => {
+  const block = useBEM();
   const [currentValue, setValue] = useState(value);
 
   const updateValue = useCallback(
@@ -284,7 +286,7 @@ const RegionInput: FC<RegionInputProps> = ({ onChange: onChangeValue, type, valu
   return (
     <Tag
       {...props}
-      className={cn("region-editor").elem("input").toClassName()}
+      className={block?.elem("input").toClassName()}
       type="text"
       step={step}
       onChange={onChangeHandler}
@@ -307,7 +309,9 @@ const PropertyLabel: FC<{ label: string }> = ({ label }) => {
   }, [label]);
 
   return (
-    <span className={cn("region-editor").elem("text").toClassName()}>{IconComponent ? <IconComponent /> : label}</span>
+    <Elem name="text" tag="span">
+      {IconComponent ? <IconComponent /> : label}
+    </Elem>
   );
 };
 
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx
index bbb3611bad23..5ed785165709 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { type FC, forwardRef, useMemo, useState } from "react";
 import { WithHotkey } from "../../../common/Hotkey/WithHotkey";
 import { CREATE_RELATION_MODE } from "../../../stores/Annotation/LinkingModes";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import { NodeIcon } from "../../Node/Node";
 import { LockButton } from "../Components/LockButton";
 import { RegionLabels } from "./RegionLabels";
@@ -48,31 +48,31 @@ export const RegionItem: FC<RegionItemProps> = observer(
     }, [region.background, region.style]);
 
     return (
-      <div className={cn("detailed-region").mod({ compact }).toClassName()} data-testid="detailed-region">
-        <div className={cn("detailed-region").elem("head").toClassName()} style={{ color: color.css() }}>
-          <div className={cn("detailed-region").elem("title").toClassName()}>
-            <div className={cn("detailed-region").elem("icon").toClassName()}>
+      <Block name="detailed-region" mod={{ compact }} data-testid="detailed-region">
+        <Elem name="head" style={{ color: color.css() }}>
+          <Elem name="title">
+            <Elem name="icon">
               <NodeIcon node={region} />
-            </div>
-            <div className={cn("detailed-region").elem("index").toClassName()}>
-              <span className={cn("detailed-region").elem("index_value").toClassName()}>{region.region_index}</span>
-            </div>
+            </Elem>
+            <Elem name="index">
+              <Elem tag="span" name="index_value">
+                {region.region_index}
+              </Elem>
+            </Elem>
             <RegionLabels region={region} />
-          </div>
+          </Elem>
           {withIds && <span>{region.cleanId}</span>}
-        </div>
+        </Elem>
         {MainDetails && (
-          <div className={cn("detailed-region").elem("content").toClassName()}>
+          <Elem name="content">
             <MainDetails region={region} />
-          </div>
+          </Elem>
         )}
         {region.isDrawing && (
-          <div className={cn("detailed-region").elem("warning").toClassName()}>
+          <Elem name="warning">
             <IconWarning />
-            <div className={cn("detailed-region").elem("warning-text").toClassName()}>
-              Incomplete {region.type?.replace("region", "") ?? "region"}
-            </div>
-          </div>
+            <Elem name="warning-text">Incomplete {region.type?.replace("region", "") ?? "region"}</Elem>
+          </Elem>
         )}
         {withActions && (
           <RegionAction
@@ -84,16 +84,16 @@ export const RegionItem: FC<RegionItemProps> = observer(
           />
         )}
         {MetaDetails && (
-          <div className={cn("detailed-region").elem("content").toClassName()}>
+          <Elem name="content">
             <MetaDetails
               region={region}
               editMode={editMode}
               enterEditMode={() => setEditMode(true)}
               cancelEditMode={() => setEditMode(false)}
             />
-          </div>
+          </Elem>
         )}
-      </div>
+      </Block>
     );
   },
 );
@@ -138,11 +138,11 @@ const RegionAction: FC<any> = observer(({ region, annotation, editMode, onEditMo
   );
 
   return (
-    <div className={cn("region-actions").toClassName()}>
-      <div className={cn("region-actions").elem("group").mod({ align: "left" }).toClassName()}>
+    <Block name="region-actions">
+      <Elem name="group" mod={{ align: "left" }}>
         {!region.isReadOnly() && entityButtons}
-      </div>
-      <div className={cn("region-actions").elem("group").mod({ align: "right" }).toClassName()}>
+      </Elem>
+      <Elem name="group" mod={{ align: "right" }}>
         <LockButton
           item={region}
           annotation={region?.annotation}
@@ -176,8 +176,8 @@ const RegionAction: FC<any> = observer(({ region, annotation, editMode, onEditMo
         >
           <IconTrash />
         </RegionActionButton>
-      </div>
-    </div>
+      </Elem>
+    </Block>
   );
 });
 
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionLabels.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionLabels.tsx
index 7acf2b2a1c2f..1e23fc3c0660 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionLabels.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionLabels.tsx
@@ -1,16 +1,16 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
 
-import { cn } from "../../../utils/bem";
+import { Block } from "../../../utils/bem";
 
 export const RegionLabels: FC<{ region: LSFRegion }> = observer(({ region }) => {
   const labelsInResults = region.labelings.map((result: any) => result.selectedLabels || []);
   const labels: any[] = [].concat(...labelsInResults);
 
-  if (!labels.length) return <div className={cn("labels-list").toClassName()}>{region.noLabelView || "No label"}</div>;
+  if (!labels.length) return <Block name="labels-list">{region.noLabelView || "No label"}</Block>;
 
   return (
-    <div className={cn("labels-list").toClassName()}>
+    <Block name="labels-list">
       {labels.map((label, index) => {
         const color = label.background || "#000000";
 
@@ -21,6 +21,6 @@ export const RegionLabels: FC<{ region: LSFRegion }> = observer(({ region }) =>
           </span>,
         ];
       })}
-    </div>
+    </Block>
   );
 });
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx
index 3314366f0eb7..1ee4e69f6d74 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx
@@ -10,7 +10,7 @@ import {
 import { Button, Select } from "@humansignal/ui";
 import { observer } from "mobx-react";
 import { type FC, useCallback, useMemo, useState } from "react";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import { wrapArray } from "../../../utils/utilities";
 import { RegionItem } from "./RegionItem";
 import "./Relations.scss";
@@ -19,9 +19,9 @@ const RealtionsComponent: FC<any> = ({ relationStore }) => {
   const relations = relationStore.orderedRelations;
 
   return (
-    <div className={cn("relations").toClassName()}>
+    <Block name="relations">
       <RelationsList relations={relations} />
-    </div>
+    </Block>
   );
 };
 
@@ -76,21 +76,17 @@ const RelationItem: FC<{ relation: any }> = observer(({ relation }) => {
   // const;
 
   return (
-    <div
-      className={cn("relations").elem("item").mod({ hidden: !relation.visible }).toClassName()}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      <div className={cn("relations").elem("content").toClassName()}>
-        <div className={cn("relations").elem("icon").toClassName()} onClick={relation.rotateDirection}>
-          <div className={cn("relations").elem("direction").toClassName()}>{directionIcon}</div>
-        </div>
-        <div className={cn("relations").elem("nodes").toClassName()}>
+    <Elem name="item" mod={{ hidden: !relation.visible }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <Elem name="content">
+        <Elem name="icon" onClick={relation.rotateDirection}>
+          <Elem name="direction">{directionIcon}</Elem>
+        </Elem>
+        <Elem name="nodes">
           <RegionItem compact withActions={false} withIds={false} region={relation.node1} />
           <RegionItem compact withActions={false} withIds={false} region={relation.node2} />
-        </div>
-        <div className={cn("relations").elem("actions").toClassName()}>
-          <div className={cn("relations").elem("action").toClassName()}>
+        </Elem>
+        <Elem name="actions">
+          <Elem name="action">
             {(hovered || relation.showMeta) && relation.hasRelations && (
               <Button
                 primary={relation.showMeta}
@@ -102,8 +98,8 @@ const RelationItem: FC<{ relation: any }> = observer(({ relation }) => {
                 <IconMenu />
               </Button>
             )}
-          </div>
-          <div className={cn("relations").elem("action").toClassName()}>
+          </Elem>
+          <Elem name="action">
             {(hovered || !relation.visible) && (
               <Button
                 variant="neutral"
@@ -120,8 +116,8 @@ const RelationItem: FC<{ relation: any }> = observer(({ relation }) => {
                 )}
               </Button>
             )}
-          </div>
-          <div className={cn("relations").elem("action").toClassName()}>
+          </Elem>
+          <Elem name="action">
             {hovered && (
               <Button
                 variant="negative"
@@ -138,11 +134,11 @@ const RelationItem: FC<{ relation: any }> = observer(({ relation }) => {
                 <IconTrash />
               </Button>
             )}
-          </div>
-        </div>
-      </div>
+          </Elem>
+        </Elem>
+      </Elem>
       {relation.showMeta && <RelationMeta relation={relation} />}
-    </div>
+    </Elem>
   );
 });
 
@@ -172,7 +168,7 @@ const RelationMeta: FC<any> = observer(({ relation }) => {
   );
 
   return (
-    <div className={cn("relation-meta").toClassName()}>
+    <Block name="relation-meta">
       <Select
         multiple={selectionMode}
         style={{ width: "100%" }}
@@ -181,7 +177,7 @@ const RelationMeta: FC<any> = observer(({ relation }) => {
         onChange={onChange}
         options={options}
       />
-    </div>
+    </Block>
   );
 });
 
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RelationsControls.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RelationsControls.tsx
index f0cfe904bfa1..6333f985752e 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RelationsControls.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RelationsControls.tsx
@@ -1,16 +1,16 @@
 import { Button } from "@humansignal/ui";
 import { observer } from "mobx-react";
 import { type FC, useCallback } from "react";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import "./RelationsControls.scss";
 import { IconOutlinerEyeClosed, IconOutlinerEyeOpened, IconSortDown, IconSortUp } from "@humansignal/icons";
 
 const RelationsControlsComponent: FC<any> = ({ relationStore }) => {
   return (
-    <div className={cn("relation-controls").toClassName()}>
+    <Block name="relation-controls">
       <ToggleRelationsVisibilityButton relationStore={relationStore} />
       <ToggleRelationsOrderButton relationStore={relationStore} />
-    </div>
+    </Block>
   );
 };
 
@@ -31,16 +31,15 @@ const ToggleRelationsVisibilityButton = observer<FC<ToggleRelationsVisibilityBut
   const isDisabled = !relationStore?.relations?.length;
   const isAllHidden = !(!isDisabled && relationStore.isAllHidden);
 
-  // This comes from an Elem tag that was set without a name. The CSS was fixed to make it work,
-  // but this is clearly bad CSS usage.
   return (
-    <Button
-      className={cn("relation-controls").mod({ hidden: isAllHidden }).toClassName()}
+    <Elem
+      tag={Button}
       variant="neutral"
       look="string"
       size="small"
       disabled={isDisabled}
       onClick={toggleRelationsVisibility}
+      mod={{ hidden: isAllHidden }}
       aria-label={isAllHidden ? "Show all" : "Hide all"}
       icon={
         isAllHidden ? (
@@ -72,16 +71,15 @@ const ToggleRelationsOrderButton = observer<FC<ToggleRelationsOrderButtonProps>>
   const isDisabled = !relationStore?.relations?.length;
   const isAsc = relationStore.order === "asc";
 
-  // This comes from an Elem tag that was set without a name. The CSS was fixed to make it work,
-  // but this is clearly bad CSS usage.
   return (
-    <Button
-      className={cn("relation-controls").mod({ order: relationStore.order }).toClassName()}
+    <Elem
+      tag={Button}
       variant="neutral"
       look="string"
       size="small"
       onClick={toggleRelationsOrder}
       disabled={isDisabled}
+      mod={{ order: relationStore.order }}
       aria-label={isAsc ? "Order by oldest" : "Order by newest"}
       icon={isAsc ? <IconSortUp /> : <IconSortDown />}
       tooltip={isAsc ? "Order by oldest" : "Order by newest"}
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/__tests__/DetailsPanel.test.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/__tests__/DetailsPanel.test.tsx
index dffccc142833..acf946d9b5a7 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/__tests__/DetailsPanel.test.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/__tests__/DetailsPanel.test.tsx
@@ -4,24 +4,16 @@ import { Relations, Info } from "../DetailsPanel";
 
 // Mock the dependencies
 jest.mock("../../../../utils/bem", () => ({
-  cn: (block: string) => ({
-    elem: (elem: string) => ({
-      toClassName: () => `dm-${block}__${elem}`,
-      mod: (mods: any) => ({
-        toClassName: () => `dm-${block}__${elem}`,
-      }),
-    }),
-    mod: (mods: any) => ({
-      toClassName: () => `dm-${block}`,
-      mix: (...args: any[]) => ({
-        toClassName: () => `dm-${block}`,
-      }),
-    }),
-    toClassName: () => `dm-${block}`,
-    mix: (...args: any[]) => ({
-      toClassName: () => `dm-${block}`,
-    }),
-  }),
+  Block: ({ children, ...props }: any) => (
+    <div data-testid="block" {...props}>
+      {children}
+    </div>
+  ),
+  Elem: ({ children, ...props }: any) => (
+    <div data-testid="elem" {...props}>
+      {children}
+    </div>
+  ),
 }));
 
 jest.mock("../../../Comments/Comments", () => ({
@@ -156,7 +148,9 @@ describe("DetailsPanel", () => {
       it("does not render relations count header when no relations exist", () => {
         render(<Relations currentEntity={mockCurrentEntityWithoutRelations} />);
 
-        expect(screen.queryByText(/Relations \(/)).not.toBeInTheDocument();
+        const allElems = screen.getAllByTestId("elem");
+        const relationsCountElem = allElems.find((elem) => elem.textContent?.includes("Relations ("));
+        expect(relationsCountElem).toBeUndefined();
       });
     });
 
@@ -177,7 +171,9 @@ describe("DetailsPanel", () => {
       it("renders relations count in header when relations exist", () => {
         render(<Relations currentEntity={mockCurrentEntityWithRelations} />);
 
-        expect(screen.getByText("Relations (3)")).toBeInTheDocument();
+        const allElems = screen.getAllByTestId("elem");
+        const relationsCountElem = allElems.find((elem) => elem.textContent === "Relations (3)");
+        expect(relationsCountElem).toBeInTheDocument();
       });
     });
   });
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx
index 88a1f85c20f7..968ff744f9d0 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { type FC, useCallback, useEffect, useMemo, useState } from "react";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import { PanelBase, type PanelProps } from "../PanelBase";
 import { OutlinerTree } from "./OutlinerTree";
 import { ViewControls } from "./ViewControls";
@@ -79,11 +79,7 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions }) => {
   );
 
   return (
-    <div
-      className={cn("outliner")
-        .mix(...OutlinerFFClasses)
-        .toClassName()}
-    >
+    <Block name="outliner" mix={OutlinerFFClasses}>
       <ViewControls
         ordering={regions.sort}
         regions={regions}
@@ -92,7 +88,7 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions }) => {
         onGroupingChange={onGroupingChange}
       />
       <OutlinerTreeComponent regions={regions} />
-    </div>
+    </Block>
   );
 };
 
@@ -125,28 +121,24 @@ const OutlinerTreeComponent: FC<OutlinerTreeComponentProps> = observer(({ region
   return (
     <>
       {allRegionsHidden ? (
-        <div className={cn("filters-info").toClassName()}>
+        <Block name="filters-info">
           <IconInfo width={21} height={20} />
-          <div className={cn("filters-info").elem("filters-title").toClassName()}>All regions hidden</div>
-          <div className={cn("filters-info").elem("filters-description").toClassName()}>
-            Adjust or remove the filters to view
-          </div>
-        </div>
+          <Elem name="filters-title">All regions hidden</Elem>
+          <Elem name="filters-description">Adjust or remove the filters to view</Elem>
+        </Block>
       ) : regions?.regions?.length > 0 ? (
         <>
           <OutlinerTree
             regions={regions}
             footer={
               hiddenRegions > 0 && (
-                <div className={cn("filters-info").toClassName()}>
+                <Block name="filters-info">
                   <IconInfo width={21} height={20} />
-                  <div className={cn("filters-info").elem("filters-title").toClassName()}>
+                  <Elem name="filters-title">
                     There {hiddenRegions === 1 ? "is" : "are"} {hiddenRegions} hidden region{hiddenRegions > 1 && "s"}
-                  </div>
-                  <div className={cn("filters-info").elem("filters-description").toClassName()}>
-                    Adjust or remove filters to view
-                  </div>
-                </div>
+                  </Elem>
+                  <Elem name="filters-description">Adjust or remove filters to view</Elem>
+                </Block>
               )
             }
           />
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
index 37cd9cdb189f..01a18f05691b 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
@@ -17,7 +17,7 @@ import {
 } from "react";
 import Registry from "../../../core/Registry";
 import { PER_REGION_MODES } from "../../../mixins/PerRegionModes";
-import { cn } from "../../../utils/bem";
+import { Block, cn, Elem } from "../../../utils/bem";
 import { FF_DEV_2755, FF_DEV_3873, FF_PER_FIELD_COMMENTS, isFF } from "../../../utils/feature-flags";
 import { flatten, isDefined, isMacOS } from "../../../utils/utilities";
 import { NodeIcon } from "../../Node/Node";
@@ -166,7 +166,7 @@ const OutlinerInnerTreeComponent: FC<OutlinerInnerTreeProps> = observer(({ regio
   }
 
   return (
-    <div className={cn("outliner-tree").toClassName()} ref={setRef}>
+    <Block name="outliner-tree" ref={setRef}>
       {!!height && (
         <Tree
           key={regions.group}
@@ -194,7 +194,7 @@ const OutlinerInnerTreeComponent: FC<OutlinerInnerTreeProps> = observer(({ regio
             : {})}
         />
       )}
-    </div>
+    </Block>
   );
 });
 
@@ -410,22 +410,20 @@ const RootTitle: FC<any> = observer(
     );
 
     return (
-      <div className={cn("outliner-item").toClassName()}>
-        <div className={cn("outliner-item").elem("content").toClassName()}>
-          {!props.isGroup && <div className={cn("outliner-item").elem("index").toClassName()}>{props.idx + 1}</div>}
-          <div className={cn("outliner-item").elem("title").toClassName()}>
+      <Block name="outliner-item">
+        <Elem name="content">
+          {!props.isGroup && <Elem name="index">{props.idx + 1}</Elem>}
+          <Elem name="title">
             {label}
-            {item?.text && (
-              <div className={cn("outliner-item").elem("text").toClassName()}>{item.text.replace(/\\n/g, "\n")}</div>
-            )}
+            {item?.text && <Elem name="text">{item.text.replace(/\\n/g, "\n")}</Elem>}
             {(item?.isDrawing || item?.incomplete) && (
-              <span className={cn("outliner-item").elem("incomplete").toClassName()}>
+              <Elem tag="span" name="incomplete">
                 <Tooltip title={`Incomplete ${item.type?.replace("region", "") ?? "region"}`}>
                   <IconWarning />
                 </Tooltip>
-              </span>
+              </Elem>
             )}
-          </div>
+          </Elem>
           {item?.hideable !== false && (
             <RegionControls
               item={item}
@@ -437,10 +435,10 @@ const RootTitle: FC<any> = observer(
               toggleCollapsed={toggleCollapsed}
             />
           )}
-        </div>
+        </Elem>
 
         {!collapsed && hasControls && isArea && (
-          <div className={cn("outliner-item").elem("ocr").toClassName()}>
+          <Elem name="ocr">
             <RegionItemDesc
               item={item}
               controls={controls}
@@ -448,9 +446,9 @@ const RootTitle: FC<any> = observer(
               setCollapsed={setCollapsed}
               selected={props.selected}
             />
-          </div>
+          </Elem>
         )}
-      </div>
+      </Block>
     );
   },
 );
@@ -508,43 +506,38 @@ const RegionControls: FC<RegionControlsProps> = injector(
     }, []);
 
     return (
-      <div
-        className={cn("outliner-item")
-          .elem("controls")
-          .mod({ withControls: hasControls, newUI: isFF(FF_DEV_3873) })
-          .toClassName()}
-      >
+      <Elem name="controls" mod={{ withControls: hasControls, newUI: isFF(FF_DEV_3873) }}>
         {isFF(FF_DEV_3873) ? (
           <Tooltip title={"Confidence Score"}>
-            <div className={cn("outliner-item").elem("control-wrapper").toClassName()}>
-              <div className={cn("outliner-item").elem("control").mod({ type: "predict" }).toClassName()}>
+            <Elem name="control-wrapper">
+              <Elem name="control" mod={{ type: "predict" }}>
                 {item?.origin === "prediction" && <IconSparks style={{ width: 18, height: 18 }} />}
-              </div>
-              <div className={cn("outliner-item").elem("control").mod({ type: "score" }).toClassName()}>
+              </Elem>
+              <Elem name="control" mod={{ type: "score" }}>
                 {isDefined(item?.score) && item.score.toFixed(2)}
-              </div>
-            </div>
+              </Elem>
+            </Elem>
           </Tooltip>
         ) : (
           <>
-            <div className={cn("outliner-item").elem("control").mod({ type: "score" }).toClassName()}>
+            <Elem name="control" mod={{ type: "score" }}>
               {isDefined(item?.score) && item.score.toFixed(2)}
-            </div>
-            <div className={cn("outliner-item").elem("control").mod({ type: "dirty" }).toClassName()}>
+            </Elem>
+            <Elem name="control" mod={{ type: "dirty" }}>
               {/* dirtyness is not implemented yet */}
-            </div>
-            <div className={cn("outliner-item").elem("control").mod({ type: "predict" }).toClassName()}>
+            </Elem>
+            <Elem name="control" mod={{ type: "predict" }}>
               {item?.origin === "prediction" && <IconSparks style={{ width: 18, height: 18 }} />}
-            </div>
+            </Elem>
           </>
         )}
-        <div className={cn("outliner-item").elem("wrapper").toClassName()}>
+        <Elem name={"wrapper"}>
           {store.hasInterface("annotations:copy-link") && isDefined(item?.annotation?.pk) && (
-            <div className={cn("outliner-item").elem("control").mod({ type: "menu" }).toClassName()}>
+            <Elem name="control" mod={{ type: "menu" }}>
               <RegionContextMenu item={item} />
-            </div>
+            </Elem>
           )}
-          <div className={cn("outliner-item").elem("control").mod({ type: "lock" }).toClassName()}>
+          <Elem name="control" mod={{ type: "lock" }}>
             <LockButton
               item={item}
               annotation={item?.annotation}
@@ -555,8 +548,8 @@ const RegionControls: FC<RegionControlsProps> = injector(
               look="string"
               tooltip={item?.locked ? "Unlock Region" : "Lock Region"}
             />
-          </div>
-          <div className={cn("outliner-item").elem("control").mod({ type: "visibility" }).toClassName()}>
+          </Elem>
+          <Elem name="control" mod={{ type: "visibility" }}>
             {isFF(FF_DEV_3873) ? (
               <RegionControlButton
                 variant="neutral"
@@ -579,9 +572,9 @@ const RegionControls: FC<RegionControlsProps> = injector(
                 )}
               </RegionControlButton>
             )}
-          </div>
+          </Elem>
           {hasControls && (
-            <div className={cn("outliner-item").elem("control").mod({ type: "visibility" }).toClassName()}>
+            <Elem name="control" mod={{ type: "visibility" }}>
               <RegionControlButton variant="neutral" look="string" onClick={onToggleCollapsed}>
                 <IconChevronLeft
                   style={{
@@ -589,10 +582,10 @@ const RegionControls: FC<RegionControlsProps> = injector(
                   }}
                 />
               </RegionControlButton>
-            </div>
+            </Elem>
           )}
-        </div>
-      </div>
+        </Elem>
+      </Elem>
     );
   }),
 );
@@ -620,14 +613,13 @@ const RegionItemDesc: FC<RegionItemOCSProps> = observer(({ item, collapsed, setC
   );
 
   return (
-    <div
-      className={cn("ocr")
-        .mod({ collapsed, empty: !(controls?.length > 0) })
-        .toClassName()}
+    <Block
+      name="ocr"
+      mod={{ collapsed, empty: !(controls?.length > 0) }}
       onClick={onClick}
       onDragStart={(e: any) => e.stopPropagation()}
     >
-      <div className={cn("ocr").elem("controls").toClassName()}>
+      <Elem name="controls">
         {controls.map((tag, idx) => {
           const View = Registry.getPerRegionView(tag.type, PER_REGION_MODES.REGION_LIST);
           const color = item.getOneColor();
@@ -646,8 +638,8 @@ const RegionItemDesc: FC<RegionItemOCSProps> = observer(({ item, collapsed, setC
             />
           ) : null;
         })}
-      </div>
-    </div>
+      </Elem>
+    </Block>
   );
 });
 
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/RegionLabel.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/RegionLabel.tsx
index 047a890e568e..d2f669012b24 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/RegionLabel.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/RegionLabel.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 
 export type RegionLabelProps = {
   item: any;
@@ -18,20 +18,18 @@ export const RegionLabel = observer(({ item }: RegionLabelProps) => {
     const labels: any[] = [].concat(...labelsInResults);
 
     return (
-      <div className={cn("labels-list").toClassName()}>
+      <Block name="labels-list">
         {labels.map((label, index) => {
           const color = label.background || "#000000";
 
           return [
             index ? ", " : null,
-            // This comes from an Elem tag that was set without a name. The CSS was fixed to make it work,
-            // but this is clearly bad CSS usage.
-            <div key={label.id} className={cn("labels-list").toClassName()} style={{ color }}>
+            <Elem key={label.id} style={{ color }}>
               {label.value || "No label"}
-            </div>,
+            </Elem>,
           ];
         })}
-      </div>
+      </Block>
     );
   }
   if (type.includes("tool")) {
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx
index 4570bf0c9ede..69277ca75842 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx
@@ -16,12 +16,14 @@ import { Dropdown } from "../../../common/Dropdown/Dropdown";
 // eslint-disable-next-line
 // @ts-ignore
 import { Menu } from "../../../common/Menu/Menu";
-import { cn } from "../../../utils/bem";
+import { BemWithSpecificContext } from "../../../utils/bem";
 import { SidePanelsContext } from "../SidePanelsContext";
 import "./ViewControls.scss";
 import { observer } from "mobx-react";
 import { FF_DEV_3873, isFF } from "../../../utils/feature-flags";
 
+const { Block, Elem } = BemWithSpecificContext();
+
 export type GroupingOptions = "manual" | "label" | "type";
 
 export type OrderingOptions = "score" | "date" | "mediaStartTime";
@@ -143,7 +145,7 @@ export const ViewControls: FC<ViewControlsProps> = observer(
     const renderOrderingDirectionIcon = orderingDirection === "asc" ? <IconSortUp /> : <IconSortDown />;
 
     return (
-      <div className={cn("view-controls").mod({ collapsed: context.locked }).toClassName()}>
+      <Block name="view-controls" mod={{ collapsed: context.locked }}>
         <Grouping
           value={grouping}
           options={["manual", "type", "label"]}
@@ -151,7 +153,7 @@ export const ViewControls: FC<ViewControlsProps> = observer(
           readableValueForKey={getGroupingLabels}
         />
         {grouping === "manual" && (
-          <div className={cn("view-controls").elem("sort").toClassName()}>
+          <Elem name="sort">
             <Grouping
               value={ordering}
               direction={orderingDirection}
@@ -162,10 +164,10 @@ export const ViewControls: FC<ViewControlsProps> = observer(
               extraIcon={renderOrderingDirectionIcon}
               width={230}
             />
-          </div>
+          </Elem>
         )}
         <ToggleRegionsVisibilityButton regions={regions} />
-      </div>
+      </Block>
     );
   },
 );
@@ -265,10 +267,10 @@ interface GroupingMenuItemProps<T extends string> {
 const GroupingMenuItem = <T extends string>({ value, name, label, direction, onChange }: GroupingMenuItemProps<T>) => {
   return (
     <Menu.Item name={name} onClick={() => onChange(name)}>
-      <div className={cn("view-controls").elem("label").toClassName()}>
+      <Elem name="label">
         {label.label}
         <DirectionIndicator direction={direction} name={name} value={value} />
-      </div>
+      </Elem>
     </Menu.Item>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/__tests__/OutlinerPanel.test.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/__tests__/OutlinerPanel.test.tsx
index 7da86efed30a..ad8da77f7f23 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/__tests__/OutlinerPanel.test.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/__tests__/OutlinerPanel.test.tsx
@@ -3,24 +3,16 @@ import { OutlinerPanel } from "../OutlinerPanel";
 
 // Mock the dependencies
 jest.mock("../../../../utils/bem", () => ({
-  cn: (block: string) => ({
-    elem: (elem: string) => ({
-      toClassName: () => `dm-${block}__${elem}`,
-      mod: (mods: any) => ({
-        toClassName: () => `dm-${block}__${elem}`,
-      }),
-    }),
-    mod: (mods: any) => ({
-      toClassName: () => `dm-${block}`,
-      mix: (...args: any[]) => ({
-        toClassName: () => `dm-${block}`,
-      }),
-    }),
-    toClassName: () => `dm-${block}`,
-    mix: (...args: any[]) => ({
-      toClassName: () => `dm-${block}`,
-    }),
-  }),
+  Block: ({ children, ...props }: any) => (
+    <div data-testid="block" {...props}>
+      {children}
+    </div>
+  ),
+  Elem: ({ children, ...props }: any) => (
+    <div data-testid="elem" {...props}>
+      {children}
+    </div>
+  ),
 }));
 
 jest.mock("../../PanelBase", () => ({
@@ -171,7 +163,7 @@ describe("OutlinerPanel", () => {
 
       expect(screen.getByTestId("empty-state")).toBeInTheDocument();
       expect(screen.queryByTestId("outliner-tree")).not.toBeInTheDocument();
-      expect(screen.queryByText("All regions hidden")).not.toBeInTheDocument(); // No filters-info message
+      expect(screen.queryByTestId("block")).not.toBeInTheDocument(); // No filters-info block
     });
 
     it("does not render empty state when regions exist", () => {
@@ -198,9 +190,15 @@ describe("OutlinerPanel", () => {
 
       render(<OutlinerPanel {...defaultProps} regions={regionsAllHidden} />);
 
+      expect(screen.getByTestId("block")).toBeInTheDocument();
       expect(screen.getByTestId("icon-info")).toBeInTheDocument();
-      expect(screen.getByText("All regions hidden")).toBeInTheDocument();
-      expect(screen.getByText("Adjust or remove the filters to view")).toBeInTheDocument();
+      const titleElem = screen.getAllByTestId("elem").find((elem) => elem.textContent === "All regions hidden");
+      expect(titleElem).toBeInTheDocument();
+
+      const descriptionElem = screen
+        .getAllByTestId("elem")
+        .find((elem) => elem.textContent === "Adjust or remove the filters to view");
+      expect(descriptionElem).toBeInTheDocument();
     });
 
     it("shows hidden regions count in footer when some regions are filtered", () => {
diff --git a/web/libs/editor/src/components/SidePanels/PanelBase.tsx b/web/libs/editor/src/components/SidePanels/PanelBase.tsx
index 13a6dbcbfe18..cfdf089c5199 100644
--- a/web/libs/editor/src/components/SidePanels/PanelBase.tsx
+++ b/web/libs/editor/src/components/SidePanels/PanelBase.tsx
@@ -8,7 +8,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { IconArrowLeft, IconArrowRight, IconOutlinerCollapse, IconOutlinerExpand } from "@humansignal/icons";
 
 import "./PanelBase.scss";
@@ -310,66 +310,42 @@ export const PanelBase: FC<PanelBaseProps> = ({
   );
 
   return (
-    <div
-      ref={panelRef as any}
-      className={cn("panel").mix(name).mod(mods).toClassName()}
-      style={{ ...style, ...coordinates }}
-    >
-      <div className={cn("panel").elem("content").toClassName()}>
+    <Block ref={panelRef} name="panel" mix={name} mod={mods} style={{ ...style, ...coordinates }}>
+      <Elem name="content">
         {!locked && (
-          <div
-            ref={headerRef as any}
-            className={cn("panel").elem("header").toClassName()}
-            onClick={!detached ? handleExpand : undefined}
-          >
-            {(visible || detached) && <div className={cn("panel").elem("title").toClassName()}>{title}</div>}
-
-            <div
-              className={cn("panel").elem("toggle").mod({ enabled: visible }).toClassName()}
+          <Elem ref={headerRef} name="header" onClick={!detached ? handleExpand : undefined}>
+            {(visible || detached) && <Elem name="title">{title}</Elem>}
+
+            <Elem
+              name="toggle"
+              mod={{ enabled: visible }}
               onClick={detached && !visible ? handleExpand : handleCollapse}
               data-tooltip={tooltipText}
             >
               {currentIcon}
-            </div>
-          </div>
+            </Elem>
+          </Elem>
         )}
         {visible && (
-          <div className={cn("panel").elem("body").toClassName()}>
-            <div
-              className={cn(name)
-                .mix(...(Array.isArray(mix) ? mix : [mix]))
-                .toClassName()}
-            >
+          <Elem name="body">
+            <Block name={name} mix={mix}>
               {children}
-            </div>
-          </div>
+            </Block>
+          </Elem>
         )}
-      </div>
+      </Elem>
 
       {visible && !positioning && !locked && (
-        <div
-          className={cn("panel")
-            .elem("resizers")
-            .mod({ locked: positioning || locked })
-            .toClassName()}
-          ref={resizerRef as any}
-        >
+        <Elem name="resizers" ref={resizerRef} mod={{ locked: positioning || locked }}>
           {resizers.map((res) => {
             const shouldRender = ((res === "left" || res === "right") && alignment !== res) || detached || detached;
 
             return shouldRender ? (
-              <div
-                key={res}
-                className={cn("panel")
-                  .elem("resizer")
-                  .mod({ drag: res === resizing })
-                  .toClassName()}
-                data-resize={res}
-              />
+              <Elem key={res} name="resizer" mod={{ drag: res === resizing }} data-resize={res} />
             ) : null;
           })}
-        </div>
+        </Elem>
       )}
-    </div>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/SidePanels.tsx b/web/libs/editor/src/components/SidePanels/SidePanels.tsx
index 1500d8c992f1..126ad9024c78 100644
--- a/web/libs/editor/src/components/SidePanels/SidePanels.tsx
+++ b/web/libs/editor/src/components/SidePanels/SidePanels.tsx
@@ -3,7 +3,7 @@
 
 import { observer } from "mobx-react";
 import { type CSSProperties, type FC, Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { DetailsPanel } from "./DetailsPanel/DetailsPanel";
 import { OutlinerPanel } from "./OutlinerPanel/OutlinerPanel";
 
@@ -483,30 +483,24 @@ const SidePanelsComponent: FC<SidePanelsProps> = ({ currentEntity, panelsHidden,
 
   return (
     <SidePanelsContext.Provider value={contextValue}>
-      <div
+      <Block
         ref={(el: HTMLDivElement | null) => {
           if (el) {
             rootRef.current = el;
             setViewportSizeMatch(el.clientWidth <= maxWindowWidth);
           }
         }}
-        className={cn("sidepanels")
-          .mod({ collapsed: sidepanelsCollapsed, newLabelingUI: isFF(FF_DEV_3873) })
-          .toClassName()}
+        name="sidepanels"
         style={{
           ...padding,
         }}
+        mod={{ collapsed: sidepanelsCollapsed, newLabelingUI: isFF(FF_DEV_3873) }}
       >
         {initialized && (
           <>
-            <div
-              className={cn("sidepanels")
-                .elem("content")
-                .mod({ resizing: resizing || positioning })
-                .toClassName()}
-            >
+            <Elem name="content" mod={{ resizing: resizing || positioning }}>
               {children}
-            </div>
+            </Elem>
             {panelsHidden !== true && (
               <>
                 {Object.entries(panels).map(([key, panel]) => {
@@ -517,22 +511,16 @@ const SidePanelsComponent: FC<SidePanelsProps> = ({ currentEntity, panelsHidden,
                   }
 
                   return (
-                    <div
-                      key={key}
-                      className={cn("sidepanels")
-                        .elem("wrapper")
-                        .mod({ align: key, snap: snap === key && snap !== undefined })
-                        .toClassName()}
-                    >
+                    <Elem key={key} name="wrapper" mod={{ align: key, snap: snap === key && snap !== undefined }}>
                       {content}
-                    </div>
+                    </Elem>
                   );
                 })}
               </>
             )}
           </>
         )}
-      </div>
+      </Block>
     </SidePanelsContext.Provider>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx b/web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx
index c8a3cd19cd4f..052ba75ef73b 100644
--- a/web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx
+++ b/web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx
@@ -8,7 +8,7 @@ import {
   type ReactNode,
   useEffect,
 } from "react";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import {
   IconChevronLeft,
   IconChevronRight,
@@ -382,11 +382,7 @@ export const PanelTabsBase: FC<BasePropsWithChildren> = ({
   };
 
   return (
-    <div
-      ref={panelRef as any}
-      className={cn("tabs-panel").mod(mods).toClassName()}
-      style={{ ...style, ...coordinates }}
-    >
+    <Block ref={panelRef} name="tabs-panel" mod={mods} style={{ ...style, ...coordinates }}>
       {isBottomPanel && collapsibleBottomPanel && !bottomCollapsed && (
         <div
           className="w-full h-2 absolute -top-2 left-0 cursor-row-resize bg-neutral-emphasis hover:bg-primary-border active:bg-primary-border transition-colors duration-100 select-none z-10"
@@ -397,66 +393,58 @@ export const PanelTabsBase: FC<BasePropsWithChildren> = ({
           tabIndex={-1}
         />
       )}
-      <div className={cn("tabs-panel").elem("content").toClassName()}>
+      <Elem name="content">
         {!locked && collapsedHeader && (
           <>
             {isChildOfGroup && visible && (
-              <div
-                className={cn("tabs-panel")
-                  .elem("grouped-top")
-                  .mod({ drag: "grouped-top" === resizing })
-                  .toClassName()}
-                ref={resizeGroup as any}
+              <Elem
+                name="grouped-top"
+                ref={resizeGroup}
+                mod={{ drag: "grouped-top" === resizing }}
                 data-resize={"grouped-top"}
               />
             )}
-            <div
-              ref={headerRef as any}
+            <Elem
+              ref={headerRef}
               onClick={() => {
                 if (collapsed) handleGroupPanelToggle();
               }}
               id={key}
-              className={cn("tabs-panel").elem("header").mod({ collapsed }).toClassName()}
+              mod={{ collapsed }}
+              name="header"
             >
-              <div className={cn("tabs-panel").elem("header-left").toClassName()}>
-                {!collapsed && (
-                  <IconOutlinerDrag
-                    className={cn("tabs-panel").elem("icon").toClassName()}
-                    style={{ pointerEvents: "none" }}
-                  />
-                )}
-                {!visible && !collapsed && (
-                  <div className={cn("tabs-panel").elem("title").toClassName()}>
-                    {panelViews.map((view) => view.title).join(" ")}
-                  </div>
-                )}
-              </div>
-              <div className={cn("tabs-panel").elem("header-right").toClassName()}>
+              <Elem name="header-left">
+                {!collapsed && <Elem name="icon" style={{ pointerEvents: "none" }} tag={IconOutlinerDrag} />}
+                {!visible && !collapsed && <Elem name="title">{panelViews.map((view) => view.title).join(" ")}</Elem>}
+              </Elem>
+              <Elem name="header-right">
                 {(!detached || collapsed) && (
-                  <div
-                    className={cn("tabs-panel").elem("toggle").mod({ detached, collapsed, alignment }).toClassName()}
+                  <Elem
+                    name="toggle"
+                    mod={{ detached, collapsed, alignment }}
                     onClick={handleGroupPanelToggle}
                     data-tooltip={`${tooltipText} Group`}
                   >
                     {Side.left === alignment ? <IconChevronLeft /> : <IconChevronRight />}
-                  </div>
+                  </Elem>
                 )}
                 {!collapsed && (
-                  <div
-                    className={cn("tabs-panel").elem("toggle").mod({ detached, collapsed, alignment }).toClassName()}
+                  <Elem
+                    name="toggle"
+                    mod={{ detached, collapsed, alignment }}
                     onClick={handlePanelToggle}
                     data-tooltip={tooltipText}
                   >
                     {visible ? <IconCollapseSmall /> : <IconExpandSmall />}
-                  </div>
+                  </Elem>
                 )}
-              </div>
-            </div>
+              </Elem>
+            </Elem>
           </>
         )}
         {visible && !collapsed && (
-          <div className={cn("tabs-panel").elem("body").toClassName()}>
-            {lockPanelContents && <div className={cn("tabs-panel").elem("shield").toClassName()} />}
+          <Elem name="body">
+            {lockPanelContents && <Elem name="shield" />}
             {(() => {
               const onlyChild = React.Children.only(children);
               if (React.isValidElement(onlyChild) && (onlyChild.type as any).displayName === "Tabs") {
@@ -465,40 +453,26 @@ export const PanelTabsBase: FC<BasePropsWithChildren> = ({
                   bottomCollapsed,
                   setBottomCollapsed,
                   settings,
-                  panelHeight,
                 } as Partial<typeof onlyChild.props>);
               }
               return children;
             })()}
-          </div>
+          </Elem>
         )}
-      </div>
+      </Elem>
       {visible && !positioning && !locked && (
-        <div
-          className={cn("tabs-panel")
-            .elem("resizers")
-            .mod({ locked: positioning || locked })
-            .toClassName()}
-          ref={resizerRef as any}
-        >
+        <Elem name="resizers" ref={resizerRef} mod={{ locked: positioning || locked }}>
           {resizers.map((res) => {
             const shouldRender = collapsed
               ? false
               : ((res === "left" || res === "right") && alignment !== res) || detached;
 
             return shouldRender ? (
-              <div
-                key={res}
-                className={cn("tabs-panel")
-                  .elem("resizer")
-                  .mod({ drag: res === resizing })
-                  .toClassName()}
-                data-resize={res}
-              />
+              <Elem key={res} name="resizer" mod={{ drag: res === resizing }} data-resize={res} />
             ) : null;
           })}
-        </div>
+        </Elem>
       )}
-    </div>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/TabPanels/SideTabsPanels.tsx b/web/libs/editor/src/components/SidePanels/TabPanels/SideTabsPanels.tsx
index ec31a33288d1..9e9c36f2b87c 100644
--- a/web/libs/editor/src/components/SidePanels/TabPanels/SideTabsPanels.tsx
+++ b/web/libs/editor/src/components/SidePanels/TabPanels/SideTabsPanels.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { type FC, Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import { useMedia } from "../../../hooks/useMedia";
 import ResizeObserver from "../../../utils/resize-observer";
 import { clamp } from "../../../utils/utilities";
@@ -540,34 +540,29 @@ const SideTabsPanelsComponent: FC<SidePanelsProps> = ({
 
   return (
     <SidePanelsContext.Provider value={contextValue}>
-      <div
+      <Block
         ref={(el: HTMLDivElement | null) => {
           if (el) {
             rootRef.current = el;
             setViewportSizeMatch(el.clientWidth <= maxWindowWidth);
           }
         }}
-        className={cn("sidepanels").mod({ collapsed: panelBreakPoint }).toClassName()}
+        name="sidepanels"
+        mod={{ collapsed: panelBreakPoint }}
         style={{ ...padding }}
       >
         {initialized && (
           <>
-            <div
-              ref={contentRef}
-              className={cn("sidepanels")
-                .elem("content")
-                .mod({ resizing: lockPanelContents || positioning })
-                .toClassName()}
-            >
+            <Elem ref={contentRef} name="content" mod={{ resizing: lockPanelContents || positioning }}>
               {children}
-            </div>
+            </Elem>
             {panelsHidden !== true && panelBreakPoint ? (
               <>
-                <div className={cn("sidepanels").elem("wrapper").toClassName()}>
+                <Elem name="wrapper">
                   <PanelTabsBase {...emptyBaseProps} contentRef={contentRef} isBottomPanel={true}>
                     <Tabs {...emptyBaseProps} />
                   </PanelTabsBase>
-                </div>
+                </Elem>
               </>
             ) : (
               <>
@@ -586,22 +581,20 @@ const SideTabsPanelsComponent: FC<SidePanelsProps> = ({
                     return <Fragment key={panelType}>{content}</Fragment>;
                   }
                   return (
-                    <div
+                    <Elem
                       key={panelType}
-                      className={cn("sidepanels")
-                        .elem("wrapper")
-                        .mod({ align: panelType, snap: !lockPanelContents && snap === panelType && snap !== undefined })
-                        .toClassName()}
+                      name="wrapper"
+                      mod={{ align: panelType, snap: !lockPanelContents && snap === panelType && snap !== undefined }}
                     >
                       {content}
-                    </div>
+                    </Elem>
                   );
                 })}
               </>
             )}
           </>
         )}
-      </div>
+      </Block>
     </SidePanelsContext.Provider>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx b/web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx
index 017990962feb..0740320135d5 100644
--- a/web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx
+++ b/web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx
@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 import { IconOutlinerDrag, IconCollapseSmall, IconExpandSmall } from "@humansignal/ui";
 import { useDrag } from "../../../hooks/useDrag";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import { DEFAULT_PANEL_HEIGHT } from "../constants";
 import "./Tabs.scss";
 import { type BaseProps, Side, type TabProps } from "./types";
@@ -158,30 +158,24 @@ const Tab = ({
   );
 
   const Label = () => (
-    <div
+    <Elem
       id={`${panelKey}_${tabIndex}_droppable`}
-      className={cn("panel-tabs")
-        .elem("tab")
-        .mod({ active: locked ? tabIndex === breakPointActiveTab : active })
-        .toClassName()}
+      name="tab"
+      mod={{ active: locked ? tabIndex === breakPointActiveTab : active }}
     >
-      {!locked && <IconOutlinerDrag className={cn("panel-tabs").elem("icon").toClassName()} />}
+      {!locked && <Elem name="icon" tag={IconOutlinerDrag} />}
       {tabText}
-    </div>
+    </Elem>
   );
 
   return (
-    <div className={cn("panel-tabs").toClassName()}>
-      <div
-        className={cn("panel-tabs").elem("draggable-tab").toClassName()}
-        id={`${tabText}-draggable`}
-        ref={tabRef as any}
-      >
+    <Block name="panel-tabs">
+      <Elem name="draggable-tab" id={`${tabText}-draggable`} ref={tabRef}>
         <Label />
-      </div>
-      <div
-        ref={ghostTabRef as any}
-        className={cn("panel-tabs").elem("ghost-tab").toClassName()}
+      </Elem>
+      <Elem
+        ref={ghostTabRef}
+        name="ghost-tab"
         style={{
           width: `${panelWidth}px`,
           height: "fit-content",
@@ -190,9 +184,9 @@ const Tab = ({
         }}
       >
         <Label />
-        {shouldShowGhostTab && <div className={cn("panel-tabs").elem("contents").toClassName()}>{children}</div>}
-      </div>
-    </div>
+        {shouldShowGhostTab && <Elem name="contents">{children}</Elem>}
+      </Elem>
+    </Block>
   );
 };
 
@@ -211,16 +205,13 @@ export const Tabs = (
 
   return (
     <>
-      <div className={cn("tabs").toClassName()}>
-        <div className={cn("tabs").elem("tabs-row").toClassName()}>
+      <Block name="tabs">
+        <Elem name="tabs-row">
           {props.panelViews.map((view, index) => {
             const { component: Component } = view;
 
             return (
-              <div
-                className={cn("tabs").elem("tab-container").mod({ active: view.active }).toClassName()}
-                key={`${view.title}-${index}-tab`}
-              >
+              <Elem name="tab-container" key={`${view.title}-${index}-tab`} mod={{ active: view.active }}>
                 <Tab
                   name={view.name}
                   rootRef={props.root}
@@ -239,17 +230,14 @@ export const Tabs = (
                   breakPointActiveTab={props.breakPointActiveTab}
                   setBreakPointActiveTab={props.setBreakPointActiveTab}
                 >
-                  <div className={cn("tabs").elem("content").toClassName()}>
+                  <Elem name="content">
                     <Component key={`${view.title}-${index}-ghost`} {...props} name={"outliner"} />
-                  </div>
+                  </Elem>
                 </Tab>
-              </div>
+              </Elem>
             );
           })}
-          <div
-            id={`${props.name}_${props.panelViews.length}-droppable-space`}
-            className={cn("tabs").elem("drop-space-after").toClassName()}
-          />
+          <Elem id={`${props.name}_${props.panelViews.length}-droppable-space`} name="drop-space-after" />
           {props.isBottomPanel && props.settings?.collapsibleBottomPanel && (
             <Button
               className="collapsible-bottom-panel-toggle"
@@ -273,13 +261,13 @@ export const Tabs = (
               {props.bottomCollapsed ? <IconExpandSmall /> : <IconCollapseSmall />}
             </Button>
           )}
-        </div>
+        </Elem>
         {!props.bottomCollapsed && (
-          <div className={cn("tabs").elem("contents").toClassName()} style={{ overflow: "auto" }}>
+          <Elem name="contents" style={{ overflow: "auto" }}>
             {ActiveComponent && <ActiveComponent {...props} />}
-          </div>
+          </Elem>
         )}
-      </div>
+      </Block>
     </>
   );
 };
diff --git a/web/libs/editor/src/components/TimeDurationControl/TimeBox.tsx b/web/libs/editor/src/components/TimeDurationControl/TimeBox.tsx
index 293a29fa767c..86f88b3ca077 100644
--- a/web/libs/editor/src/components/TimeDurationControl/TimeBox.tsx
+++ b/web/libs/editor/src/components/TimeDurationControl/TimeBox.tsx
@@ -1,5 +1,5 @@
 import React, { type FC, useCallback, useEffect, useState } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { MaskUtil } from "../../utils/InputMask";
 import Label from "../../common/Label/Label";
 
@@ -76,9 +76,10 @@ export const TimeBox: FC<TimerProps> = ({ sidepanel = false, value, readonly = f
 
   const renderInputTime = () => {
     return (
-      <input
-        className={cn("time-box").elem("input-time").toClassName()}
+      <Elem
+        name={"input-time"}
         maxLength={12}
+        tag={"input"}
         ref={inputRef}
         type="text"
         readOnly={readonly}
@@ -91,9 +92,9 @@ export const TimeBox: FC<TimerProps> = ({ sidepanel = false, value, readonly = f
   };
 
   const timeBoxContent = (
-    <div className={cn("time-box").mod({ sidepanel }).toClassName()} {...props}>
+    <Block name="time-box" mod={{ sidepanel }} {...props}>
       {renderInputTime()}
-    </div>
+    </Block>
   );
 
   return label ? (
diff --git a/web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx b/web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx
index f0f97ba16c42..e06589656ae5 100644
--- a/web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx
+++ b/web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import { cn } from "../../utils/bem";
+import { Block } from "../../utils/bem";
 
 import "./TimeDurationControl.scss";
 import { TimeBox } from "./TimeBox";
@@ -44,7 +44,7 @@ export const TimeDurationControl: FC<TimerProps> = ({
   };
 
   return (
-    <div className={cn("timer-duration-control").toClassName()}>
+    <Block name="timer-duration-control">
       <TimeBox
         sidepanel={isSidepanel}
         readonly={startTimeReadonly}
@@ -71,6 +71,6 @@ export const TimeDurationControl: FC<TimerProps> = ({
           label={showLabels ? "Duration" : undefined}
         />
       )}
-    </div>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Controls.tsx b/web/libs/editor/src/components/Timeline/Controls.tsx
index 0d893b92752a..cffd10a377f8 100644
--- a/web/libs/editor/src/components/Timeline/Controls.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls.tsx
@@ -18,7 +18,7 @@ import { Button, type ButtonProps, Space } from "@humansignal/ui";
 import { type FC, memo, type MouseEvent, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { WithHotkey } from "../../common/Hotkey/WithHotkey";
 import { Hotkey, type HotkeyList } from "../../core/Hotkey";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import { TimelineContext } from "./Context";
 import "./Controls.scss";
@@ -116,11 +116,7 @@ export const Controls: FC<TimelineControlsProps> = memo(
 
     const renderControls = () => {
       return (
-        <Space
-          className={cn("timeline-controls").elem("group").toClassName()}
-          size="small"
-          style={{ gridAutoColumns: "auto" }}
-        >
+        <Elem name="group" tag={Space} size="small" style={{ gridAutoColumns: "auto" }}>
           <ConfigControl
             onSetModal={onSetConfigModal}
             onAmpChange={props.onAmpChange}
@@ -141,7 +137,7 @@ export const Controls: FC<TimelineControlsProps> = memo(
             onSetModal={onSetVolumeModal}
             audioModal={audioModal}
           />
-        </Space>
+        </Elem>
       );
     };
 
@@ -178,13 +174,8 @@ export const Controls: FC<TimelineControlsProps> = memo(
     };
 
     return (
-      <Space className={cn("timeline-controls").toClassName()} spread style={{ gridAutoColumns: "auto" }}>
-        {buffering && (
-          <div
-            className={cn("timeline-controls").elem("buffering").toClassName()}
-            aria-label="Buffering Media Source"
-          />
-        )}
+      <Block name="timeline-controls" tag={Space} spread style={{ gridAutoColumns: "auto" }}>
+        {buffering && <Elem name="buffering" aria-label="Buffering Media Source" />}
         {mediaType === "audio" ? (
           renderControls()
         ) : (
@@ -316,7 +307,7 @@ export const Controls: FC<TimelineControlsProps> = memo(
             />
             {customControls?.rightCenter}
           </Space>
-          <Space className={cn("timeline-controls").elem("group").toClassName()} collapsed>
+          <Elem name="group" tag={Space} collapsed>
             {!disableFrames && allowViewCollapse && (
               <ControlButton tooltip="Toggle Timeline" onClick={() => onToggleCollapsed?.(!collapsed)}>
                 {collapsed ? <IconExpand /> : <IconCollapse />}
@@ -327,10 +318,10 @@ export const Controls: FC<TimelineControlsProps> = memo(
                 {fullscreen ? <IconFullscreenExit /> : <IconFullscreen />}
               </ControlButton>
             )}
-          </Space>
+          </Elem>
         </Space>
 
-        <Space className={cn("timeline-controls").elem("group").toClassName()} size="small">
+        <Elem name="group" tag={Space} size="small">
           {mediaType === "audio" ? (
             <>
               {customControls?.right}
@@ -357,8 +348,8 @@ export const Controls: FC<TimelineControlsProps> = memo(
               />
             </>
           )}
-        </Space>
-      </Space>
+        </Elem>
+      </Block>
     );
   },
 );
@@ -390,14 +381,14 @@ const TimeDisplay: FC<TimeDisplay> = ({ currentTime, position, duration, framera
   const totalTimeFormatted = formatter({ time: duration, ...commonOptions });
 
   return (
-    <div className={cn("timeline-controls").elem("time").toClassName()}>
-      <div className={cn("timeline-controls").elem("time-section").toClassName()}>
+    <Elem name="time">
+      <Elem name="time-section">
         <Time time={currentTime} position={currentTimeFormatted} />
-      </div>
-      <div className={cn("timeline-controls").elem("time-section").toClassName()}>
+      </Elem>
+      <Elem name="time-section">
         <Time time={Math.max(duration, 0)} position={totalTimeFormatted} />
-      </div>
-    </div>
+      </Elem>
+    </Elem>
   );
 };
 
diff --git a/web/libs/editor/src/components/Timeline/Controls/AudioControl.tsx b/web/libs/editor/src/components/Timeline/Controls/AudioControl.tsx
index 1e4509c806a7..21433deeb3a9 100644
--- a/web/libs/editor/src/components/Timeline/Controls/AudioControl.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls/AudioControl.tsx
@@ -1,6 +1,6 @@
 import type React from "react";
 import { type FC, type MouseEvent, useEffect, useState } from "react";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 
 import "./AudioControl.scss";
 import { IconSoundConfig, IconSoundMutedConfig } from "@humansignal/ui";
@@ -53,7 +53,7 @@ export const AudioControl: FC<AudioControlProps> = ({ volume, onVolumeChange, on
 
   const renderModal = () => {
     return (
-      <div className={cn("audio-control").elem("modal").toClassName()}>
+      <Elem name="modal">
         <Slider
           min={0}
           max={MAX_VOL}
@@ -63,29 +63,26 @@ export const AudioControl: FC<AudioControlProps> = ({ volume, onVolumeChange, on
           info={"Increase or decrease the volume of the audio"}
         />
         {renderMuteButton()}
-      </div>
+      </Elem>
     );
   };
 
   const renderMuteButton = () => {
     return (
-      <div className={cn("audio-control").elem("mute").toClassName()}>
-        <div className={cn("audio-control").elem("mute-button").toClassName()} onClick={handleSetMute}>
+      <Elem name={"mute"}>
+        <Elem name="mute-button" onClick={handleSetMute}>
           {isMuted ? "Unmute" : "Mute"}
-        </div>
-      </div>
+        </Elem>
+      </Elem>
     );
   };
 
   return (
-    <div
-      className={cn("audio-control").toClassName()}
-      onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
-    >
+    <Block name="audio-control" onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>
       <ControlButton look={audioModal ? "filled" : undefined} onClick={onSetModal}>
         {isMuted ? <IconSoundMutedConfig /> : <IconSoundConfig />}
       </ControlButton>
       {audioModal && renderModal()}
-    </div>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx
index 6b62e118cfe3..62508797c1e3 100644
--- a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx
@@ -2,7 +2,7 @@ import type React from "react";
 import { type FC, type MouseEvent, useContext, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Toggle } from "@humansignal/ui";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 
 import { IconConfig } from "@humansignal/icons";
 import { TimelineContext } from "../Context";
@@ -156,32 +156,33 @@ export const ConfigControl: FC<ConfigControlProps> = ({
 
   const renderLayerToggles = () => {
     return (
-      <div className={cn("audio-config").elem("buttons").toClassName()}>
-        <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetTimeline}>
+      <Elem name={"buttons"}>
+        <Elem name="menu-button" onClick={handleSetTimeline}>
           {isTimeline ? "Hide" : "Show"} timeline
-        </div>
-        <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetAudioWave}>
+        </Elem>
+        <Elem name="menu-button" onClick={handleSetAudioWave}>
           {isAudioWave ? "Hide" : "Show"} audio wave
-        </div>
+        </Elem>
         {isFF(FF_AUDIO_SPECTROGRAMS) && (
-          <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetSpectrogram}>
+          <Elem name="menu-button" onClick={handleSetSpectrogram}>
             {isSpectrogram ? "Hide" : "Show"} spectrogram
-          </div>
+          </Elem>
         )}
-      </div>
+      </Elem>
     );
   };
 
   const renderModal = () => {
     const modalJSX = (
-      <div
-        className={cn("audio-config").elem("modal").toClassName()}
+      <Elem
+        block="audio-config"
+        name="modal"
         ref={modalRef}
         onClick={(e: MouseEvent<HTMLDivElement>) => e.stopPropagation()}
         style={{ opacity: 0, position: "fixed" }}
       >
-        <div className={cn("audio-config").elem("scroll-content").toClassName()}>
-          <div className={cn("audio-config").elem("section-header").toClassName()}>Playback Settings</div>
+        <Elem name="scroll-content">
+          <Elem name="section-header">Playback Settings</Elem>
           <Slider
             min={MIN_SPEED}
             max={MAX_SPEED}
@@ -200,47 +201,43 @@ export const ConfigControl: FC<ConfigControlProps> = ({
             info={"Increase or decrease the appearance of amplitude"}
             onChange={handleChangeAmp}
           />
-          <div className={cn("audio-config").elem("toggle").toClassName()}>
+          <Elem name="toggle">
             <Toggle
               checked={settings?.loopRegion}
               onChange={(e) => changeSetting?.("loopRegion", e.target.checked)}
               label="Loop Regions"
               labelProps={{ size: "small" }}
             />
-          </div>
-          <div className={cn("audio-config").elem("toggle").toClassName()}>
+          </Elem>
+          <Elem name="toggle">
             <Toggle
               checked={settings?.autoPlayNewSegments}
               onChange={(e) => changeSetting?.("autoPlayNewSegments", e.target.checked)}
               label="Auto-play New Regions"
               labelProps={{ size: "small" }}
             />
-          </div>
+          </Elem>
 
           {isFF(FF_AUDIO_SPECTROGRAMS) && (
             <>
-              <div className={cn("audio-config").elem("section-header").toClassName()}>Spectrogram Settings</div>
+              <Elem name="section-header">Spectrogram Settings</Elem>
               <SpectrogramControl waveform={waveform} />
             </>
           )}
-        </div>
+        </Elem>
         {renderLayerToggles()}
-      </div>
+      </Elem>
     );
 
     return typeof document !== "undefined" ? createPortal(modalJSX, document.body) : null;
   };
 
   return (
-    <div
-      className={cn("audio-config").toClassName()}
-      ref={buttonRef as any}
-      onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
-    >
+    <Block name="audio-config" ref={buttonRef} onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>
       <ControlButton look={configModal ? "filled" : undefined} onClick={onSetModal} aria-label="Audio settings">
         {<IconConfig />}
       </ControlButton>
       {configModal && renderModal()}
-    </div>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Controls/Slider.tsx b/web/libs/editor/src/components/Timeline/Controls/Slider.tsx
index 9024faeb6d33..c6110d8abbd1 100644
--- a/web/libs/editor/src/components/Timeline/Controls/Slider.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls/Slider.tsx
@@ -2,7 +2,7 @@ import type React from "react";
 import { type FC, useEffect, useRef, useState } from "react";
 import { Tooltip } from "@humansignal/ui";
 import { IconInfoConfig } from "@humansignal/icons";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 
 import "./Slider.scss";
 
@@ -67,40 +67,40 @@ export const Slider: FC<SliderProps> = ({
 
   const renderInput = () => {
     return (
-      <div className={cn("audio-slider").elem("control").toClassName()}>
-        <div className={cn("audio-slider").elem("info").toClassName()}>
+      <Elem name="control">
+        <Elem name="info">
           {description}
           {info && (
             <Tooltip title={info}>
               <IconInfoConfig />
             </Tooltip>
           )}
-        </div>
+        </Elem>
         {showInput && (
-          <input
-            className={cn("audio-slider")
-              .elem("input")
-              .mod(
-                valueError !== undefined &&
-                  (typeof valueError === "string" || valueError > max || valueError < min) && { error: "control" },
-              )
-              .toClassName()}
+          <Elem
+            name="input"
+            tag="input"
             type="text"
+            mod={
+              valueError !== undefined &&
+              (typeof valueError === "string" || valueError > max || valueError < min) && { error: "control" }
+            }
             min={min}
             max={max}
             value={valueError === undefined ? value : valueError}
             onChange={handleChangeInputValue}
           />
         )}
-      </div>
+      </Elem>
     );
   };
 
   return (
-    <div className={cn("audio-slider").toClassName()}>
-      <input
-        ref={sliderRef as any}
-        className={cn("audio-slider").elem("range").toClassName()}
+    <Block name="audio-slider">
+      <Elem
+        ref={sliderRef}
+        name="range"
+        tag="input"
         type="range"
         min={min}
         max={max}
@@ -109,6 +109,6 @@ export const Slider: FC<SliderProps> = ({
         onChange={handleChangeInputValue}
       />
       {renderInput()}
-    </div>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Controls/SpectrogramControl.tsx b/web/libs/editor/src/components/Timeline/Controls/SpectrogramControl.tsx
index c6dda4f6b091..f907cdc9e599 100644
--- a/web/libs/editor/src/components/Timeline/Controls/SpectrogramControl.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls/SpectrogramControl.tsx
@@ -1,7 +1,7 @@
 import type React from "react";
 import { type FC, useContext, useEffect, useMemo, useState } from "react";
 import { Tooltip, Select } from "@humansignal/ui";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import { Range } from "../../../common/Range/Range";
 import { IconInfoConfig, IconWarningCircleFilled } from "@humansignal/icons";
 import { TimelineContext } from "../Context";
@@ -424,7 +424,7 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
   const isMelScaleSelected = displayScale === "mel";
 
   return (
-    <div className={cn("spectrogram-controls").toClassName()}>
+    <Block name="spectrogram-controls">
       {showWarning && (
         <Tooltip title="High FFT or mel band values may cause performance issues or artifacts.">
           <IconWarningCircleFilled
@@ -442,7 +442,7 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
           />
         </Tooltip>
       )}
-      <div className={cn("spectrogram-controls").elem("slider-container").toClassName()}>
+      <Elem name="slider-container">
         <Slider
           min={0}
           max={FFT_SAMPLE_VALUES.length - 1}
@@ -451,32 +451,34 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
           showInput={false}
           onChange={handleChangeFftSamplesSlider}
         />
-        <div className={cn("spectrogram-controls").elem("control").toClassName()}>
-          <div className={cn("spectrogram-controls").elem("info").toClassName()}>
+        <Elem name="control">
+          <Elem name="info">
             FFT Samples
             <Tooltip title={fftInfoText}>
               <IconInfoConfig />
             </Tooltip>
-          </div>
-          <input
-            className={cn("spectrogram-controls").elem("input").mod({ error: fftInputError }).toClassName()}
+          </Elem>
+          <Elem
+            tag="input"
+            name="input"
             type="text"
             value={fftInputText}
             onChange={handleFftInputChange}
+            mod={{ error: fftInputError }}
           />
-        </div>
-      </div>
-      <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
-        <div className={cn("spectrogram-controls").elem("info").toClassName()}>
+        </Elem>
+      </Elem>
+      <Elem name="spectrogram-controls">
+        <Elem name="info">
           Scale
           <Tooltip title="Determines the frequency scale mapping: Linear, Logarithmic, or Mel (perceptual).">
             <IconInfoConfig />
           </Tooltip>
-        </div>
+        </Elem>
         <Select value={displayScale} onChange={handleChangeScale} options={SCALE_OPTIONS} style={{ width: "100%" }} />
-      </div>
+      </Elem>
       {isMelScaleSelected && (
-        <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
+        <Elem name="spectrogram-controls">
           <Slider
             min={20}
             max={220}
@@ -486,9 +488,9 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
             info={"Specifies the number of frequency bands using the Mel scale. "}
             onChange={handleChangeNumberOfMelBands}
           />
-        </div>
+        </Elem>
       )}
-      <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
+      <Elem name="spectrogram-controls">
         <Range
           multi
           continuous
@@ -500,16 +502,17 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
           onChange={handleRangeChange}
           size={200}
         />
-        <div className={cn("spectrogram-controls").elem("control").toClassName()}>
-          <div className={cn("spectrogram-controls").elem("info").toClassName()}>
+        <Elem name="control">
+          <Elem name="info">
             Spectogram dB
             <Tooltip title="Controls the range of decibel values shown in the spectrogram. Lower values show quieter sounds.">
               <IconInfoConfig />
             </Tooltip>
-          </div>
-          <div className={cn("spectrogram-controls").elem("input-group").toClassName()}>
-            <input
-              className={cn("spectrogram-controls").elem("input").toClassName()}
+          </Elem>
+          <Elem name="input-group">
+            <Elem
+              name="input"
+              tag="input"
               type="number"
               value={displayMinDb}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -521,9 +524,12 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
               min={-120}
               max={displayMaxDb - 10}
             />
-            <span className={cn("spectrogram-controls").elem("separator").toClassName()}>to</span>
-            <input
-              className={cn("spectrogram-controls").elem("input").toClassName()}
+            <Elem tag="span" name="separator">
+              to
+            </Elem>
+            <Elem
+              name="input"
+              tag="input"
               type="number"
               value={displayMaxDb}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -535,20 +541,20 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
               min={displayMinDb + 10}
               max={0}
             />
-          </div>
-        </div>
-      </div>
-      <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
-        <div className={cn("spectrogram-controls").elem("label").toClassName()}>Windowing Function</div>
+          </Elem>
+        </Elem>
+      </Elem>
+      <Elem name="spectrogram-controls">
+        <Elem name="label">Windowing Function</Elem>
         <Select
           value={displayWindowFunc}
           onChange={handleChangeWindowingFunction}
           options={WINDOWING_OPTIONS}
           style={{ width: "100%" }}
         />
-      </div>
-      <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
-        <div className={cn("spectrogram-controls").elem("label").toClassName()}>Color Scheme</div>
+      </Elem>
+      <Elem name="spectrogram-controls">
+        <Elem name="label">Color Scheme</Elem>
         <Select
           value={displayColorScheme}
           onChange={handleChangeColorScheme}
@@ -559,7 +565,7 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
           listHeight={320}
           className="color-scheme-select"
         />
-      </div>
-    </div>
+      </Elem>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Seeker.tsx b/web/libs/editor/src/components/Timeline/Seeker.tsx
index 566cc4e1b68f..04cbd567eb63 100644
--- a/web/libs/editor/src/components/Timeline/Seeker.tsx
+++ b/web/libs/editor/src/components/Timeline/Seeker.tsx
@@ -1,6 +1,6 @@
 import clamp from "lodash/clamp";
 import { type FC, type ReactElement, useCallback, useRef } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import type { TimelineMinimapProps } from "./Types";
 
 import "./Seeker.scss";
@@ -126,21 +126,11 @@ export const Seeker: FC<SeekerProps> = ({
   );
 
   return (
-    <div className={cn("seeker").toClassName()} ref={rootRef as any} onMouseDown={onDrag}>
-      <div className={cn("seeker").elem("track").toClassName()} />
-      {showIndicator && (
-        <div
-          className={cn("seeker").elem("indicator").toClassName()}
-          ref={viewRef as any}
-          style={{ left: windowOffset, width }}
-        />
-      )}
-      <div
-        className={cn("seeker").elem("position").toClassName()}
-        ref={seekerRef as any}
-        style={{ left: `${seekerOffset}%` }}
-      />
-      <div className={cn("seeker").elem("minimap").toClassName()}>{minimap}</div>
-    </div>
+    <Block name="seeker" ref={rootRef} onMouseDown={onDrag}>
+      <Elem name="track" />
+      {showIndicator && <Elem name="indicator" ref={viewRef} style={{ left: windowOffset, width }} />}
+      <Elem name="position" ref={seekerRef} style={{ left: `${seekerOffset}%` }} />
+      <Elem name="minimap">{minimap}</Elem>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/SideControls/FramesControl.tsx b/web/libs/editor/src/components/Timeline/SideControls/FramesControl.tsx
index 89c261b1cea2..0eec442dd992 100644
--- a/web/libs/editor/src/components/Timeline/SideControls/FramesControl.tsx
+++ b/web/libs/editor/src/components/Timeline/SideControls/FramesControl.tsx
@@ -1,5 +1,5 @@
 import { type FC, type MutableRefObject, useMemo, useRef, useState } from "react";
-import { cn } from "../../../utils/bem";
+import { Block } from "../../../utils/bem";
 import { clamp } from "../../../utils/utilities";
 import type { TimelineSideControlProps } from "../Types";
 import "./FramesControl.scss";
@@ -11,7 +11,7 @@ export const FramesControl: FC<TimelineSideControlProps> = ({ position = 0, leng
   }, [length]);
 
   return (
-    <div className={cn("frames-control").toClassName()} onClick={() => setInputMode(true)}>
+    <Block name="frames-control" onClick={() => setInputMode(true)}>
       {inputMode ? (
         <FrameInput
           length={duration}
@@ -28,7 +28,7 @@ export const FramesControl: FC<TimelineSideControlProps> = ({ position = 0, leng
           {clamp(Math.round(position + 1), 1, duration + 1)} <span>of {duration + 1}</span>
         </>
       )}
-    </div>
+    </Block>
   );
 };
 
diff --git a/web/libs/editor/src/components/Timeline/Timeline.tsx b/web/libs/editor/src/components/Timeline/Timeline.tsx
index f69c7230a966..9477878bc808 100644
--- a/web/libs/editor/src/components/Timeline/Timeline.tsx
+++ b/web/libs/editor/src/components/Timeline/Timeline.tsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { type FC, useEffect, useMemo, useRef, useState } from "react";
 import { useLocalStorageState } from "../../hooks/useLocalStorageState";
 import { useMemoizedHandlers } from "../../hooks/useMemoizedHandlers";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { clamp, fixMobxObserve, isDefined } from "../../utils/utilities";
 import { TimelineContextProvider } from "./Context";
 import { Controls } from "./Controls";
@@ -124,7 +124,7 @@ const TimelineComponent: FC<TimelineProps> = ({
   }, [position, length]);
 
   const controls = (
-    <div className={cn("timeline").elem("topbar").toClassName()}>
+    <Elem name="topbar">
       <Controls
         length={length}
         position={currentPosition}
@@ -176,13 +176,13 @@ const TimelineComponent: FC<TimelineProps> = ({
           minimap={View.Minimap ? <View.Minimap /> : null}
         />
       )}
-    </div>
+    </Elem>
   );
 
   regions.map((reg) => fixMobxObserve(reg.sequence));
 
   const view = !viewCollapsed && !disableView && (
-    <div className={cn("timeline").elem("view").toClassName()}>
+    <Elem name="view">
       <View.View
         step={step}
         length={length}
@@ -212,12 +212,12 @@ const TimelineComponent: FC<TimelineProps> = ({
         onSpeedChange={(speed) => handlers.onSpeedChange?.(speed)}
         onZoom={props.onZoom}
       />
-    </div>
+    </Elem>
   );
 
   return (
     <TimelineContextProvider value={contextValue}>
-      <div className={cn("timeline").mix(className).toClassName()}>
+      <Block name="timeline" className={className}>
         {controlsOnTop ? (
           <>
             {controls}
@@ -229,7 +229,7 @@ const TimelineComponent: FC<TimelineProps> = ({
             {controls}
           </>
         )}
-      </div>
+      </Block>
     </TimelineContextProvider>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Views/Frames/Frames.tsx b/web/libs/editor/src/components/Timeline/Views/Frames/Frames.tsx
index 5178ed04ebff..442fb03ea593 100644
--- a/web/libs/editor/src/components/Timeline/Views/Frames/Frames.tsx
+++ b/web/libs/editor/src/components/Timeline/Views/Frames/Frames.tsx
@@ -2,7 +2,7 @@ import { useResizeObserver } from "@humansignal/core/hooks/useResizeObserver";
 import clamp from "lodash/clamp";
 import { type FC, type MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useMemoizedHandlers } from "../../../../hooks/useMemoizedHandlers";
-import { cn } from "../../../../utils/bem";
+import { Block, Elem } from "../../../../utils/bem";
 import { isDefined } from "../../../../utils/utilities";
 import type { MSTTimelineRegion, TimelineRegion, TimelineViewProps } from "../../Types";
 import { Keypoints } from "./Keypoints";
@@ -407,27 +407,27 @@ export const Frames: FC<TimelineViewProps> = ({
   };
 
   return (
-    <div className={cn("timeline-frames").toClassName()} style={styles as any}>
-      <div className={cn("timeline-frames").elem("controls").toClassName()}>
-        <div
-          className={cn("timeline-frames").elem("indicator").toClassName()}
+    <Block name="timeline-frames" style={styles as any}>
+      <Elem name="controls">
+        <Elem
+          name="indicator"
           onMouseDown={handleMovement}
           style={{ left: clamp(seekerOffset - step, timelineStartOffset - step, viewWidth) }}
         />
 
         {isDefined(hoverOffset) && hoverEnabled && (
-          <div
-            className={cn("timeline-frames").elem("hover").toClassName()}
+          <Elem
+            name="hover"
             style={{ left: roundToStep(hoverOffset, step), marginLeft: timelineStartOffset }}
             data-frame={toSteps(currentOffsetX + hoverOffset, step) + 1}
           />
         )}
-      </div>
+      </Elem>
 
-      <div className={cn("timeline-frames").elem("labels-bg").toClassName()} style={{ width: timelineStartOffset }} />
+      <Elem name="labels-bg" style={{ width: timelineStartOffset }} />
 
-      <div
-        className={cn("timeline-frames").elem("scroll").toClassName()}
+      <Elem
+        name="scroll"
         ref={scrollable as any}
         onWheel={scrollHandler}
         onMouseMove={hoverHandler}
@@ -435,7 +435,7 @@ export const Frames: FC<TimelineViewProps> = ({
         onClickCapture={scrollClickHandler}
         onMouseDown={onFrameScrub}
       >
-        <div className={cn("timeline-frames").elem("filler").toClassName()}>
+        <Elem name="filler">
           <KeypointsVirtual
             regions={regions}
             scrollTop={currentOffsetY}
@@ -443,11 +443,11 @@ export const Frames: FC<TimelineViewProps> = ({
             onSelectRegion={onSelectRegion}
             disabled={regionSelectionDisabled}
           />
-        </div>
-      </div>
+        </Elem>
+      </Elem>
 
-      <div className={cn("timeline-frames").elem("background").toClassName()} style={{ backgroundImage: background }} />
-    </div>
+      <Elem name="background" style={{ backgroundImage: background }} />
+    </Block>
   );
 };
 
@@ -470,7 +470,7 @@ const KeypointsVirtual: FC<KeypointsVirtualProps> = ({ regions, startOffset, scr
   }, [scrollTop, regions.length]);
 
   return (
-    <div className={cn("timeline-frames").elem("keypoints").toClassName()} style={{ height: regions.length * height }}>
+    <Elem name="keypoints" style={{ height: regions.length * height }}>
       {regions.map((region, i) => {
         return region.sequence.length > 0 || region.timeline ? (
           <Keypoints
@@ -483,6 +483,6 @@ const KeypointsVirtual: FC<KeypointsVirtualProps> = ({ regions, startOffset, scr
           />
         ) : null;
       })}
-    </div>
+    </Elem>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Views/Frames/Keypoints.tsx b/web/libs/editor/src/components/Timeline/Views/Frames/Keypoints.tsx
index 9d2154552387..869e9c1995cf 100644
--- a/web/libs/editor/src/components/Timeline/Views/Frames/Keypoints.tsx
+++ b/web/libs/editor/src/components/Timeline/Views/Frames/Keypoints.tsx
@@ -1,6 +1,6 @@
 import chroma from "chroma-js";
 import { type FC, memo, type MouseEvent, useCallback, useContext, useMemo } from "react";
-import { cn } from "../../../../utils/bem";
+import { Block, Elem } from "../../../../utils/bem";
 import { clamp } from "../../../../utils/utilities";
 import { TimelineContext } from "../../Context";
 import type { TimelineRegion } from "../../Types";
@@ -71,27 +71,27 @@ export const Keypoints: FC<KeypointsProps> = ({ idx, region, startOffset, render
   const range = timeline ? sequence.map((s) => s.frame) : [];
 
   return (
-    <div
-      className={cn("keypoints").mod({ selected, timeline }).toClassName()}
-      style={styles as any}
+    <Block
+      name="keypoints"
+      style={styles}
+      mod={{ selected, timeline }}
       data-id={region.id}
       data-start={range[0]}
       data-end={range[1]}
       data-locked={locked || undefined}
     >
-      <div className={cn("keypoints").elem("label").toClassName()} onClick={onSelectRegionHandler}>
-        <div className={cn("keypoints").elem("name").toClassName()}>{label}</div>
-        <div className={cn("keypoints").elem("data").toClassName()}>
-          <div className={cn("keypoints").elem("data-item").mod({ faded: true }).toClassName()}>{idx}</div>
-        </div>
-      </div>
-      <div
-        className={cn("keypoints").elem("keypoints").toClassName()}
-        onClick={(e: any) => onSelectRegionHandler(e, true)}
-      >
+      <Elem name="label" onClick={onSelectRegionHandler}>
+        <Elem name="name">{label}</Elem>
+        <Elem name="data">
+          <Elem name="data-item" mod={{ faded: true }}>
+            {idx}
+          </Elem>
+        </Elem>
+      </Elem>
+      <Elem name="keypoints" onClick={(e: any) => onSelectRegionHandler(e, true)}>
         <LifespansList lifespans={lifespans} step={step} visible={visible} offset={offset} />
-      </div>
-    </div>
+      </Elem>
+    </Block>
   );
 };
 
@@ -148,22 +148,13 @@ const LifespanItem: FC<LifespanItemProps> = memo(
     }, [left, right, finalWidth]);
 
     return (
-      <div
-        className={cn("keypoints").elem("lifespan").mod({ hidden: !visible, instant: !width }).toClassName()}
-        style={style}
-      >
+      <Elem name="lifespan" mod={{ hidden: !visible, instant: !width }} style={style}>
         {points.map((frame, i) => {
           const left = (frame - start) * step;
 
-          return (
-            <div
-              key={i}
-              className={cn("keypoints").elem("point").mod({ last: !!left, locked }).toClassName()}
-              style={{ left }}
-            />
-          );
+          return <Elem key={i} name="point" style={{ left }} mod={{ last: !!left, locked }} />;
         })}
-      </div>
+      </Elem>
     );
   },
 );
diff --git a/web/libs/editor/src/components/Timeline/Views/Frames/Minimap.tsx b/web/libs/editor/src/components/Timeline/Views/Frames/Minimap.tsx
index 8cfa94460d75..dd3c6c57f63e 100644
--- a/web/libs/editor/src/components/Timeline/Views/Frames/Minimap.tsx
+++ b/web/libs/editor/src/components/Timeline/Views/Frames/Minimap.tsx
@@ -1,6 +1,6 @@
 import { useResizeObserver } from "@humansignal/core/hooks/useResizeObserver";
 import { type FC, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "../../../../utils/bem";
+import { Block, Elem } from "../../../../utils/bem";
 import { isDefined } from "../../../../utils/utilities";
 import { TimelineContext } from "../../Context";
 import { visualizeLifespans } from "./Utils";
@@ -29,26 +29,20 @@ export const Minimap: FC<any> = () => {
   }, [length, rootWidth]);
 
   return (
-    <div ref={root as any} className={cn("minimap").toClassName()}>
+    <Block ref={root} name="minimap">
       {visualization.slice(0, 5).map(({ id, color, lifespans }) => {
         return (
-          <div key={id} className={cn("minimap").elem("region").toClassName()} style={{ "--color": color } as any}>
+          <Elem key={id} name="region" style={{ "--color": color }}>
             {lifespans.map((connection, i) => {
               const isLast = i + 1 === lifespans.length;
               const left = connection.start * step;
               const width = isLast && connection.enabled ? "100%" : connection.width;
 
-              return (
-                <div
-                  key={`${id}${i}`}
-                  className={cn("minimap").elem("connection").toClassName()}
-                  style={{ left, width }}
-                />
-              );
+              return <Elem key={`${id}${i}`} name="connection" style={{ left, width }} />;
             })}
-          </div>
+          </Elem>
         );
       })}
-    </div>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx b/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx
index 6fad5ad4b101..76bfe28c83da 100644
--- a/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx
+++ b/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx
@@ -1,4 +1,4 @@
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import { Fragment, useEffect, useState } from "react";
 import { Hotkey } from "../../core/Hotkey";
@@ -18,7 +18,7 @@ const shortcutView = (shortcut) => {
   const combos = sc.split(",").map((s) => s.trim());
 
   return (
-    <div className={cn("flyoutmenu").elem("shortcut").toClassName()}>
+    <Elem name="shortcut">
       {combos.map((combo, index) => {
         const keys = combo.split("+");
 
@@ -26,15 +26,15 @@ const shortcutView = (shortcut) => {
           <Fragment key={`${keys.join("-")}-${index}`}>
             {keys.map((key) => {
               return (
-                <kbd className={cn("flyoutmenu").elem("key").toClassName()} key={key}>
+                <Elem name="key" tag="kbd" key={key}>
                   {keysDictionary[key] ?? key}
-                </kbd>
+                </Elem>
               );
             })}
           </Fragment>
         );
       })}
-    </div>
+    </Elem>
   );
 };
 
@@ -87,28 +87,22 @@ export const FlyoutMenu = ({ items, icon }) => {
   });
 
   return (
-    <div
-      className={cn("flyoutmenu")
-        .mix(isClicked ? "hovered" : "")
-        .toClassName()}
+    <Block
+      name="flyoutmenu"
+      tag="div"
+      className={`${isClicked ? "hovered" : ""}`}
       onClick={(e) => {
         e.stopPropagation();
         setClicked(!isClicked);
       }}
     >
-      <div
-        className={cn("flyoutmenu")
-          .elem("icon")
-          .mix(isClicked ? "isClicked" : "")
-          .toClassName()}
-        title="Zoom presets (click to see options)"
-      >
+      <Elem name="icon" className={`${isClicked ? "isClicked" : ""}`} title="Zoom presets (click to see options)">
         {icon}
-      </div>
-      <div className={cn("tooltips").toClassName()}>
+      </Elem>
+      <Block name="tooltips" tag="div">
         {items.map((childItem, index) => (
-          <div
-            className={cn("tooltips").elem("tooltip").toClassName()}
+          <Elem
+            name="tooltip"
             key={index}
             onClick={(e) => {
               e.stopPropagation();
@@ -116,13 +110,13 @@ export const FlyoutMenu = ({ items, icon }) => {
               setClicked(false);
             }}
           >
-            <div className={cn("tooltips").elem("tooltip-body").toClassName()}>
-              <div className={cn("tooltips").elem("label").toClassName()}>{childItem.label}</div>
+            <Elem name="tooltip-body">
+              <Elem name="label">{childItem.label}</Elem>
               {shortcutView(childItem.shortcut)}
-            </div>
-          </div>
+            </Elem>
+          </Elem>
         ))}
-      </div>
-    </div>
+      </Block>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/Toolbar/Tool.jsx b/web/libs/editor/src/components/Toolbar/Tool.jsx
index 2daf91e9fa6b..ea954c229c95 100644
--- a/web/libs/editor/src/components/Toolbar/Tool.jsx
+++ b/web/libs/editor/src/components/Toolbar/Tool.jsx
@@ -1,4 +1,4 @@
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { Fragment } from "react";
@@ -40,7 +40,7 @@ export const Tool = ({
     const combos = sc.split(",").map((s) => s.trim());
 
     return (
-      <div className={cn("tool").elem("shortcut").toClassName()}>
+      <Elem name="shortcut">
         {combos.map((combo, index) => {
           const keys = combo.split("+");
 
@@ -48,15 +48,15 @@ export const Tool = ({
             <Fragment key={`${keys.join("-")}-${index}`}>
               {keys.map((key) => {
                 return (
-                  <kbd className={cn("tool").elem("key").toClassName()} key={key}>
+                  <Elem name="key" tag="kbd" key={key}>
                     {keysDictionary[key] ?? key}
-                  </kbd>
+                  </Elem>
                 );
               })}
             </Fragment>
           );
         })}
-      </div>
+      </Elem>
     );
   }, [shortcut]);
 
@@ -107,7 +107,7 @@ export const Tool = ({
   }, [extraShortcuts, active]);
 
   const extraContent = useMemo(() => {
-    return smart && extra ? <div className={cn("tool").elem("extra").toClassName()}>{extra}</div> : null;
+    return smart && extra ? <Elem name="extra">{extra}</Elem> : null;
   }, [smart, extra]);
 
   const showControls = dynamic === false && controls?.length && (active || (controlsOnHover && hovered));
@@ -115,18 +115,17 @@ export const Tool = ({
   const isDisabled = disabled || isAnnotationDrawing;
 
   return (
-    <button
-      type="button"
+    <Block
+      name="tool"
+      tag="button"
       aria-label={ariaLabel}
-      className={cn("tool")
-        .mod({
-          active,
-          disabled: isDisabled,
-          alignment,
-          expanded: expanded && !dynamic,
-          smart: dynamic || smart,
-        })
-        .toClassName()}
+      mod={{
+        active,
+        disabled: isDisabled,
+        alignment,
+        expanded: expanded && !dynamic,
+        smart: dynamic || smart,
+      }}
       onClick={(e) => {
         if (!disabled && !isAnnotationDrawing) {
           e.preventDefault();
@@ -143,39 +142,34 @@ export const Tool = ({
         setHovered(false);
       }}
     >
-      <div className={cn("tool").elem("icon").toClassName()}>{icon}</div>
+      <Elem name="icon">{icon}</Elem>
       {dynamic === false &&
         controlsOnHover === false &&
         (expanded ? (
           <>
-            <div className={cn("tool").elem("label").toClassName()}>
+            <Elem name="label">
               {extraContent}
               {label}
               {shortcutView}
-            </div>
+            </Elem>
           </>
         ) : (
           (isDefined(label) || isDefined(shortcutView)) &&
           !showControls && (
-            <div
-              className={cn("tool")
-                .elem("tooltip")
-                .mod({ controlled: !!(smart && extra) })
-                .toClassName()}
-            >
-              <div className={cn("tool").elem("tooltip-body").toClassName()}>
+            <Elem name="tooltip" mod={{ controlled: !!(smart && extra) }}>
+              <Elem name="tooltip-body">
                 {extraContent}
                 {label}
                 {shortcutView}
-              </div>
-            </div>
+              </Elem>
+            </Elem>
           )
         ))}
       {showControls && (
-        <div className={cn("tool").elem("controls").toClassName()} onClickCapture={(e) => e.stopPropagation()}>
-          <div className={cn("tool").elem("controls-body").toClassName()}>{controls}</div>
-        </div>
+        <Elem name="controls" onClickCapture={(e) => e.stopPropagation()}>
+          <Elem name="controls-body">{controls}</Elem>
+        </Elem>
       )}
-    </button>
+    </Block>
   );
 };
diff --git a/web/libs/editor/src/components/Toolbar/Toolbar.jsx b/web/libs/editor/src/components/Toolbar/Toolbar.jsx
index 5266cf3d8922..3844de094203 100644
--- a/web/libs/editor/src/components/Toolbar/Toolbar.jsx
+++ b/web/libs/editor/src/components/Toolbar/Toolbar.jsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from "react";
 import { inject, observer } from "mobx-react";
 
 import { useWindowSize } from "../../common/Utils/useWindowSize";
-import { cn } from "../../utils/bem";
+import { Block, cn, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import { Tool } from "./Tool";
 import { ToolbarProvider } from "./ToolbarContext";
@@ -45,12 +45,12 @@ export const Toolbar = inject("store")(
 
     return (
       <ToolbarProvider value={{ expanded, alignment }}>
-        <div ref={(el) => setToolbar(el)} className={cn("toolbar").mod({ alignment, expanded }).toClassName()}>
+        <Block ref={(el) => setToolbar(el)} name="toolbar" mod={{ alignment, expanded }}>
           {Object.entries(toolGroups).map(([name, tools], i) => {
             const visibleTools = tools.filter((t) => t.viewClass);
 
             return visibleTools.length ? (
-              <div className={cn("toolbar").elem("group").toClassName()} key={`toolset-${name}-${i}`}>
+              <Elem name="group" key={`toolset-${name}-${i}`}>
                 {visibleTools
                   .sort((a, b) => a.index - b.index)
                   .map((tool, i) => {
@@ -58,11 +58,11 @@ export const Toolbar = inject("store")(
 
                     return <ToolComponent key={`${tool.toolName}-${i}`} />;
                   })}
-              </div>
+              </Elem>
             ) : null;
           })}
           {store.autoAnnotation && <SmartTools tools={smartTools} />}
-        </div>
+        </Block>
       </ToolbarProvider>
     );
   }),
@@ -82,7 +82,7 @@ const SmartTools = observer(({ tools }) => {
 
   return (
     tools.length > 0 && (
-      <div className={cn("toolbar").elem("group").toClassName()}>
+      <Elem name="group">
         <Tool
           smart
           label="Auto-Detect"
@@ -91,7 +91,7 @@ const SmartTools = observer(({ tools }) => {
           shortcut="tool:auto-detect"
           extra={
             tools.length > 1 ? (
-              <div className={cn("toolbar").elem("smart").toClassName()}>
+              <Elem name="smart">
                 {tools.map((t, i) => {
                   const ToolView = t.viewClass;
 
@@ -108,7 +108,7 @@ const SmartTools = observer(({ tools }) => {
                     </div>
                   );
                 })}
-              </div>
+              </Elem>
             ) : null
           }
           controls={selected.controls}
@@ -128,7 +128,7 @@ const SmartTools = observer(({ tools }) => {
             nextTool.manager.selectTool(nextTool, true);
           }}
         />
-      </div>
+      </Elem>
     )
   );
 });
diff --git a/web/libs/editor/src/components/TopBar/Actions.jsx b/web/libs/editor/src/components/TopBar/Actions.jsx
index cba59c715e53..6b3ce6605191 100644
--- a/web/libs/editor/src/components/TopBar/Actions.jsx
+++ b/web/libs/editor/src/components/TopBar/Actions.jsx
@@ -1,7 +1,7 @@
 import { Button } from "@humansignal/ui";
 import { IconCopy, IconInfo, IconViewAll, IconTrash, IconSettings } from "@humansignal/icons";
 import { Tooltip } from "@humansignal/ui";
-import { cn } from "../../utils/bem";
+import { Elem } from "../../utils/bem";
 import { isSelfServe } from "../../utils/billing";
 import { FF_BULK_ANNOTATION, isFF } from "../../utils/feature-flags";
 import { GroundTruth } from "../CurrentEntity/GroundTruth";
@@ -22,7 +22,7 @@ export const Actions = ({ store }) => {
   }, [annotationStore]);
 
   return (
-    <div className={cn("topbar").elem("section").toClassName()}>
+    <Elem name="section">
       {store.hasInterface("annotations:view-all") && !isBulkMode && (
         <Tooltip title="Compare all annotations">
           <Button
@@ -125,6 +125,6 @@ export const Actions = ({ store }) => {
           }}
         />
       )}
-    </div>
+    </Elem>
   );
 };
diff --git a/web/libs/editor/src/components/TopBar/Annotations.jsx b/web/libs/editor/src/components/TopBar/Annotations.jsx
index 0c47a1e9ba63..9b2bb0075c40 100644
--- a/web/libs/editor/src/components/TopBar/Annotations.jsx
+++ b/web/libs/editor/src/components/TopBar/Annotations.jsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Space } from "../../common/Space/Space";
 import { IconPlusCircle, IconComment, IconCommentRed, IconSparks } from "@humansignal/icons";
 import { Userpic } from "@humansignal/ui";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { isDefined, userDisplayName } from "../../utils/utilities";
 import { GroundTruth } from "../CurrentEntity/GroundTruth";
 import "./Annotations.scss";
@@ -99,12 +99,10 @@ export const Annotations = observer(({ store, annotationStore, commentStore }) =
           onAnnotationSelect?.(ent, ent.type === "prediction");
         }}
         extra={
-          <div className={cn("annotations-list").elem("icons").toClassName()}>
-            <div className={cn("annotations-list").elem("icon-column").toClassName()}>{renderCommentIcon(ent)}</div>
-            <div className={cn("annotations-list").elem("icon-column").toClassName()}>
-              {groundTruthEnabled && <GroundTruth entity={ent} disabled />}
-            </div>
-          </div>
+          <Elem name={"icons"}>
+            <Elem name="icon-column">{renderCommentIcon(ent)}</Elem>
+            <Elem name="icon-column">{groundTruthEnabled && <GroundTruth entity={ent} disabled />}</Elem>
+          </Elem>
         }
       />
     );
@@ -124,16 +122,16 @@ export const Annotations = observer(({ store, annotationStore, commentStore }) =
 
     return (
       <>
-        <div className={cn("annotations-list").elem("draft").toClassName()}>{_drafts}</div>
-        <div className={cn("annotations-list").elem("annotation").toClassName()}>{_annotations}</div>
+        <Elem name="draft">{_drafts}</Elem>
+        <Elem name="annotation">{_annotations}</Elem>
       </>
     );
   };
 
   return enableAnnotations || enablePredictions || enableCreateAnnotation ? (
-    <div className={cn("topbar").elem("section").mod({ flat: true }).toClassName()}>
-      <div className={cn("annotations-list").toClassName()} ref={dropdownRef}>
-        <div className={cn("annotations-list").elem("selected").toClassName()}>
+    <Elem name="section" mod={{ flat: true }}>
+      <Block name="annotations-list" ref={dropdownRef}>
+        <Elem name="selected">
           <Annotation
             aria-label="Annotations List Toggle"
             entity={annotationStore.selected}
@@ -144,27 +142,27 @@ export const Annotations = observer(({ store, annotationStore, commentStore }) =
             extra={
               entities.length > 0 ? (
                 <Space size="none" style={{ marginRight: -8, marginLeft: 8 }}>
-                  <div className={cn("annotations-list").elem("counter").toClassName()}>
+                  <Elem name="counter">
                     {entities.indexOf(annotationStore.selected) + 1}/{entities.length}
-                  </div>
-                  <div className={cn("annotations-list").elem("toggle").mod({ opened }).toClassName()} />
+                  </Elem>
+                  <Elem name="toggle" mod={{ opened }} />
                 </Space>
               ) : null
             }
           />
-        </div>
+        </Elem>
 
         {opened && (
-          <div className={cn("annotations-list").elem("list").toClassName()}>
+          <Elem name="list">
             {store.hasInterface("annotations:add-new") && (
               <CreateAnnotation annotationStore={annotationStore} onClick={() => setOpened(false)} />
             )}
 
             {renderAnnotationList(entities)}
-          </div>
+          </Elem>
         )}
-      </div>
-    </div>
+      </Block>
+    </Elem>
   ) : null;
 });
 
@@ -177,18 +175,14 @@ const CreateAnnotation = observer(({ annotationStore, onClick }) => {
   }, [annotationStore, onClick]);
 
   return (
-    <div
-      className={cn("annotations-list").elem("create").toClassName()}
-      aria-label="Create Annotation"
-      onClick={onCreateAnnotation}
-    >
+    <Elem name="create" aria-label="Create Annotation" onClick={onCreateAnnotation}>
       <Space size="small">
-        <Userpic className={cn("annotations-list").elem("userpic").mod({ prediction: true }).toClassName()}>
+        <Elem name="userpic" tag={Userpic} mod={{ prediction: true }}>
           <IconPlusCircle />
-        </Userpic>
+        </Elem>
         Create Annotation
       </Space>
-    </div>
+    </Elem>
   );
 });
 
@@ -201,37 +195,42 @@ const Annotation = observer(({ entity, selected, onClick, extra, ...props }) =>
   );
 
   return (
-    <div {...props} className={cn("annotations-list").elem("entity").mod({ selected }).toClassName()} onClick={onClick}>
+    <Elem {...props} name="entity" mod={{ selected }} onClick={onClick}>
       <Space spread>
         <Space size="small">
-          <Userpic
-            className={cn("annotations-list").elem("userpic").mod({ prediction: isPrediction }).toClassName()}
+          <Elem
+            name="userpic"
+            tag={Userpic}
             showUsername
             username={isPrediction ? entity.createdBy : null}
             user={entity.user ?? { username }}
+            mod={{ prediction: isPrediction }}
           >
             {isPrediction && <IconSparks color="#944BFF" style={{ width: 18, height: 18 }} />}
-          </Userpic>
+          </Elem>
           <Space direction="vertical" size="none">
-            <div className={cn("annotations-list").elem("user").toClassName()}>
-              <span className={cn("annotations-list").elem("name").toClassName()}>{username}</span>
-              <span className={cn("annotations-list").elem("entity-id").toClassName()}>#{entity.pk ?? entity.id}</span>
-            </div>
+            <Elem name="user">
+              <Elem tag="span" name="name">
+                {username}
+              </Elem>
+              <Elem tag="span" name="entity-id">
+                #{entity.pk ?? entity.id}
+              </Elem>
+            </Elem>
 
             {isDefined(entity.acceptedState) ? (
-              <div className={cn("annotations-list").elem("review").mod({ state: entity.acceptedState }).toClassName()}>
+              <Elem name="review" mod={{ state: entity.acceptedState }}>
                 {entity.acceptedState}
-              </div>
+              </Elem>
             ) : (
-              <div className={cn("annotations-list").elem("created").toClassName()}>
-                created,{" "}
-                <TimeAgo className={cn("annotations-list").elem("date").toClassName()} date={entity.createdDate} />
-              </div>
+              <Elem name="created">
+                created, <Elem name="date" component={TimeAgo} date={entity.createdDate} />
+              </Elem>
             )}
           </Space>
         </Space>
         {extra}
       </Space>
-    </div>
+    </Elem>
   );
 });
diff --git a/web/libs/editor/src/components/TopBar/Controls.jsx b/web/libs/editor/src/components/TopBar/Controls.jsx
index f309276479b6..b0c231ef62d3 100644
--- a/web/libs/editor/src/components/TopBar/Controls.jsx
+++ b/web/libs/editor/src/components/TopBar/Controls.jsx
@@ -5,7 +5,7 @@
 import { inject, observer } from "mobx-react";
 import { IconBan } from "@humansignal/icons";
 import { Button, Tooltip } from "@humansignal/ui";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 
 import "./Controls.scss";
@@ -121,9 +121,9 @@ export const Controls = controlsInjector(
       );
     } else if (annotation.skipped) {
       buttons.push(
-        <div className={cn("controls").elem("skipped-info").toClassName()} key="skipped">
+        <Elem name="skipped-info" key="skipped">
           <IconBan color="#d00" /> Was skipped
-        </div>,
+        </Elem>,
       );
       buttons.push(
         <ButtonTooltip key="cancel-skip" title="Cancel skip: []">
@@ -170,7 +170,7 @@ export const Controls = controlsInjector(
 
         buttons.push(
           <ButtonTooltip key="submit" title={title}>
-            <div className={cn("controls").elem("tooltip-wrapper").toClassName()}>
+            <Elem name="tooltip-wrapper">
               <Button
                 aria-label="Submit current annotation"
                 disabled={disabled || submitDisabled}
@@ -182,7 +182,7 @@ export const Controls = controlsInjector(
               >
                 Submit
               </Button>
-            </div>
+            </Elem>
           </ButtonTooltip>,
         );
       }
@@ -210,9 +210,9 @@ export const Controls = controlsInjector(
     }
 
     return (
-      <div className={cn("controls").toClassName()}>
+      <Block name="controls">
         <div className="grid grid-flow-col auto-cols-fr gap-tight items-center">{buttons}</div>
-      </div>
+      </Block>
     );
   }),
 );
diff --git a/web/libs/editor/src/components/TopBar/CurrentTask.jsx b/web/libs/editor/src/components/TopBar/CurrentTask.jsx
index b7f2448010ee..5c0ad96c8123 100644
--- a/web/libs/editor/src/components/TopBar/CurrentTask.jsx
+++ b/web/libs/editor/src/components/TopBar/CurrentTask.jsx
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useEffect, useState } from "react";
 import { Button, IconChevronLeft, IconChevronRight } from "@humansignal/ui";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { FF_DEV_3873, FF_DEV_4174, FF_LEAP_1173, FF_TASK_COUNT_FIX, isFF } from "../../utils/feature-flags";
 import { guidGenerator } from "../../utils/unique";
 import { isDefined } from "../../utils/utilities";
@@ -54,38 +54,31 @@ export const CurrentTask = observer(({ store }) => {
   }
 
   return (
-    <div className={cn("topbar").elem("section").toClassName()}>
-      <div
-        className={cn("current-task").mod({ "with-history": historyEnabled }).toClassName()}
+    <Elem name="section">
+      <Block
+        name="current-task"
+        mod={{ "with-history": historyEnabled }}
         style={{
           padding: isFF(FF_DEV_3873) && 0,
           width: isFF(FF_DEV_3873) && "auto",
         }}
       >
-        <div
-          className={cn("current-task").elem("task-id").toClassName()}
-          style={{ fontSize: isFF(FF_DEV_3873) ? 12 : 14 }}
-        >
+        <Elem name="task-id" style={{ fontSize: isFF(FF_DEV_3873) ? 12 : 14 }}>
           {store.task.id ?? guidGenerator()}
           {historyEnabled &&
             showCounter &&
             (isFF(FF_TASK_COUNT_FIX) ? (
-              <div className={cn("current-task").elem("task-count").toClassName()}>
+              <Elem name="task-count">
                 {store.queuePosition} of {store.queueTotal}
-              </div>
+              </Elem>
             ) : (
-              <div className={cn("current-task").elem("task-count").toClassName()}>
+              <Elem name="task-count">
                 {currentIndex} of {store.taskHistory.length}
-              </div>
+              </Elem>
             ))}
-        </div>
+        </Elem>
         {historyEnabled && (
-          <div
-            className={cn("current-task")
-              .elem("history-controls")
-              .mod({ newui: isFF(FF_DEV_3873) })
-              .toClassName()}
-          >
+          <Elem name="history-controls" mod={{ newui: isFF(FF_DEV_3873) }}>
             <Button
               data-testid="prev-task"
               aria-label="Previous task"
@@ -108,9 +101,9 @@ export const CurrentTask = observer(({ store }) => {
             >
               <IconChevronRight />
             </Button>
-          </div>
+          </Elem>
         )}
-      </div>
-    </div>
+      </Block>
+    </Elem>
   );
 });
diff --git a/web/libs/editor/src/components/TopBar/HistoryActions.jsx b/web/libs/editor/src/components/TopBar/HistoryActions.jsx
index 933e8201c7ec..88c5dc2a9482 100644
--- a/web/libs/editor/src/components/TopBar/HistoryActions.jsx
+++ b/web/libs/editor/src/components/TopBar/HistoryActions.jsx
@@ -1,14 +1,14 @@
 import { observer } from "mobx-react";
 import { IconRedo, IconRemove, IconUndo } from "@humansignal/icons";
 import { Button } from "@humansignal/ui";
-import { cn } from "../../utils/bem";
+import { Block } from "../../utils/bem";
 import "./HistoryActions.scss";
 
 export const EditingHistory = observer(({ entity }) => {
   const { history } = entity;
 
   return (
-    <div className={cn("history-buttons").toClassName()}>
+    <Block name="history-buttons">
       <Button
         variant="neutral"
         look="string"
@@ -40,6 +40,6 @@ export const EditingHistory = observer(({ entity }) => {
         onClick={() => history?.reset()}
         leading={<IconRemove />}
       />
-    </div>
+    </Block>
   );
 });
diff --git a/web/libs/editor/src/components/TopBar/TopBar.jsx b/web/libs/editor/src/components/TopBar/TopBar.jsx
index a7c804ee4173..68d1f099bd98 100644
--- a/web/libs/editor/src/components/TopBar/TopBar.jsx
+++ b/web/libs/editor/src/components/TopBar/TopBar.jsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { IconViewAll, IconPlus } from "@humansignal/icons";
 import { Button } from "@humansignal/ui";
 import { ff } from "@humansignal/core";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { isSelfServe } from "../../utils/billing";
 import { FF_BULK_ANNOTATION, FF_DEV_3873, isFF } from "../../utils/feature-flags";
 import { AnnotationsCarousel } from "../AnnotationsCarousel/AnnotationsCarousel";
@@ -26,13 +26,9 @@ export const TopBar = observer(({ store }) => {
   if (isFF(FF_DEV_3873) && isBulkMode) return null;
 
   return store ? (
-    <div
-      className={cn("topbar")
-        .mod({ newLabelingUI: isFF(FF_DEV_3873) })
-        .toClassName()}
-    >
+    <Block name="topbar" mod={{ newLabelingUI: isFF(FF_DEV_3873) }}>
       {isFF(FF_DEV_3873) ? (
-        <div className={cn("topbar").elem("group").toClassName()}>
+        <Elem name="group">
           <CurrentTask store={store} />
           {store.hasInterface("annotations:view-all") && (
             <Button
@@ -74,33 +70,30 @@ export const TopBar = observer(({ store }) => {
               commentStore={store.commentStore}
             />
           )}
-        </div>
+        </Elem>
       ) : (
         <>
-          <div className={cn("topbar").elem("group").toClassName()}>
+          <Elem name="group">
             {!isBulkMode && <CurrentTask store={store} />}
             {!isViewAll && !isBulkMode && (
               <Annotations store={store} annotationStore={store.annotationStore} commentStore={store.commentStore} />
             )}
             <Actions store={store} />
-          </div>
-          <div className={cn("topbar").elem("group").toClassName()}>
+          </Elem>
+          <Elem name="group">
             {!isViewAll && (
-              <div className={cn("topbar").elem("section").toClassName()}>
+              <Elem name="section">
                 <DynamicPreannotationsToggle />
-              </div>
+              </Elem>
             )}
             {!isViewAll && store.hasInterface("controls") && (store.hasInterface("review") || !isPrediction) && (
-              <div
-                className={cn("topbar").elem("section").mod({ flat: true }).toClassName()}
-                style={{ width: 320, boxSizing: "border-box" }}
-              >
+              <Elem name="section" mod={{ flat: true }} style={{ width: 320, boxSizing: "border-box" }}>
                 <Controls annotation={entity} />
-              </div>
+              </Elem>
             )}
-          </div>
+          </Elem>
         </>
       )}
-    </div>
+    </Block>
   ) : null;
 });
diff --git a/web/libs/editor/src/components/VideoCanvas/VideoCanvas.tsx b/web/libs/editor/src/components/VideoCanvas/VideoCanvas.tsx
index 31f3ec449030..025dc99f14a9 100644
--- a/web/libs/editor/src/components/VideoCanvas/VideoCanvas.tsx
+++ b/web/libs/editor/src/components/VideoCanvas/VideoCanvas.tsx
@@ -1,7 +1,7 @@
 import { useRefCallback } from "@humansignal/core/hooks/useRefCallback";
 import { useValueRef } from "@humansignal/core/hooks/useValueRef";
 import { forwardRef, memo, type MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { FF_VIDEO_FRAME_SEEK_PRECISION, isFF } from "../../utils/feature-flags";
 import { clamp, isDefined } from "../../utils/utilities";
 import { useUpdateBuffering } from "../../hooks/useUpdateBuffering";
@@ -620,14 +620,14 @@ export const VideoCanvas = memo(
     }, []);
 
     return (
-      <div ref={rootRef as any} className={cn("video-canvas").toClassName()}>
+      <Block ref={rootRef} name="video-canvas">
         {loading && (
-          <div className={cn("video-canvas").elem("loading").toClassName()}>
-            <div className={cn("spinner").toClassName()} />
-          </div>
+          <Elem name="loading">
+            <Block name="spinner" />
+          </Elem>
         )}
-        <div
-          className={cn("video-canvas").elem("view").toClassName()}
+        <Elem
+          name="view"
           onClick={props.onClick}
           style={{
             width: canvasWidth,
@@ -644,10 +644,8 @@ export const VideoCanvas = memo(
             width={canvasWidth}
             height={canvasHeight}
           />
-          {!isSyncedBuffering && !loading && buffering && (
-            <div className={cn("video-canvas").elem("buffering").toClassName()} aria-label="Buffering Media Source" />
-          )}
-        </div>
+          {!isSyncedBuffering && !loading && buffering && <Elem name="buffering" aria-label="Buffering Media Source" />}
+        </Elem>
 
         <VirtualVideo
           ref={videoRef as MutableRefObject<HTMLVideoElement>}
@@ -685,7 +683,7 @@ export const VideoCanvas = memo(
           onEnded={handleVideoEnded}
           onError={handleVideoError}
         />
-      </div>
+      </Block>
     );
   }),
 );
diff --git a/web/libs/editor/src/core/Hotkey.ts b/web/libs/editor/src/core/Hotkey.ts
index ccf909b7756d..e74a3b148aab 100644
--- a/web/libs/editor/src/core/Hotkey.ts
+++ b/web/libs/editor/src/core/Hotkey.ts
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { createElement, Fragment } from "react";
 import { Tooltip } from "@humansignal/ui";
 import Hint from "../components/Hint/Hint";
-import { cn } from "../utils/bem";
+import { Block, Elem } from "../utils/bem";
 import { FF_MULTI_OBJECT_HOTKEYS, isFF } from "../utils/feature-flags";
 import { isDefined, isMacOS } from "../utils/utilities";
 import defaultKeymap from "./settings/keymap.json";
@@ -464,9 +464,10 @@ Hotkey.Tooltip = inject("store")(
         shortcut.split(",").forEach((combination: string) => {
           const keys = combination.split("+").map((key: string) =>
             createElement(
-              "kbd",
+              Elem,
               {
-                className: cn("hotkey").elem("key").toClassName(),
+                tag: "kbd",
+                name: "key",
               },
               key,
             ),
@@ -474,9 +475,10 @@ Hotkey.Tooltip = inject("store")(
 
           hotkeys.push(
             createElement(
-              "span",
+              Block,
               {
-                className: cn("key-group").toClassName(),
+                name: "key-group",
+                tag: "span",
                 style: { marginLeft: 5 },
               },
               ...keys,
diff --git a/web/libs/editor/src/lib/AudioUltra/react/ConfigControl.tsx b/web/libs/editor/src/lib/AudioUltra/react/ConfigControl.tsx
index 39dd381b5de7..845c7f8a1809 100644
--- a/web/libs/editor/src/lib/AudioUltra/react/ConfigControl.tsx
+++ b/web/libs/editor/src/lib/AudioUltra/react/ConfigControl.tsx
@@ -1,7 +1,7 @@
 import type React from "react";
 import { type FC, type MouseEvent, useContext, useEffect, useState } from "react";
 import { Toggle } from "@humansignal/ui";
-import { cn } from "../../../utils/bem";
+import { Block, Elem } from "../../../utils/bem";
 import { IconConfig } from "@humansignal/ui";
 import { TimelineContext } from "../../../components/Timeline/Context";
 import { ControlButton } from "../../../components/Timeline/Controls";
@@ -80,20 +80,20 @@ export const ConfigControl: FC<ConfigControlProps> = ({
 
   const renderLayerToggles = () => {
     return (
-      <div className={cn("audio-config").elem("buttons").toClassName()}>
-        <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetTimeline}>
+      <Elem name={"buttons"}>
+        <Elem name="menu-button" onClick={handleSetTimeline}>
           {isTimeline ? "Hide" : "Show"} timeline
-        </div>
-        <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetAudioWave}>
+        </Elem>
+        <Elem name="menu-button" onClick={handleSetAudioWave}>
           {isAudioWave ? "Hide" : "Show"} audio wave
-        </div>
-      </div>
+        </Elem>
+      </Elem>
     );
   };
 
   const renderModal = () => {
     return (
-      <div className={cn("audio-config").elem("modal").toClassName()}>
+      <Elem name="modal">
         <Slider
           min={MIN_SPEED}
           max={MAX_SPEED}
@@ -112,35 +112,32 @@ export const ConfigControl: FC<ConfigControlProps> = ({
           info={"Increase or decrease the appearance of amplitude"}
           onChange={handleChangeAmp}
         />
-        <div className={cn("audio-config").elem("toggle").toClassName()}>
+        <Elem name="toggle">
           <Toggle
             checked={settings?.loopRegion}
             onChange={(e) => changeSetting?.("loopRegion", e.target.checked)}
             label="Loop Regions"
           />
-        </div>
-        <div className={cn("audio-config").elem("toggle").toClassName()}>
+        </Elem>
+        <Elem name="toggle">
           <Toggle
             checked={settings?.autoPlayNewSegments}
             onChange={(e) => changeSetting?.("autoPlayNewSegments", e.target.checked)}
             label="Auto-play New Regions"
           />
-        </div>
+        </Elem>
         {renderLayerToggles()}
         <SpectrogramConfig waveform={waveform} />
-      </div>
+      </Elem>
     );
   };
 
   return (
-    <div
-      className={cn("audio-config").toClassName()}
-      onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
-    >
+    <Block name="audio-config" onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>
       <ControlButton look={configModal ? "active" : undefined} onClick={onSetModal}>
         {<IconConfig />}
       </ControlButton>
       {configModal && renderModal()}
-    </div>
+    </Block>
   );
 };