diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index cf89df11f6..4fdf3bd9b3 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -46,7 +46,6 @@ export default class Confirm extends Component {
 
   render() {
     const classes = classNames(
-      'sd-confirm',
       this.props.className
     )
     return (
@@ -58,8 +57,8 @@ export default class Confirm extends Component {
           {this.state.message}
         </ModalContent>
         <ModalFooter>
-          <div className='sd-abort-button ui button' onClick={this.handleAbort}>{this.props.abortLabel}</div>
-          <div className='sd-confirm-button ui blue button' onClick={this.handleConfirm}>{this.props.confirmLabel}</div>
+          <div className='ui button' onClick={this.handleAbort}>{this.props.abortLabel}</div>
+          <div className='ui blue button' onClick={this.handleConfirm}>{this.props.confirmLabel}</div>
         </ModalFooter>
       </Modal>
     )
diff --git a/src/addons/Select/Select.js b/src/addons/Select/Select.js
index 0fbdb2e702..f638d45d36 100644
--- a/src/addons/Select/Select.js
+++ b/src/addons/Select/Select.js
@@ -1,6 +1,4 @@
-/* eslint-disable valid-jsdoc */
 import React, { PropTypes } from 'react'
-import cx from 'classnames'
 
 import META from '../../utils/Meta'
 import Dropdown from '../../modules/Dropdown/Dropdown'
@@ -9,10 +7,8 @@ import Dropdown from '../../modules/Dropdown/Dropdown'
  * A <Select /> is sugar for <Dropdown selection />.
  * @see Dropdown
  */
-function Select({ className, ...rest }) {
-  const classes = cx('sd-select', className)
-
-  return <Dropdown {...rest} className={classes} selection />
+function Select(props) {
+  return <Dropdown {...props} selection />
 }
 
 Select.propTypes = {
diff --git a/src/addons/Textarea/Textarea.js b/src/addons/Textarea/Textarea.js
index 0e46a46af1..de665132db 100644
--- a/src/addons/Textarea/Textarea.js
+++ b/src/addons/Textarea/Textarea.js
@@ -1,5 +1,4 @@
 import React, { Component, PropTypes } from 'react'
-import classNames from 'classnames'
 import META from '../../utils/Meta'
 
 export default class Textarea extends Component {
@@ -15,12 +14,8 @@ export default class Textarea extends Component {
   }
 
   render() {
-    const classes = classNames(
-      'sd-textarea',
-      this.props.className
-    )
     return (
-      <textarea {...this.props} className={classes} />
+      <textarea {...this.props} />
     )
   }
 }
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 5c88173d12..24e157441f 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -118,7 +118,6 @@ export default class Form extends Component {
 
   render() {
     const classes = classNames(
-      'sd-form',
       'ui',
       this.props.className,
       'form'
diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js
index 6886471cb5..85d3beb2b8 100644
--- a/src/collections/Form/FormField.js
+++ b/src/collections/Form/FormField.js
@@ -20,7 +20,6 @@ export default class FormField extends Component {
 
   render() {
     const classes = classNames(
-      'sd-form-field',
       this.props.width && `${numberToWord(this.props.width)} wide`,
       this.props.className,
       'field'
diff --git a/src/collections/Form/FormFields.js b/src/collections/Form/FormFields.js
index 939499d921..5f4d2fed2c 100644
--- a/src/collections/Form/FormFields.js
+++ b/src/collections/Form/FormFields.js
@@ -34,7 +34,6 @@ export default class FormFields extends Component {
     }
 
     const classes = classNames(
-      'sd-form-fields',
       this.props.className,
       numberToWord(fieldCount),
       'fields'
diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js
index 05357a3bbd..5169954f95 100644
--- a/src/collections/Grid/Grid.js
+++ b/src/collections/Grid/Grid.js
@@ -21,7 +21,6 @@ export default class Grid extends Component {
 
   render() {
     const classes = classNames(
-      'sd-grid',
       'ui',
       this.props.className,
       'grid'
diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js
index 67b673bea8..f3f543c57e 100644
--- a/src/collections/Grid/GridColumn.js
+++ b/src/collections/Grid/GridColumn.js
@@ -21,7 +21,6 @@ export default class GridColumn extends Component {
 
   render() {
     const classes = classNames(
-      'sd-grid-column',
       this.props.className,
       this.props.width && `${numberToWord(this.props.width)} wide`,
       'column'
diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js
index 7fbb4d654f..1e85049915 100644
--- a/src/collections/Grid/GridRow.js
+++ b/src/collections/Grid/GridRow.js
@@ -17,7 +17,6 @@ export default class GridRow extends Component {
 
   render() {
     const classes = classNames(
-      'sd-grid-row',
       this.props.className,
       'row'
     )
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index e362ca62bc..ac9f06bf45 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -37,7 +37,7 @@ export default class Menu extends Component {
   render() {
     const { activeItem, children, className, ...rest } = this.props
 
-    const classes = cx('sd-menu ui', className, 'menu')
+    const classes = cx('ui', className, 'menu')
 
     const _children = Children.map(children, (child) => {
       const { type, props } = child
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index 64d4cdfcf1..44fde85002 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
-import classNames from 'classnames'
+import cx from 'classnames'
 import META from '../../utils/Meta'
+import Label from 'src/elements/Label/Label'
 
 function MenuItem({ __onClick, active, children, className, label, name, onClick, ...rest }) {
   const handleClick = (e) => {
@@ -8,9 +9,7 @@ function MenuItem({ __onClick, active, children, className, label, name, onClick
     if (onClick) onClick(name)
   }
 
-  const menuLabel = label && <div className='sd-menu-label ui blue label'>{label}</div>
-  const classes = classNames(
-    'sd-menu-item',
+  const classes = cx(
     active && 'active',
     className,
     'item',
@@ -19,7 +18,7 @@ function MenuItem({ __onClick, active, children, className, label, name, onClick
   return (
     <a {...rest} className={classes} onClick={handleClick}>
       {name}
-      {menuLabel}
+      {label && <Label>{label}</Label>}
       {children}
     </a>
   )
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index b3081b06b7..8bab7d9616 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react'
 import classNames from 'classnames'
 import $ from 'jquery'
 import META from '../../utils/Meta'
+import Header from '../../elements/Header/Header'
 import Icon from '../../elements/Icon/Icon'
 
 export default class Message extends Component {
@@ -29,28 +30,22 @@ export default class Message extends Component {
 
   render() {
     const classes = classNames(
-      'sd-message',
       'ui',
       this.props.className,
       { icon: this.props.icon },
       'message'
     )
 
-    const iconClasses = classNames(
-      'sd-message-icon',
-      this.props.icon
-    )
-
-    const closeIcon = <Icon className='sd-message-close-icon close' onClick={this.handleDismiss} />
-    const header = <div className='sd-message-header header'>{this.props.header}</div>
-    const icon = <Icon className={iconClasses} />
+    const closeIcon = <Icon className='close' onClick={this.handleDismiss} />
+    const header = <Header>{this.props.header}</Header>
+    const icon = <Icon className={this.props.icon} />
 
     // wrap children in <p> if there is a header
     const children = this.props.header ? <p>{this.props.children}</p> : this.props.children
 
     // wrap header and children in content if there is an icon
     const content = (
-      <div className='sd-message-content content'>
+      <div className='content'>
         {this.props.header && header}
         {children}
       </div>
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index 618078f7f5..a123d82208 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React, { Children, Component, PropTypes } from 'react'
-import classNames from 'classnames'
+import cx from 'classnames'
 import { customPropTypes } from '../../utils/propUtils'
 import META from '../../utils/Meta'
 import TableColumn from './TableColumn'
@@ -96,7 +96,7 @@ export default class Table extends Component {
       const onClick = () => this._handleSortHeaderChange(
         dataKey, sort.direction === 'ascending' ? 'descending' : 'ascending'
       )
-      const classes = classNames('sd-table-header', {
+      const classes = cx({
         sorted: isSorted,
         ascending: isSorted && sort.direction === 'ascending',
         descending: isSorted && sort.direction === 'descending',
@@ -116,14 +116,14 @@ export default class Table extends Component {
         content = Table.getSafeCellContents(itemContents)
       }
 
-      return <td key={rowIndex + column.props.dataKey} className={'sd-table-cell'}>{content}</td>
+      return <td key={rowIndex + column.props.dataKey}>{content}</td>
     })
   }
 
   _getRows() {
     return _.map(this.props.data, (dataItem, rowIndex) => {
       const cells = this._getCells(dataItem, rowIndex)
-      const classes = classNames('sd-table-row', {
+      const classes = cx({
         active: this._isRowSelected(rowIndex),
       })
       const onClick = () => this._handleSelectRow(dataItem, rowIndex)
@@ -140,8 +140,7 @@ export default class Table extends Component {
 
   render() {
     const { onSelectRow, onSortChange, defaultSelectedRows } = this.props
-    const classes = classNames(
-      'sd-table',
+    const classes = cx(
       'ui',
       { selectable: !!onSelectRow || !!defaultSelectedRows },
       { sortable: !!onSortChange },
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index d8a92426ca..f0ac21cb0b 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -20,7 +20,6 @@ export default class Button extends Component {
 
   render() {
     const classes = classNames(
-      'sd-button',
       'ui',
       this.props.className,
       'button'
diff --git a/src/elements/Button/Buttons.js b/src/elements/Button/Buttons.js
index 78e6beb606..5f74786bf4 100644
--- a/src/elements/Button/Buttons.js
+++ b/src/elements/Button/Buttons.js
@@ -17,7 +17,6 @@ export default class Buttons extends Component {
 
   render() {
     const classes = classNames(
-      'sd-buttons',
       'ui',
       this.props.className,
       'buttons'
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
index 3a6c7a34b1..d6f629c85d 100644
--- a/src/elements/Container/Container.js
+++ b/src/elements/Container/Container.js
@@ -17,7 +17,8 @@ function Container(props) {
     children, className,
   } = props
 
-  const classes = cx('sd-container ui',
+  const classes = cx(
+    'ui',
     useKeyOnly(text, 'text'),
     useAlignedProp(aligned),
     useKeyOnly(fluid, 'fluid'),
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index 44492b1e55..71383ea875 100644
--- a/src/elements/Divider/Divider.js
+++ b/src/elements/Divider/Divider.js
@@ -15,7 +15,8 @@ function Divider(props) {
     children, className,
   } = props
 
-  const classes = cx('sd-divider ui',
+  const classes = cx(
+    'ui',
     useKeyOnly(horizontal, 'horizontal'),
     useKeyOnly(vertical, 'vertical'),
     useKeyOnly(inverted, 'inverted'),
diff --git a/src/elements/Header/HeaderH1.js b/src/elements/Header/HeaderH1.js
index 1d5e3e0e2a..214c5e0672 100644
--- a/src/elements/Header/HeaderH1.js
+++ b/src/elements/Header/HeaderH1.js
@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH1(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h1' _headerElement='h1' />
+    <_Header {...props} _headerElement='h1' />
   )
 }
 
diff --git a/src/elements/Header/HeaderH2.js b/src/elements/Header/HeaderH2.js
index e088e95b82..d8f13f1edd 100644
--- a/src/elements/Header/HeaderH2.js
+++ b/src/elements/Header/HeaderH2.js
@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH2(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h2' _headerElement='h2' />
+    <_Header {...props} _headerElement='h2' />
   )
 }
 
diff --git a/src/elements/Header/HeaderH3.js b/src/elements/Header/HeaderH3.js
index b47a366d91..3ab701429f 100644
--- a/src/elements/Header/HeaderH3.js
+++ b/src/elements/Header/HeaderH3.js
@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH3(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h3' _headerElement='h3' />
+    <_Header {...props} _headerElement='h3' />
   )
 }
 
diff --git a/src/elements/Header/HeaderH4.js b/src/elements/Header/HeaderH4.js
index 8339f066bc..77a3edc158 100644
--- a/src/elements/Header/HeaderH4.js
+++ b/src/elements/Header/HeaderH4.js
@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH4(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h4' _headerElement='h4' />
+    <_Header {...props} _headerElement='h4' />
   )
 }
 
diff --git a/src/elements/Header/HeaderH5.js b/src/elements/Header/HeaderH5.js
index 3bd2ab0b67..91e237364e 100644
--- a/src/elements/Header/HeaderH5.js
+++ b/src/elements/Header/HeaderH5.js
@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH5(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h5' _headerElement='h5' />
+    <_Header {...props} _headerElement='h5' />
   )
 }
 
diff --git a/src/elements/Header/HeaderH6.js b/src/elements/Header/HeaderH6.js
index ee67420e9d..5e7ed9b862 100644
--- a/src/elements/Header/HeaderH6.js
+++ b/src/elements/Header/HeaderH6.js
@@ -4,7 +4,7 @@ import _Header from './_Header'
 
 function HeaderH6(props) {
   return (
-    <_Header {...props} _sdClass='sd-header-h6' _headerElement='h6' />
+    <_Header {...props} _headerElement='h6' />
   )
 }
 
diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js
index 02cc8a68ae..d9f3d088b3 100644
--- a/src/elements/Header/HeaderSubheader.js
+++ b/src/elements/Header/HeaderSubheader.js
@@ -10,7 +10,8 @@ function HeaderSubheader(props) {
     children, className,
   } = props
 
-  const classes = cx('sd-header-subheader', 'sub',
+  const classes = cx(
+    'sub',
     className,
     'header'
   )
diff --git a/src/elements/Header/_Header.js b/src/elements/Header/_Header.js
index fbebfc83a3..523a964b52 100644
--- a/src/elements/Header/_Header.js
+++ b/src/elements/Header/_Header.js
@@ -15,13 +15,13 @@ import {
 
 function _Header(props) {
   const {
-    _sdClass, _headerElement,
+    _headerElement,
     color, aligned, dividing, block, attached, floated, inverted, disabled,
     icon, image, children, className,
   } = props
 
   const classes = cx(
-    _sdClass, 'ui',
+    'ui',
     icon && 'icon',
     color,
     useAlignedProp(aligned),
@@ -61,7 +61,6 @@ _Header._meta = {
 
 _Header.propTypes = {
   _headerElement: PropTypes.string,
-  _sdClass: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.node,
 
@@ -104,7 +103,6 @@ _Header.propTypes = {
 
 _Header.defaultProps = {
   _headerElement: 'div',
-  _sdClass: 'sd-header',
 }
 
 export default _Header
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 63ad09195a..93bb7f61cf 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -16,7 +16,6 @@ export default class Icon extends Component {
   render() {
     const { className } = this.props
     const classes = cx(
-      'sd-icon',
       className,
       'icon',
     )
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index 375f708d8f..061d5d972c 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -17,7 +17,6 @@ export default class Image extends Component {
 
   render() {
     const classes = classNames(
-      'sd-image',
       'ui',
       this.props.className,
       'image'
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 8df2d42bd5..3280840f45 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -53,7 +53,6 @@ export default class Input extends Component {
     })
 
     const classes = classNames(
-      'sd-input',
       'ui',
       className,
       'input'
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index ac3292a573..a6dc429dea 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -28,7 +28,7 @@ function Label(props) {
   const handleRemove = e => onRemove && onRemove(e, props)
   const handleDetailClick = e => onDetailClick && onDetailClick(e, props)
 
-  const classes = cx('sd-label ui',
+  const classes = cx('ui',
     size,
     color,
     useKeyOnly(basic, 'basic'),
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index 41573c8af1..4ded1341ea 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -19,7 +19,6 @@ export default class List extends Component {
 
   render() {
     const classes = classNames(
-      'sd-list',
       'ui',
       this.props.className,
       'list'
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index b283515aec..982b872b9f 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -23,7 +23,7 @@ export default class ListItem extends Component {
 
   render() {
     const { children, className, description, header, icon, image, ...rest } = this.props
-    const classes = cx('sd-list-item', className, 'item')
+    const classes = cx(className, 'item')
 
     const media = iconPropRenderer(icon) || imagePropRenderer(image)
     const _description = description || children
diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index 6b30c55845..f6afafcd6f 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react'
 import classNames from 'classnames'
 import META from '../../utils/Meta'
 import Segments from './SegmentSegments'
+import Header from '../Header/Header'
 
 /**
  * A segment is used to create a grouping of related content.
@@ -28,9 +29,8 @@ export default class Segment extends Component {
   static Segments = Segments
 
   render() {
-    const heading = <h4 className='sd-segment-heading ui header'>{this.props.heading}</h4>
+    const heading = <Header.H4>{this.props.heading}</Header.H4>
     const classes = classNames(
-      'sd-segment',
       'ui',
       this.props.className,
       'segment'
diff --git a/src/elements/Segment/SegmentSegments.js b/src/elements/Segment/SegmentSegments.js
index e646d4a6f6..21d859965d 100644
--- a/src/elements/Segment/SegmentSegments.js
+++ b/src/elements/Segment/SegmentSegments.js
@@ -32,7 +32,6 @@ export default class SegmentSegments extends Component {
     const { children } = this.props
 
     const classes = classNames(
-      'sd-segment-segments',
       'ui',
       this.props.className,
       'segments'
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index ba346fca5f..f064c9e22c 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -69,7 +69,6 @@ export default class Checkbox extends Component {
       type = 'radio'
     }
     const classes = classNames(
-      'sd-checkbox',
       'ui',
       this.props.className,
       // auto apply fitted class to compact white space when there is no label
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index db938c916c..6cc4ea06de 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -739,7 +739,8 @@ export default class Dropdown extends Component {
     } = this.props
 
     // Classes
-    const classes = cx('sd-dropdown ui',
+    const classes = cx(
+      'ui',
       dropdownClasses,
       useKeyOnly(disabled, 'disabled'),
       useKeyOnly(error, 'error'),
diff --git a/src/modules/Dropdown/DropdownDivider.js b/src/modules/Dropdown/DropdownDivider.js
index 1f3966b0d8..ddeb620f32 100644
--- a/src/modules/Dropdown/DropdownDivider.js
+++ b/src/modules/Dropdown/DropdownDivider.js
@@ -14,7 +14,7 @@ class DropdownDivider extends Component {
   }
 
   render() {
-    return <div className='sd-dropdown-divider divider' {...this.props} />
+    return <div className='divider' {...this.props} />
   }
 }
 
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 3539a8f404..6e6eb2c04f 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -25,7 +25,6 @@ function DropdownItem(props) {
   }
 
   const classes = cx(
-    'sd-dropdown-item',
     useKeyOnly(active, 'active'),
     useKeyOnly(selected, 'selected'),
     'item',
diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js
index 7298aa62b2..ebe000a87e 100644
--- a/src/modules/Dropdown/DropdownMenu.js
+++ b/src/modules/Dropdown/DropdownMenu.js
@@ -21,7 +21,7 @@ class DropdownMenu extends Component {
 
   render() {
     const { className, ...rest } = this.props
-    const classes = cx('sd-dropdown-menu menu transition', className)
+    const classes = cx('menu transition', className)
     return <div {...rest} className={classes} />
   }
 }
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index fc0aea5894..51a7535c69 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -34,7 +34,6 @@ export default class Modal extends Component {
 
   render() {
     const classes = classNames(
-      'sd-modal',
       'ui',
       this.props.className,
       'modal',
diff --git a/src/modules/Modal/ModalContent.js b/src/modules/Modal/ModalContent.js
index d2309a4646..52bdcd80f5 100644
--- a/src/modules/Modal/ModalContent.js
+++ b/src/modules/Modal/ModalContent.js
@@ -17,7 +17,6 @@ export default class ModalContent extends Component {
 
   render() {
     const classes = classNames(
-      'sd-modal-content',
       this.props.className,
       'content'
     )
diff --git a/src/modules/Modal/ModalFooter.js b/src/modules/Modal/ModalFooter.js
index db3d4dde32..3334f1f00f 100644
--- a/src/modules/Modal/ModalFooter.js
+++ b/src/modules/Modal/ModalFooter.js
@@ -17,7 +17,6 @@ export default class ModalFooter extends Component {
 
   render() {
     const classes = classNames(
-      'sd-modal-footer',
       this.props.className,
       'actions'
     )
diff --git a/src/modules/Modal/ModalHeader.js b/src/modules/Modal/ModalHeader.js
index 064115ff79..3d040679e4 100644
--- a/src/modules/Modal/ModalHeader.js
+++ b/src/modules/Modal/ModalHeader.js
@@ -17,7 +17,6 @@ export default class ModalHeader extends Component {
 
   render() {
     const classes = classNames(
-      'sd-modal-header',
       this.props.className,
       'header'
     )
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 21823e78d2..fd2afcef47 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -86,7 +86,6 @@ export default class Progress extends Component {
   render() {
     const { children, className, onChange, onError, showProgress } = this.props
     const classes = classNames(
-      'sd-progress',
       'ui',
       className,
       'progress'
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index 3eda30ede2..4ee0844c27 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -35,9 +35,9 @@ export default class Item extends Component {
 
     const { className: imageClassName, ...imageProps } = _.get(image, 'props', {})
 
-    const classes = cx('sd-item', className, 'item')
-    const imageClasses = cx('sd-item-image ui', imageClassName, 'image')
-    const contentClasses = cx('sd-item-content', contentClassName, 'content')
+    const classes = cx(className, 'item')
+    const imageClasses = cx('ui', imageClassName, 'image')
+    const contentClasses = cx(contentClassName, 'content')
 
     const _description = children || description
 
diff --git a/src/views/Item/ItemItems.js b/src/views/Item/ItemItems.js
index f82a24c6c9..bdf0aced2d 100644
--- a/src/views/Item/ItemItems.js
+++ b/src/views/Item/ItemItems.js
@@ -4,7 +4,7 @@ import META from '../../utils/Meta'
 
 function ItemItems(props) {
   const { className, children, ...rest } = props
-  const classes = cx('sd-item-items ui', className, 'items')
+  const classes = cx('ui', className, 'items')
 
   return <div {...rest} className={classes}>{children}</div>
 }
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index ed186ffa13..600952e070 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -26,7 +26,6 @@ export default class Statistic extends Component {
 
   render() {
     const classes = classNames(
-      'sd-statistic',
       'ui',
       this.props.className,
       'statistic'
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index fec38d3769..c0c6dda1ca 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -18,7 +18,6 @@ export default class StatisticLabel extends Component {
 
   render() {
     const classes = classNames(
-      'sd-statistic-label',
       this.props.className,
       'label',
     )
diff --git a/src/views/Statistic/StatisticStatistics.js b/src/views/Statistic/StatisticStatistics.js
index e464d915c1..b2c29d6a75 100644
--- a/src/views/Statistic/StatisticStatistics.js
+++ b/src/views/Statistic/StatisticStatistics.js
@@ -17,7 +17,6 @@ export default class StatisticStatistics extends Component {
 
   render() {
     const classes = classNames(
-      'sd-statistic-statistics',
       'ui',
       this.props.className,
       'statistics'
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 13dc558161..3693a148cb 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -19,7 +19,6 @@ export default class StatisticValue extends Component {
 
   render() {
     const classes = classNames(
-      'sd-statistic-value',
       this.props.className,
       'value',
     )
diff --git a/test/specs/addons/Confirm-test.js b/test/specs/addons/Confirm-test.js
index b00bd669ed..4ca0715a54 100644
--- a/test/specs/addons/Confirm-test.js
+++ b/test/specs/addons/Confirm-test.js
@@ -21,7 +21,7 @@ describe('Confirm', () => {
       .show()
       .then(isConfirmed => isConfirmed.should.equal(true))
     confirm
-      .find('.sd-confirm-button')
+      .findWhere(c => c.text() === 'Yes')
       .simulate('click')
   })
   it('should return false on abort', () => {
@@ -31,7 +31,7 @@ describe('Confirm', () => {
       .show()
       .then(isConfirmed => isConfirmed.should.equal(false))
     confirm
-      .find('.sd-abort-button')
+      .findWhere(c => c.text() === 'Cancel')
       .simulate('click')
   })
 })
diff --git a/test/specs/addons/Select/Select-test.js b/test/specs/addons/Select/Select-test.js
index 21779877da..b7fd51e73e 100644
--- a/test/specs/addons/Select/Select-test.js
+++ b/test/specs/addons/Select/Select-test.js
@@ -14,6 +14,6 @@ describe('Select', () => {
   it('renders a selection Dropdown', () => {
     shallow(<Select {...requiredProps} />)
       .first()
-      .should.contain(<Dropdown {...requiredProps} className='sd-select' selection />)
+      .should.contain(<Dropdown {...requiredProps} selection />)
   })
 })
diff --git a/test/specs/collections/Menu/MenuItem-test.js b/test/specs/collections/Menu/MenuItem-test.js
index bcef68ab27..fac7f41e2a 100644
--- a/test/specs/collections/Menu/MenuItem-test.js
+++ b/test/specs/collections/Menu/MenuItem-test.js
@@ -70,12 +70,12 @@ describe('MenuItem', () => {
   describe('label', () => {
     it('should not have a label by default', () => {
       shallow(<MenuItem name='item' />)
-        .should.not.have.className('sd-menu-label')
+        .should.not.have.descendants('Label')
     })
     it('should render a label if prop given', () => {
-      shallow(<MenuItem name='item' label='37' />)
-        .find('.sd-menu-label')
-        .should.have.text('37')
+      mount(<MenuItem name='item' label='37' />)
+        .should.have.descendants('Label')
+        .and.contain.text('37')
     })
   })
 })
diff --git a/test/specs/collections/Message/Message-test.js b/test/specs/collections/Message/Message-test.js
index 945b10942a..fd8ee07144 100644
--- a/test/specs/collections/Message/Message-test.js
+++ b/test/specs/collections/Message/Message-test.js
@@ -12,16 +12,17 @@ describe('Message', () => {
   describe('with header', () => {
     it('has a header', () => {
       const header = faker.hacker.phrase()
-      const message = shallow(<Message header={header} />)
+      const message = mount(<Message header={header} />)
 
-      message.should.have.descendants('.sd-message-header')
-      message.should.contain.text(header)
+      message
+        .should.have.descendants('Header')
+        .and.contain.text(header)
     })
   })
   describe('without header', () => {
     it('has no header', () => {
       shallow(<Message />)
-        .should.not.have.descendants('.sd-message-header')
+        .should.not.have.descendants('Header')
     })
   })
   describe('with icon', () => {
@@ -31,7 +32,7 @@ describe('Message', () => {
     })
     it('has a "content" wrapper', () => {
       shallow(<Message icon='inbox' />)
-        .should.have.descendants('.sd-message-content')
+        .should.have.descendants('.content')
     })
   })
   describe('without icon', () => {
@@ -41,13 +42,13 @@ describe('Message', () => {
     })
     it('has no "content" wrapper', () => {
       shallow(<Message />)
-        .should.not.have.descendants('.sd-message-content')
+        .should.not.have.descendants('.content')
     })
   })
   describe('dismissable', () => {
     it('adds a close icon', () => {
-      shallow(<Message dismissable />)
-        .should.have.descendants('.sd-message-close-icon')
+      mount(<Message dismissable />)
+        .should.have.descendants('.close.icon')
     })
 
     it('calls transition "fade" when dismissed', () => {
@@ -57,9 +58,8 @@ describe('Message', () => {
       instance.messageElm.transition
         .should.not.have.been.called()
 
-
       wrapper
-        .find('.sd-message-close-icon')
+        .find('.close.icon')
         .simulate('click')
 
       instance.messageElm.transition
@@ -69,7 +69,7 @@ describe('Message', () => {
   describe('not dismissable', () => {
     it('has no close icon', () => {
       shallow(<Message />)
-        .should.not.have.descendants('.sd-message-close-icon')
+        .should.not.have.descendants('.close.icon')
     })
   })
 })
diff --git a/test/specs/collections/Table/Table-test.js b/test/specs/collections/Table/Table-test.js
index f673f0083c..f78019e821 100644
--- a/test/specs/collections/Table/Table-test.js
+++ b/test/specs/collections/Table/Table-test.js
@@ -62,16 +62,17 @@ describe('Table', () => {
       it('is called with the rowItem and index onClick', () => {
         const spy = sandbox.spy()
         const rowItem = { name: 'bob' }
-        const row = shallow(
+        shallow(
           <Table className='selectable' onSelectRow={spy} data={[rowItem]}>
             <Table.Column dataKey='name' />
           </Table>
         )
-          .find('.sd-table-row')
+          .find('tbody')
+          .find('tr')
           .first()
+          .simulate('click')
 
-        spy.should.have.not.been.called()
-        row.simulate('click')
+        spy.should.have.been.calledOnce()
         spy.should.have.been.calledWith(rowItem, 0)
       })
     })
@@ -84,7 +85,7 @@ describe('Table', () => {
           <Table.Column dataKey='firstName' />
         </Table>
       )
-        .find('.sd-table-header')
+        .find('th')
         .should.contain.text('First Name')
     })
 
@@ -94,7 +95,7 @@ describe('Table', () => {
           <Table.Column dataKey={randomDataKey} headerRenderer={() => 'YO!'} />
         </Table>
       )
-        .find('.sd-table-header')
+        .find('th')
         .should.contain.text('YO!')
     })
   })
@@ -106,7 +107,7 @@ describe('Table', () => {
           <Table.Column dataKey={randomDataKey} />
         </Table>
       )
-        .find('.sd-table-cell')
+        .find('td')
         .forEach((tableCell, i) => {
           const originalItem = tableData[i][randomDataKey]
           const originalValue = Table.getSafeCellContents(originalItem)
@@ -120,7 +121,7 @@ describe('Table', () => {
           <Table.Column dataKey={randomDataKey} cellRenderer={() => 'REDACTED'} />
         </Table>
       )
-        .find('.sd-table-cell')
+        .find('td')
         .forEach((tableCell) => {
           tableCell.should.contain.text('REDACTED')
         })
@@ -133,7 +134,7 @@ describe('Table', () => {
           <Table.Column dataKey='permissions' />
         </Table>
       )
-        .find('.sd-table-cell')
+        .find('td')
         .forEach((tableCell) => {
           const text = tableCell.text()
           text.should.be.a('string')
@@ -149,7 +150,7 @@ describe('Table', () => {
           <Table.Column dataKey={randomDataKey} />
         </Table>
       )
-        .find('.sd-table-cell')
+        .find('td')
         .forEach((tableCell, i) => {
           // remove this table's column from the current data object
           // then expect this cell's value to not be found in the object
@@ -172,7 +173,8 @@ describe('Table', () => {
           <Table.Column dataKey='row' />
         </Table>
       )
-        .find('.sd-table-row')
+        .find('tbody')
+        .find('tr')
     })
 
     it('applies class "active" only to the clicked row', () => {
@@ -209,8 +211,8 @@ describe('Table', () => {
       )
 
       const table = wrapper.instance()
-      const headers = wrapper.find('.sd-table-header')
-      const rows = wrapper.find('.sd-table-row')
+      const headers = wrapper.find('th')
+      const rows = wrapper.find('tbody').find('tr')
 
       // select a row
       rows
diff --git a/test/specs/commonTests.js b/test/specs/commonTests.js
index 0599a850de..dd11c3f69b 100644
--- a/test/specs/commonTests.js
+++ b/test/specs/commonTests.js
@@ -25,11 +25,6 @@ const componentInfo = componentCtx.keys().map(key => {
   const subComponentName = _.has(_meta, 'parent') && _.has(_meta, 'name')
     ? _meta.name.replace(_meta.parent, '')
     : null
-  // HeaderH1 => sd-header-h1
-  const sdClass = `sd-${constructorName
-    .replace('_', '')                 // remove underscore
-    .replace(/(?!^)([A-Z])/g, '-$1')  // prefix capitals with hyphen
-    .toLowerCase()}`                  // lowercase
 
   const componentClassName = (subComponentName || constructorName).toLowerCase()
 
@@ -37,7 +32,6 @@ const componentInfo = componentCtx.keys().map(key => {
     _meta,
     Component,
     constructorName,
-    sdClass,
     componentClassName,
     subComponentName,
     filePath,
@@ -68,7 +62,6 @@ export const isConformant = (Component, requiredProps = {}) => {
     constructorName,
     componentClassName,
     filenameWithoutExt,
-    sdClass,
     subComponentName,
   } = _.find(componentInfo, i => i.constructorName === Component.prototype.constructor.name)
 
@@ -239,9 +232,19 @@ export const isConformant = (Component, requiredProps = {}) => {
   // Handles className
   // ----------------------------------------
   describe('className (common)', () => {
-    it(`has the Stardust className "${sdClass}"`, () => {
-      render(<Component {...requiredProps} />)
-        .should.have.className(sdClass)
+    it('does not have an sd-* className', () => {
+      const wrapper = shallow(<Component {...requiredProps} />)
+      const className = wrapper.prop('className')
+      const children = wrapper.children()
+
+      // component itself
+      if (className) className.should.not.contain('sd-')
+
+      // children
+      children.forEach(c => {
+        const childClassName = c.prop('className')
+        if (childClassName) childClassName.should.not.contain('sd-')
+      })
     })
 
     if (META.isSemanticUI(Component)) {
diff --git a/test/specs/elements/Label/Label-test.js b/test/specs/elements/Label/Label-test.js
index c5f0aad94d..8b5a399182 100644
--- a/test/specs/elements/Label/Label-test.js
+++ b/test/specs/elements/Label/Label-test.js
@@ -166,7 +166,6 @@ describe('Label Component', () => {
 
       // mount to get click event to propagate on click
       mount(<Label {...props} />)
-        .find('.sd-label')
         .simulate('click')
 
       props.onClick.should.have.been.calledOnce()
diff --git a/test/specs/elements/Segment/Segment-test.js b/test/specs/elements/Segment/Segment-test.js
index 804cc61de6..082f117580 100644
--- a/test/specs/elements/Segment/Segment-test.js
+++ b/test/specs/elements/Segment/Segment-test.js
@@ -13,15 +13,15 @@ describe('Segment', () => {
 
   describe('heading', () => {
     it('is not present by default', () => {
-      shallow(<Segment />)
-        .should.not.have.descendants('.sd-segment-heading')
+      mount(<Segment />)
+        .should.not.have.descendants('.header')
     })
 
     it('adds a heading', () => {
       const heading = faker.hacker.phrase()
-      const wrapper = shallow(<Segment heading={heading} />)
+      const wrapper = mount(<Segment heading={heading} />)
       wrapper
-        .should.have.descendants('.sd-segment-heading')
+        .should.have.descendants('.header')
       wrapper
         .should.contain.text(heading)
     })