diff --git a/src/__tests__/util-test.js b/src/__tests__/util-test.js
index 23f1e971d..ffd0d6549 100644
--- a/src/__tests__/util-test.js
+++ b/src/__tests__/util-test.js
@@ -2,10 +2,10 @@
 import * as util from '../util';
 import {
     TYPES,
-    SELECTOR_ANNOTATION_DIALOG,
+    SELECTOR_ANNOTATION_POPOVER,
     CLASS_ANNOTATION_CARET,
     SELECTOR_ANNOTATION_POINT_MARKER,
-    CLASS_ANNOTATION_DIALOG,
+    CLASS_ANNOTATION_POPOVER,
     CLASS_ANNOTATION_POINT_MARKER
 } from '../constants';
 
@@ -22,7 +22,7 @@ const html = `<div class="wrapper" data-name="someName">
 <div class="foo"></div>
 </div>
 
-<div class="${CLASS_ANNOTATION_DIALOG}">
+<div class="${CLASS_ANNOTATION_POPOVER}">
 <div class="${CLASS_ANNOTATION_CARET}"></div>
 </div>
 
@@ -167,7 +167,7 @@ describe('util', () => {
 
     describe('isInAnnotationOrMarker()', () => {
         it('should return false if no dialog element exists', () => {
-            const dialogEl = rootElement.querySelector(SELECTOR_ANNOTATION_DIALOG);
+            const dialogEl = rootElement.querySelector(SELECTOR_ANNOTATION_POPOVER);
             const markerEl = rootElement.querySelector(SELECTOR_ANNOTATION_POINT_MARKER);
             expect(util.isInAnnotationOrMarker({ target: dialogEl })).toBeTruthy();
             expect(util.isInAnnotationOrMarker({ target: markerEl })).toBeTruthy();
diff --git a/src/components/ActionControls/ActionControls.js b/src/components/ActionControls/ActionControls.js
index 2141c275e..e2fc569bf 100644
--- a/src/components/ActionControls/ActionControls.js
+++ b/src/components/ActionControls/ActionControls.js
@@ -10,6 +10,9 @@ import DrawingControls from './DrawingControls';
 
 import './ActionControls.scss';
 
+const CLASS_ACTION_CONTROLS = 'ba-action-controls';
+const CLASS_INPUT_CONTAINER = 'ba-annotation-input-container';
+
 type Props = {
     id?: string,
     type: AnnotationType,
@@ -107,7 +110,7 @@ class ActionControls extends React.Component<Props, State> {
                 if (isPending || hasComments) {
                     return (
                         <ApprovalCommentForm
-                            className='ba-annotation-input-container'
+                            className={CLASS_INPUT_CONTAINER}
                             // $FlowFixMe
                             user={NULL_USER}
                             isOpen={isInputOpen}
@@ -152,7 +155,7 @@ class ActionControls extends React.Component<Props, State> {
                 // irrespective of whether or not they can create new point annotations
                 return (
                     <ApprovalCommentForm
-                        className='ba-annotation-input-container'
+                        className={CLASS_INPUT_CONTAINER}
                         // $FlowFixMe
                         user={NULL_USER}
                         isOpen={isInputOpen}
@@ -172,7 +175,7 @@ class ActionControls extends React.Component<Props, State> {
 
     render() {
         const { type } = this.props;
-        return <div className='ba-action-controls'>{this.determineControls(type)}</div>;
+        return <div className={CLASS_ACTION_CONTROLS}>{this.determineControls(type)}</div>;
     }
 }
 
diff --git a/src/components/ActionControls/DrawingControls.js b/src/components/ActionControls/DrawingControls.js
index c6a2ad61e..0941c068f 100644
--- a/src/components/ActionControls/DrawingControls.js
+++ b/src/components/ActionControls/DrawingControls.js
@@ -7,6 +7,10 @@ import IconTrash from 'box-react-ui/lib/icons/general/IconTrash';
 
 import './DrawingControls.scss';
 
+const CLASS_DRAW_CONTROLS = 'ba-action-controls-draw';
+const CLASS_DRAWING_SAVE_BTN = 'ba-drawing-save-btn';
+const CLASS_DRAWING_DELETE_BTN = 'ba-drawing-delete-btn';
+
 type Props = {
     canDelete: boolean,
     isPending: boolean,
@@ -15,14 +19,14 @@ type Props = {
 };
 
 const DrawingControls = ({ isPending, canDelete, onCreate, onDelete }: Props) => (
-    <div className='ba-action-controls-draw'>
+    <div className={CLASS_DRAW_CONTROLS}>
         {isPending && (
-            <PlainButton type='button' className='ba-drawing-save-btn' onClick={onCreate}>
+            <PlainButton type='button' className={CLASS_DRAWING_SAVE_BTN} onClick={onCreate}>
                 <IconCheck />
             </PlainButton>
         )}
         {canDelete && (
-            <PlainButton type='button' className='ba-drawing-delete-btn' onClick={onDelete}>
+            <PlainButton type='button' className={CLASS_DRAWING_DELETE_BTN} onClick={onDelete}>
                 <IconTrash height={20} width={20} />
             </PlainButton>
         )}
diff --git a/src/components/ActionControls/DrawingControls.scss b/src/components/ActionControls/DrawingControls.scss
index 4dd8575a2..7701bd478 100644
--- a/src/components/ActionControls/DrawingControls.scss
+++ b/src/components/ActionControls/DrawingControls.scss
@@ -30,7 +30,7 @@
 
     // MOBILE & TABLET CSS
     @media #{$mobile}, #{$tablet} {
-        .ba-inline .ba-action-controls-draw {
+        .ba-inline-popover .ba-action-controls-draw {
             background: white;
             border-top: 1px solid $seesee;
             bottom: 0;
diff --git a/src/components/ActionControls/HighlightControls.js b/src/components/ActionControls/HighlightControls.js
index 1acbe6b37..2d6890840 100644
--- a/src/components/ActionControls/HighlightControls.js
+++ b/src/components/ActionControls/HighlightControls.js
@@ -8,6 +8,11 @@ import IconHighlightCommentAnnotation from 'box-react-ui/lib/icons/annotations/I
 
 import './HighlightControls.scss';
 
+const CLASS_HIGHLIGHT_CONTROLS = 'ba-action-controls-highlight';
+const CLASS_HIGHLIGHT_BTN = 'ba-highlight-btn';
+const CLASS_HIGHLIGHT_COMMENT_BTN = 'ba-highlight-comment-btn';
+const CLASS_SAVED_HIGHLIGHT = 'ba-saved-highlight';
+
 type Props = {
     canAnnotateAndDelete: boolean,
     canComment: boolean,
@@ -25,18 +30,18 @@ const HighlightControls = ({
     onCommentClick,
     isPending
 }: Props) => (
-    <div className='ba-action-controls-highlight'>
+    <div className={CLASS_HIGHLIGHT_CONTROLS}>
         {canAnnotateAndDelete && (
-            <PlainButton type='button' className='ba-highlight-btn' onClick={isPending ? onCreate : onDelete}>
+            <PlainButton type='button' className={CLASS_HIGHLIGHT_BTN} onClick={isPending ? onCreate : onDelete}>
                 <IconHighlightAnnotation
                     className={classNames({
-                        'ba-saved-highlight': !isPending
+                        [CLASS_SAVED_HIGHLIGHT]: !isPending
                     })}
                 />
             </PlainButton>
         )}
         {canComment && (
-            <PlainButton type='button' className='ba-highlight-comment-btn' onClick={onCommentClick}>
+            <PlainButton type='button' className={CLASS_HIGHLIGHT_COMMENT_BTN} onClick={onCommentClick}>
                 <IconHighlightCommentAnnotation height={24} width={24} />
             </PlainButton>
         )}
diff --git a/src/components/ActionControls/HighlightControls.scss b/src/components/ActionControls/HighlightControls.scss
index 2c1f0fb15..28cd420be 100644
--- a/src/components/ActionControls/HighlightControls.scss
+++ b/src/components/ActionControls/HighlightControls.scss
@@ -36,7 +36,7 @@
 
     // MOBILE & TABLET CSS
     @media #{$mobile}, #{$tablet} {
-        .ba-inline .ba-action-controls-highlight {
+        .ba-inline-popover .ba-action-controls-highlight {
             background: white;
             border-top: 1px solid $seesee;
             bottom: 0;
diff --git a/src/components/AnnotationPopover/AnnotationPopover.js b/src/components/AnnotationPopover/AnnotationPopover.js
index 1383f68f8..d1e641af9 100644
--- a/src/components/AnnotationPopover/AnnotationPopover.js
+++ b/src/components/AnnotationPopover/AnnotationPopover.js
@@ -8,12 +8,18 @@ import IconClose from 'box-react-ui/lib/icons/general/IconClose';
 import Internationalize from '../Internationalize';
 import Overlay from './Overlay';
 import CommentList from '../CommentList';
-import { TYPES, CLASS_ANNOTATION_POPOVER } from '../../constants';
+import { TYPES, CLASS_ANNOTATION_POPOVER, CLASS_ANNOTATION_CARET } from '../../constants';
 
 import './AnnotationPopover.scss';
 import ActionControls from '../ActionControls';
 import AnnotatorLabel from './AnnotatorLabel';
 
+const CLASS_INLINE_POPOVER = 'ba-inline-popover';
+const CLASS_ANIMATE_POPOVER = 'ba-animate-popover';
+const CLASS_CREATE_POPOVER = 'ba-create-popover';
+const CLASS_MOBILE_HEADER = 'ba-mobile-header';
+const CLASS_MOBILE_CLOSE_BTN = 'ba-mobile-close-btn';
+
 type Props = {
     isMobile: boolean,
     canComment: boolean,
@@ -79,19 +85,19 @@ class AnnotationPopover extends React.PureComponent<Props> {
             <Internationalize language={language} messages={intlMessages}>
                 <div
                     className={classNames(CLASS_ANNOTATION_POPOVER, {
-                        'ba-inline': isInline,
-                        'ba-animate-popover': isMobile,
-                        'ba-create-popover': isPending
+                        [CLASS_INLINE_POPOVER]: isInline,
+                        [CLASS_ANIMATE_POPOVER]: isMobile,
+                        [CLASS_CREATE_POPOVER]: isPending
                     })}
                 >
                     {isMobile ? (
-                        <span className='ba-mobile-header' style={{ height: headerHeight }}>
-                            <PlainButton className='ba-mobile-close-btn' onClick={onCancel}>
+                        <span className={CLASS_MOBILE_HEADER} style={{ height: headerHeight }}>
+                            <PlainButton className={CLASS_MOBILE_CLOSE_BTN} onClick={onCancel}>
                                 <IconClose height={24} width={24} />
                             </PlainButton>
                         </span>
                     ) : (
-                        <span className='ba-popover-caret' />
+                        <span className={CLASS_ANNOTATION_CARET} />
                     )}
                     <Overlay shouldDefaultFocus={!isMobile}>
                         {hasComments ? (
diff --git a/src/components/AnnotationPopover/AnnotationPopover.scss b/src/components/AnnotationPopover/AnnotationPopover.scss
index 7e569efbf..53ba5ed51 100644
--- a/src/components/AnnotationPopover/AnnotationPopover.scss
+++ b/src/components/AnnotationPopover/AnnotationPopover.scss
@@ -50,7 +50,7 @@
         white-space: normal;
     }
 
-    .ba-inline .overlay {
+    .ba-inline-popover .overlay {
         display: inline-flex;
     }
 
@@ -126,11 +126,11 @@
         }
 
         // INLINE ANNOTATION POPOVER CSS
-        .ba-popover.ba-inline {
+        .ba-popover.ba-inline-popover {
             height: auto;
         }
 
-        .ba-inline .ba-popover-overlay {
+        .ba-inline-popover .ba-popover-overlay {
             background: transparent;
             border-bottom: 1px solid $seesee;
             box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
@@ -139,20 +139,20 @@
             text-align: center;
         }
 
-        .ba-inline.ba-create-popover .ba-popover-overlay {
+        .ba-inline-popover.ba-create-popover .ba-popover-overlay {
             border: none;
             box-shadow: none;
             display: flex;
             flex-direction: column;
         }
 
-        .ba-inline .ba-mobile-header,
+        .ba-inline-popover .ba-mobile-header,
         .ba-create-popover .ba-mobile-header {
             display: none;
         }
 
         .ba-create-popover .ba-popover-overlay,
-        .ba-inline .ba-popover-overlay {
+        .ba-inline-popover .ba-popover-overlay {
             background: transparent;
             height: auto;
         }
@@ -186,12 +186,12 @@
             display: flex;
         }
 
-        .ba-popover.ba-inline {
+        .ba-popover.ba-inline-popover {
             border: none;
             width: 100%;
         }
 
-        .ba-inline .ba-mobile-header {
+        .ba-inline-popover .ba-mobile-header {
             display: none;
         }
 
@@ -201,8 +201,8 @@
             height: 100%;
         }
 
-        .ba-inline.ba-create-popover,
-        .ba-inline.ba-create-popover .ba-popover-overlay {
+        .ba-inline-popover.ba-create-popover,
+        .ba-inline-popover.ba-create-popover .ba-popover-overlay {
             background: transparent;
             height: auto;
         }
diff --git a/src/components/AnnotationPopover/AnnotatorLabel.js b/src/components/AnnotationPopover/AnnotatorLabel.js
index 8c2805c54..7c29f7dc0 100644
--- a/src/components/AnnotationPopover/AnnotatorLabel.js
+++ b/src/components/AnnotationPopover/AnnotatorLabel.js
@@ -10,6 +10,8 @@ import messages from './messages';
 
 import './AnnotatorLabel.scss';
 
+const CLASS_ANNOTATOR_LABEL = 'ba-annotator-label';
+
 type Props = {
     id?: string,
     type: AnnotationType,
@@ -42,7 +44,7 @@ class AnnotatorLabel extends React.PureComponent<Props> {
         const { id, isPending } = this.props;
         return (
             !isPending && (
-                <span className='ba-annotator-label'>
+                <span className={CLASS_ANNOTATOR_LABEL}>
                     <CommentText id={id} tagged_message={this.getAnnotatorLabelMessage()} translationEnabled={false} />
                 </span>
             )
diff --git a/src/components/AnnotationPopover/Overlay.js b/src/components/AnnotationPopover/Overlay.js
index 121ca6924..0bea9a533 100644
--- a/src/components/AnnotationPopover/Overlay.js
+++ b/src/components/AnnotationPopover/Overlay.js
@@ -3,6 +3,8 @@ import * as React from 'react';
 
 import OverlayComponent from 'box-react-ui/lib/components/flyout/Overlay';
 
+const CLASS_POPOVER_OVERLAY = 'ba-popover-overlay';
+
 type Props = {
     shouldDefaultFocus: boolean,
     children: React.Node
@@ -11,13 +13,13 @@ type Props = {
 const Overlay = ({ shouldDefaultFocus, children }: Props) => {
     if (shouldDefaultFocus) {
         return (
-            <OverlayComponent className='ba-popover-overlay' shouldOutlineFocus={false}>
+            <OverlayComponent className={CLASS_POPOVER_OVERLAY} shouldOutlineFocus={false}>
                 {children}
             </OverlayComponent>
         );
     }
 
-    return <div className='ba-popover-overlay'>{children}</div>;
+    return <div className={CLASS_POPOVER_OVERLAY}>{children}</div>;
 };
 
 export default Overlay;
diff --git a/src/components/AnnotationPopover/__tests__/AnnotationPopover-test.js b/src/components/AnnotationPopover/__tests__/AnnotationPopover-test.js
index b12c0ffa0..5b6aa52ff 100644
--- a/src/components/AnnotationPopover/__tests__/AnnotationPopover-test.js
+++ b/src/components/AnnotationPopover/__tests__/AnnotationPopover-test.js
@@ -51,7 +51,7 @@ describe('components/AnnotationPopover', () => {
             comments
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(0);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(0);
     });
 
     test('should render a view-only annotation with a annotator label and no comments', () => {
@@ -60,7 +60,7 @@ describe('components/AnnotationPopover', () => {
             type: TYPES.highlight
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(1);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(1);
     });
 
     test('should correctly render an annotation with a annotator label and no comments', () => {
@@ -70,7 +70,7 @@ describe('components/AnnotationPopover', () => {
             type: TYPES.highlight
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(1);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(1);
     });
 
     test('should correctly render a BRUI Overlay if not on mobile', () => {
@@ -99,7 +99,7 @@ describe('components/AnnotationPopover', () => {
             comments
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(0);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(0);
     });
 
     test('should correctly render a pending annotation', () => {
@@ -108,6 +108,6 @@ describe('components/AnnotationPopover', () => {
             canAnnotate: true
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(0);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(0);
     });
 });
diff --git a/src/components/AnnotationPopover/__tests__/__snapshots__/AnnotationPopover-test.js.snap b/src/components/AnnotationPopover/__tests__/__snapshots__/AnnotationPopover-test.js.snap
index e6761bc9b..4b18d9e32 100644
--- a/src/components/AnnotationPopover/__tests__/__snapshots__/AnnotationPopover-test.js.snap
+++ b/src/components/AnnotationPopover/__tests__/__snapshots__/AnnotationPopover-test.js.snap
@@ -469,7 +469,7 @@ exports[`components/AnnotationPopover should correctly render a view-only popove
 exports[`components/AnnotationPopover should correctly render an annotation with a annotator label and no comments 1`] = `
 <Internationalize>
   <div
-    className="ba-popover ba-inline"
+    className="ba-popover ba-inline-popover"
   >
     <span
       className="ba-popover-caret"
@@ -536,7 +536,7 @@ exports[`components/AnnotationPopover should correctly render an annotation with
 exports[`components/AnnotationPopover should render a view-only annotation with a annotator label and no comments 1`] = `
 <Internationalize>
   <div
-    className="ba-popover ba-inline"
+    className="ba-popover ba-inline-popover"
   >
     <span
       className="ba-popover-caret"
diff --git a/src/components/CommentList/CommentList.js b/src/components/CommentList/CommentList.js
index c5cd258e2..f63719b93 100644
--- a/src/components/CommentList/CommentList.js
+++ b/src/components/CommentList/CommentList.js
@@ -5,15 +5,18 @@ import Comment from '../Comment';
 
 import './CommentList.scss';
 
+const CLASS_COMMENT_LIST = 'ba-comment-list';
+const CLASS_COMMENT_LIST_ITEM = 'ba-comment-list-item';
+
 type Props = {
     comments: Comments,
     onDelete: Function
 };
 
 const CommentList = ({ comments, onDelete }: Props) => (
-    <ul className='ba-comment-list'>
+    <ul className={CLASS_COMMENT_LIST}>
         {comments.map(({ id, ...rest }) => (
-            <li className='ba-comment-list-item' key={`annotation_${id}`}>
+            <li className={CLASS_COMMENT_LIST_ITEM} key={`annotation_${id}`}>
                 <Comment id={id} onDelete={onDelete} {...rest} />
             </li>
         ))}
diff --git a/src/components/withFocus.js b/src/components/withFocus.js
index c0641bf48..8c3e43af9 100644
--- a/src/components/withFocus.js
+++ b/src/components/withFocus.js
@@ -6,6 +6,8 @@
 
 import * as React from 'react';
 
+import { CLASS_FOCUSED } from '../constants';
+
 type Props = {};
 type State = {
     isFocused: boolean
@@ -34,7 +36,7 @@ const withFocus = (WrappedComponent: React.ComponentType<any>) => {
             const { isFocused } = this.state;
             return (
                 <WrappedComponent
-                    className={isFocused ? 'ba-is-focused' : ''}
+                    className={isFocused ? CLASS_FOCUSED : ''}
                     onBlur={this.handleBlur}
                     onFocus={this.handleFocus}
                     {...this.props}
diff --git a/src/constants.js b/src/constants.js
index 00e299890..a99a9bd3a 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -9,6 +9,8 @@ export const CLASS_INVISIBLE = 'bp-is-invisible';
 export const SELECTOR_INVISIBLE = `.${CLASS_INVISIBLE}`;
 export const CLASS_DISABLED = 'is-disabled';
 export const SELECTOR_DISABLED = `.${CLASS_DISABLED}`;
+export const CLASS_FOCUSED = 'ba-is-focused';
+export const SELECTOR_FOCUSED = `.${CLASS_FOCUSED}`;
 
 export const CLASS_BUTTON = 'bp-btn';
 export const SELECTOR_BUTTON = `.${CLASS_BUTTON}`;
@@ -44,71 +46,15 @@ export const CLASS_ANNOTATIONS_LOADED = 'ba-annotations-loaded';
 export const SELECTOR_ANNOTATIONS_LOADED = `.${CLASS_ANNOTATIONS_LOADED}`;
 export const CLASS_ANNOTATION_POINT_MARKER = 'ba-point-annotation-marker';
 export const SELECTOR_ANNOTATION_POINT_MARKER = `.${CLASS_ANNOTATION_POINT_MARKER}`;
-export const CLASS_ANNOTATION_POINT_BUTTON = 'ba-point-annotation-btn';
-export const SELECTOR_ANNOTATION_POINT_BUTTON = `.${CLASS_ANNOTATION_POINT_BUTTON}`;
 
 // Dialog CSS constants
 export const CLASS_ANNOTATION_POPOVER = 'ba-popover';
-export const SELECTOR_CLASS_ANNOTATION_POPOVER = `.${CLASS_ANNOTATION_POPOVER}`;
-export const CLASS_ANNOTATION_DIALOG = 'ba-annotation-dialog';
-export const SELECTOR_ANNOTATION_DIALOG = `.${CLASS_ANNOTATION_DIALOG}`;
-export const CLASS_ANNOTATION_CARET = 'ba-popover-caret';
-export const SELECTOR_ANNOTATION_CARET = `.${CLASS_ANNOTATION_CARET}`;
-
+export const SELECTOR_ANNOTATION_POPOVER = `.${CLASS_ANNOTATION_POPOVER}`;
 export const CLASS_FLIPPED_POPOVER = 'ba-popover-flipped';
+export const SELECTOR_FLIPPED_POPOVER = `.${CLASS_FLIPPED_POPOVER}`;
 
-// Highlight dialog CSS constants
-export const CLASS_ANNOTATION_HIGHLIGHT_DIALOG = 'ba-annotation-highlight-dialog';
-export const SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG = `.${CLASS_ANNOTATION_HIGHLIGHT_DIALOG}`;
-export const CLASS_ANNOTATION_PLAIN_HIGHLIGHT = 'ba-plain-highlight';
-export const SELECTOR_ANNOTATION_PLAIN_HIGHLIGHT = `.${CLASS_ANNOTATION_PLAIN_HIGHLIGHT}`;
-
-export const CLASS_HIGHLIGHT_DIALOG = 'ba-highlight-dialog';
-export const SELECTOR_HIGHLIGHT_DIALOG = `.${CLASS_HIGHLIGHT_DIALOG}`;
-export const CLASS_TEXT_HIGHLIGHTED = 'ba-is-text-highlighted';
-export const SELECTOR_TEXT_HIGHLIGHTED = `.${CLASS_TEXT_HIGHLIGHTED}`;
-export const CLASS_HIGHLIGHT_LABEL = 'ba-annotation-highlight-label';
-export const SELECTOR_HIGHLIGHT_LABEL = `.${CLASS_HIGHLIGHT_LABEL}`;
-export const CLASS_HIGHLIGHT_BTNS = 'ba-annotation-highlight-btns';
-export const SELECTOR_HIGHLIGHT_BTNS = `.${CLASS_HIGHLIGHT_BTNS}`;
-export const CLASS_ADD_HIGHLIGHT_BTN = 'ba-add-highlight-btn';
-export const SELECTOR_ADD_HIGHLIGHT_BTN = `.${CLASS_ADD_HIGHLIGHT_BTN}`;
-export const CLASS_ADD_HIGHLIGHT_COMMENT_BTN = 'ba-highlight-comment-btn';
-export const SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN = `.${CLASS_ADD_HIGHLIGHT_COMMENT_BTN}`;
-export const CLASS_HIGHLIGHT_QUAD_CORNER_CONTAINER = 'ba-quad-corner-container';
-export const SELECTOR_HIGHLIGHT_QUAD_CORNER_CONTAINER = `.${CLASS_HIGHLIGHT_QUAD_CORNER_CONTAINER}`;
-export const CLASS_HIGHLIGHT_QUAD_CORNER = 'ba-quad-corner';
-export const SELECTOR_HIGHLIGHT_QUAD_CORNER = `.${CLASS_HIGHLIGHT_QUAD_CORNER}`;
-
-// Drawing dialog CSS constants
-export const CLASS_ANNOTATION_DRAWING_LABEL = 'ba-annotation-drawing-label';
-export const SELECTOR_ANNOTATION_DRAWING_LABEL = `.${CLASS_ANNOTATION_DRAWING_LABEL}`;
-export const CLASS_ANNOTATION_DRAWING_DIALOG = 'ba-annotation-drawing-dialog';
-export const SELECTOR_ANNOTATION_DRAWING_DIALOG = `.${CLASS_ANNOTATION_DRAWING_DIALOG}`;
-
-export const CLASS_ANNOTATION_DRAWING_BTNS = 'ba-annotation-drawing-btns';
-export const SELECTOR_ANNOTATION_DRAWING_BTNS = `.${CLASS_ANNOTATION_DRAWING_BTNS}`;
-export const CLASS_ADD_DRAWING_BTN = 'ba-btn-annotate-draw-add';
-export const SELECTOR_ADD_DRAWING_BTN = `.${CLASS_ADD_DRAWING_BTN}`;
-export const CLASS_DELETE_DRAWING_BTN = 'ba-btn-annotate-draw-delete';
-export const SELECTOR_DELETE_DRAWING_BTN = `.${CLASS_DELETE_DRAWING_BTN}`;
-
-// Mobile dialog CSS constants
-export const CLASS_ANIMATE_DIALOG = 'ba-animate-show-dialog';
-export const SELECTOR_ANIMATE_DIALOG = `.${CLASS_ANIMATE_DIALOG}`;
-export const CLASS_MOBILE_ANNOTATION_DIALOG = 'ba-mobile-annotation-dialog';
-export const SELECTOR_MOBILE_ANNOTATION_DIALOG = `.${CLASS_MOBILE_ANNOTATION_DIALOG}`;
-export const CLASS_MOBILE_CREATE_ANNOTATION_DIALOG = 'ba-mobile-create-annotation-dialog';
-export const SELECTOR_MOBILE_CREATE_ANNOTATION_DIALOG = `.${CLASS_MOBILE_CREATE_ANNOTATION_DIALOG}`;
-export const CLASS_MOBILE_CREATE_HIGHLIGHT_DIALOG = 'ba-mobile-create-highlight-dialog';
-export const SELECTOR_MOBILE_CREATE_HIGHLIGHT_DIALOG = `.${CLASS_MOBILE_CREATE_HIGHLIGHT_DIALOG}`;
-export const CLASS_CREATE_DIALOG = 'ba-create-annotation-dialog';
-export const SELECTOR_CREATE_DIALOG = `.${CLASS_CREATE_DIALOG}`;
-
-export const CLASS_MOBILE_DIALOG_HEADER = 'ba-annotation-mobile-header';
-export const SELECTOR_MOBILE_DIALOG_HEADER = `.${CLASS_MOBILE_DIALOG_HEADER}`;
-export const CLASS_DIALOG_CLOSE = 'ba-annotation-dialog-close';
-export const SELECTOR_DIALOG_CLOSE = `.${CLASS_DIALOG_CLOSE}`;
+export const CLASS_ANNOTATION_CARET = 'ba-popover-caret';
+export const SELECTOR_ANNOTATION_CARET = `.${CLASS_ANNOTATION_CARET}`;
 
 // Annotation mode CSS constants
 export const CLASS_ANNOTATION_MODE = 'ba-annotation-mode';
@@ -138,6 +84,12 @@ export const SELECTOR_ANNOTATION_LAYER_DRAW = `.${CLASS_ANNOTATION_LAYER_DRAW}`;
 export const CLASS_ANNOTATION_LAYER_DRAW_IN_PROGRESS = 'ba-annotation-layer-draw-in-progress';
 export const SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS = `.${CLASS_ANNOTATION_LAYER_DRAW_IN_PROGRESS}`;
 
+// Highlight CSS constants
+export const CLASS_HIGHLIGHT_QUAD_CORNER_CONTAINER = 'ba-quad-corner-container';
+export const SELECTOR_HIGHLIGHT_QUAD_CORNER_CONTAINER = `.${CLASS_HIGHLIGHT_QUAD_CORNER_CONTAINER}`;
+export const CLASS_HIGHLIGHT_QUAD_CORNER = 'ba-quad-corner';
+export const SELECTOR_HIGHLIGHT_QUAD_CORNER = `.${CLASS_HIGHLIGHT_QUAD_CORNER}`;
+
 // Drawing CSS constants
 export const CLASS_ANNOTATION_DRAW = 'ba-annotation-draw';
 export const SELECTOR_ANNOTATION_DRAW = `.${CLASS_ANNOTATION_DRAW}`;
diff --git a/src/doc/CreateHighlightDialog.js b/src/doc/CreateHighlightDialog.js
index 2fd96843a..640d4b049 100644
--- a/src/doc/CreateHighlightDialog.js
+++ b/src/doc/CreateHighlightDialog.js
@@ -20,7 +20,7 @@ import {
     TYPES,
     PAGE_PADDING_TOP,
     PAGE_PADDING_BOTTOM,
-    SELECTOR_CLASS_ANNOTATION_POPOVER,
+    SELECTOR_ANNOTATION_POPOVER,
     INLINE_POPOVER_HEIGHT
 } from '../constants';
 
@@ -187,11 +187,7 @@ class CreateHighlightDialog extends EventEmitter {
             return;
         }
 
-        const popoverEl = findElement(
-            this.annotatedElement,
-            SELECTOR_CLASS_ANNOTATION_POPOVER,
-            this.renderAnnotationPopover
-        );
+        const popoverEl = findElement(this.annotatedElement, SELECTOR_ANNOTATION_POPOVER, this.renderAnnotationPopover);
         const popoverDimensions = popoverEl.getBoundingClientRect();
         const pageDimensions = pageEl.getBoundingClientRect();
         const pageLeft = pageDimensions.left;
@@ -222,11 +218,7 @@ class CreateHighlightDialog extends EventEmitter {
         const pageHeight = pageDimensions.height - PAGE_PADDING_TOP - PAGE_PADDING_BOTTOM;
         const BOUNDARY_PADDING = 5;
 
-        const popoverEl = findElement(
-            this.annotatedElement,
-            SELECTOR_CLASS_ANNOTATION_POPOVER,
-            this.renderAnnotationPopover
-        );
+        const popoverEl = findElement(this.annotatedElement, SELECTOR_ANNOTATION_POPOVER, this.renderAnnotationPopover);
         const dialogDimensions = popoverEl.getBoundingClientRect();
         const dialogWidth = dialogDimensions.width;
         let dialogX = this.position.x - dialogWidth / 2;
diff --git a/src/doc/DocDrawingThread.js b/src/doc/DocDrawingThread.js
index 75a786e2a..d2b25f2d4 100644
--- a/src/doc/DocDrawingThread.js
+++ b/src/doc/DocDrawingThread.js
@@ -7,7 +7,7 @@ import {
     CLASS_ANNOTATION_LAYER_DRAW,
     CLASS_ANNOTATION_LAYER_DRAW_IN_PROGRESS,
     PAGE_PADDING_TOP,
-    SELECTOR_CLASS_ANNOTATION_POPOVER
+    SELECTOR_ANNOTATION_POPOVER
 } from '../constants';
 import { getBrowserCoordinatesFromLocation, getContext } from './docUtil';
 import { createLocation, getScale, repositionCaret, findElement, getPageEl, shouldDisplayMobileUI } from '../util';
@@ -329,11 +329,7 @@ class DocDrawingThread extends DrawingThread {
         }
 
         // Render popover so we can get width
-        const popoverEl = findElement(
-            this.annotatedElement,
-            SELECTOR_CLASS_ANNOTATION_POPOVER,
-            this.renderAnnotationPopover
-        );
+        const popoverEl = findElement(this.annotatedElement, SELECTOR_ANNOTATION_POPOVER, this.renderAnnotationPopover);
         const boundaryEl = findElement(this.annotatedElement, '.ba-drawing-boundary', this.drawBoundary);
         const pageDimensions = this.pageEl.getBoundingClientRect();
         const boundaryDimensions = boundaryEl.getBoundingClientRect();
diff --git a/src/doc/DocHighlightThread.js b/src/doc/DocHighlightThread.js
index 9bcec84c8..bc587b535 100644
--- a/src/doc/DocHighlightThread.js
+++ b/src/doc/DocHighlightThread.js
@@ -13,7 +13,7 @@ import {
     PAGE_PADDING_BOTTOM,
     BORDER_OFFSET,
     INLINE_POPOVER_HEIGHT,
-    SELECTOR_CLASS_ANNOTATION_POPOVER
+    SELECTOR_ANNOTATION_POPOVER
 } from '../constants';
 
 class DocHighlightThread extends AnnotationThread {
@@ -475,7 +475,7 @@ class DocHighlightThread extends AnnotationThread {
 
         const popoverEl = util.findElement(
             this.annotatedElement,
-            SELECTOR_CLASS_ANNOTATION_POPOVER,
+            SELECTOR_ANNOTATION_POPOVER,
             this.renderAnnotationPopover
         );
         const dialogDimensions = popoverEl.getBoundingClientRect();
diff --git a/src/doc/DocPointThread.js b/src/doc/DocPointThread.js
index b3b78d10b..192ea2921 100644
--- a/src/doc/DocPointThread.js
+++ b/src/doc/DocPointThread.js
@@ -4,7 +4,7 @@ import { getPageEl, showElement, findElement, repositionCaret, shouldDisplayMobi
 import { getBrowserCoordinatesFromLocation } from './docUtil';
 import {
     STATES,
-    SELECTOR_CLASS_ANNOTATION_POPOVER,
+    SELECTOR_ANNOTATION_POPOVER,
     ANNOTATION_POPOVER_CARET_HEIGHT,
     CLASS_FLIPPED_POPOVER
 } from '../constants';
@@ -54,11 +54,7 @@ class DocPointThread extends AnnotationThread {
         }
 
         const pageEl = this.getPopoverParent();
-        const popoverEl = findElement(
-            this.annotatedElement,
-            SELECTOR_CLASS_ANNOTATION_POPOVER,
-            this.renderAnnotationPopover
-        );
+        const popoverEl = findElement(this.annotatedElement, SELECTOR_ANNOTATION_POPOVER, this.renderAnnotationPopover);
         const dialogDimensions = popoverEl.getBoundingClientRect();
         const dialogWidth = dialogDimensions.width;
         const pageDimensions = pageEl.getBoundingClientRect();
diff --git a/src/image/ImagePointThread.js b/src/image/ImagePointThread.js
index 025c07208..606ebf331 100644
--- a/src/image/ImagePointThread.js
+++ b/src/image/ImagePointThread.js
@@ -8,7 +8,7 @@ import {
     POINT_ANNOTATION_ICON_WIDTH,
     POINT_ANNOTATION_ICON_HEIGHT,
     POINT_ANNOTATION_ICON_DOT_HEIGHT,
-    SELECTOR_CLASS_ANNOTATION_POPOVER,
+    SELECTOR_ANNOTATION_POPOVER,
     CLASS_FLIPPED_POPOVER
 } from '../constants';
 
@@ -37,11 +37,7 @@ class ImagePointThread extends AnnotationThread {
             return;
         }
 
-        const popoverEl = findElement(
-            this.annotatedElement,
-            SELECTOR_CLASS_ANNOTATION_POPOVER,
-            this.renderAnnotationPopover
-        );
+        const popoverEl = findElement(this.annotatedElement, SELECTOR_ANNOTATION_POPOVER, this.renderAnnotationPopover);
         const dialogDimensions = popoverEl.getBoundingClientRect();
         const dialogWidth = dialogDimensions.width;
 
diff --git a/src/util.js b/src/util.js
index a5d26d140..548b0b384 100644
--- a/src/util.js
+++ b/src/util.js
@@ -8,10 +8,10 @@ import {
     SELECTOR_ANNOTATION_CARET,
     CLASS_DISABLED,
     CLASS_HIDDEN,
-    CLASS_ANNOTATION_DIALOG,
     CLASS_BOX_PREVIEW_HEADER,
     SELECTOR_ANNOTATION_MODE,
-    CLASS_ANNOTATION_POINT_MARKER
+    CLASS_ANNOTATION_POINT_MARKER,
+    CLASS_ANNOTATION_POPOVER
 } from './constants';
 
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
@@ -247,7 +247,7 @@ export function isInElement(event, el) {
  */
 export function isInDialog(event, container = null) {
     if (!container) {
-        return !!findClosestElWithClass(event.target, CLASS_ANNOTATION_DIALOG);
+        return !!findClosestElWithClass(event.target, CLASS_ANNOTATION_POPOVER);
     }
 
     const annotatorLabelEl = container.querySelector('.ba-annotator-label');