diff --git a/apps/fabric-examples/src/pages/ButtonPage/examples/Button.Default.Example.tsx b/apps/fabric-examples/src/pages/ButtonPage/examples/Button.Default.Example.tsx
index aeb206527378d6..b234c1beaa0bc9 100644
--- a/apps/fabric-examples/src/pages/ButtonPage/examples/Button.Default.Example.tsx
+++ b/apps/fabric-examples/src/pages/ButtonPage/examples/Button.Default.Example.tsx
@@ -14,7 +14,7 @@ export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
             disabled={ disabled }
             icon='Add'
             description='I am a description'
-            label='Create account'
+            text='Create account'
           />
         </div>
       </div>
diff --git a/apps/fabric-examples/src/pages/ButtonPage/examples/Button.Primary.Example.tsx b/apps/fabric-examples/src/pages/ButtonPage/examples/Button.Primary.Example.tsx
index 7b020bfafef205..72cdadddb66c76 100644
--- a/apps/fabric-examples/src/pages/ButtonPage/examples/Button.Primary.Example.tsx
+++ b/apps/fabric-examples/src/pages/ButtonPage/examples/Button.Primary.Example.tsx
@@ -16,8 +16,9 @@ export class ButtonPrimaryExample extends React.Component<IButtonProps, {}> {
         <PrimaryButton
           data-automation-id='test'
           disabled={ disabled }
-        >Create account</PrimaryButton>
+          text='Create account'
+        />
       </div>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/apps/fabric-examples/src/pages/DropdownPage/examples/Dropdown.Basic.Example.tsx b/apps/fabric-examples/src/pages/DropdownPage/examples/Dropdown.Basic.Example.tsx
index 84f99951bb9c6d..ff9cbaf515fba7 100644
--- a/apps/fabric-examples/src/pages/DropdownPage/examples/Dropdown.Basic.Example.tsx
+++ b/apps/fabric-examples/src/pages/DropdownPage/examples/Dropdown.Basic.Example.tsx
@@ -20,7 +20,6 @@ export class DropdownBasicExample extends React.Component<any, any> {
           label='Basic uncontrolled example:'
           id='Basicdrop1'
           ariaLabel='Basic dropdown example'
-          onChanged={ (item) => this.setState({ selectedItem: item }) }
           options={
             [
               { key: 'A', text: 'Option a' },
diff --git a/apps/fabric-examples/src/pages/PickersPage/examples/Picker.CustomResult.Example.tsx b/apps/fabric-examples/src/pages/PickersPage/examples/Picker.CustomResult.Example.tsx
index 15317f7b275afb..8a3726581e3bdc 100644
--- a/apps/fabric-examples/src/pages/PickersPage/examples/Picker.CustomResult.Example.tsx
+++ b/apps/fabric-examples/src/pages/PickersPage/examples/Picker.CustomResult.Example.tsx
@@ -18,7 +18,7 @@ import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
 import {
   IBasePickerProps,
-  BasePicker,
+  BasePickerListBelow,
   BaseAutoFill,
   IPickerItemProps
 } from 'office-ui-fabric-react/lib/Pickers';
@@ -338,42 +338,5 @@ export class PickerCustomResultExample extends React.Component<any, IPeoplePicke
   }
 }
 
-export class DocumentPicker extends BasePicker<IFullDocumentCardProps, IDocumentPickerProps> {
-  public render() {
-    let { suggestedDisplayValue } = this.state;
-
-    return (
-      <div>
-        <div ref={ this._resolveRef('root') } className='ms-BasePicker' onKeyDown={ this.onKeyDown }>
-          <SelectionZone selection={ this.selection }>
-            <div className='ms-BasePicker-text'>
-              <BaseAutoFill
-                { ...this.props.inputProps }
-                className='ms-BasePicker-input'
-                ref={ this._resolveRef('input') }
-                onFocus={ this.onInputFocus }
-                onInputValueChange={ this.onInputChange }
-                suggestedDisplayValue={ suggestedDisplayValue }
-                aria-activedescendant={ 'sug-' + this.suggestionStore.currentIndex }
-                aria-owns='suggestion-list'
-                aria-expanded='true'
-                aria-haspopup='true'
-                autoCapitalize='off'
-                autoComplete='off'
-                role='combobox'
-              />
-            </div>
-          </SelectionZone>
-        </div>
-        <FocusZone ref={ this._resolveRef('focusZone') }>
-          { this.renderItems() }
-        </FocusZone>
-        { this.renderSuggestions() }
-      </div>
-    );
-  }
-
-  protected _onBackspace(ev: React.KeyboardEvent<HTMLElement>) {
-    // override the existing backspace method to not do anything because the list items appear below.
-  }
+export class DocumentPicker extends BasePickerListBelow<IFullDocumentCardProps, IDocumentPickerProps> {
 }
\ No newline at end of file
diff --git a/apps/fabric-website/index.html b/apps/fabric-website/index.html
index e15f6214315a0b..55d3f6ea3550f1 100644
--- a/apps/fabric-website/index.html
+++ b/apps/fabric-website/index.html
@@ -37,6 +37,7 @@
 
   <script type="text/javascript">
     var isProduction = false;
+    var today = new Date();
     var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
     switch (true) {
       case location.hostname === 'dev.office.com':
diff --git a/common/changes/791_CommandBarHCShift_2017-03-01-22-42.json b/common/changes/791_CommandBarHCShift_2017-03-01-22-42.json
new file mode 100644
index 00000000000000..474bab8d72845a
--- /dev/null
+++ b/common/changes/791_CommandBarHCShift_2017-03-01-22-42.json
@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "adds pseudo:after class to highContrastBorder mixin, renders border on hover",
+      "type": "patch"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "v-algemb@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/791_CommandBarHCShift_2017-03-02-18-40.json b/common/changes/791_CommandBarHCShift_2017-03-02-18-40.json
new file mode 100644
index 00000000000000..f8348f9694358e
--- /dev/null
+++ b/common/changes/791_CommandBarHCShift_2017-03-02-18-40.json
@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "CommandBar: Improves accessibility by making borders visible in high contrast mode",
+      "type": "patch"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "v-algemb@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/component-css-breadcrumb_2017-02-18-23-01.json b/common/changes/component-css-breadcrumb_2017-02-18-23-01.json
new file mode 100644
index 00000000000000..a2322f04c66b4e
--- /dev/null
+++ b/common/changes/component-css-breadcrumb_2017-02-18-23-01.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Breadcrumb: styles moved to css modules to allow Breadcrumbs to live side by side other versions without classname conflicts. This should change no styling rules (no rules were modified) or impact existing customizations (no class names were removed.)",
+      "type": "patch"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/component-css-button_2017-02-18-02-10.json b/common/changes/component-css-button_2017-02-18-02-10.json
new file mode 100644
index 00000000000000..1f0b78be6946af
--- /dev/null
+++ b/common/changes/component-css-button_2017-02-18-02-10.json
@@ -0,0 +1,15 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Button variants: the styles are now scoped within css modules. All class names that were previously on buttons still remain unchanged, but the styles have moved into a type safe hashed class name. This allows 2 different versions of any Button variant to live on the same page without having rules collide. The style rules for the variants were also tweaked. Content is now aligned using flexbox, which means more consistent centering when injecting inline, inline-block, or block elements. Second, all line-heights were removed and content now correctly centers within buttons, so if you change the height of the container (e.g. you make CommandButtons render in 36px instead of 40px) things will center correctly.",
+      "type": "minor"
+    },
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Link: the styles are now scoped within css modules. All class names that were previously on buttons still remain unchanged, but the styles have moved into a type safe hashed class name.",
+      "type": "minor"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/component-css-calendar_2017-02-19-00-36.json b/common/changes/component-css-calendar_2017-02-19-00-36.json
new file mode 100644
index 00000000000000..64993f28bb961e
--- /dev/null
+++ b/common/changes/component-css-calendar_2017-02-19-00-36.json
@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Calendar and PeoplePicker: styles moved to css modules to allow instances of Calendar and PeoplePicker to live on the same page containing newer/older versions without classname conflicts. This should change no styling rules (no rules were modified) or impact existing customizations (no class names were removed.",
+      "type": "patch"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/component-details-list_2017-02-20-18-22.json b/common/changes/component-details-list_2017-02-20-18-22.json
new file mode 100644
index 00000000000000..c44304596c27f4
--- /dev/null
+++ b/common/changes/component-details-list_2017-02-20-18-22.json
@@ -0,0 +1,15 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList and GroupedList: styles moved to css modules to allow components to live side by side other versions without class name conflicts. This should change no styling rules (no rules were modified) or impact existing customizations (no existing class names were removed.)",
+      "type": "patch"
+    },
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList: header sizing now works correctly in Safari. Resizing also now correctly captures mouse movement and soaks events during the resize.)",
+      "type": "patch"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/contextual-menu-item-styles_2017-03-03-22-07.json b/common/changes/contextual-menu-item-styles_2017-03-03-22-07.json
new file mode 100644
index 00000000000000..f03dc71ee7ee92
--- /dev/null
+++ b/common/changes/contextual-menu-item-styles_2017-03-03-22-07.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Contextual Menu: allow developers to specify inline styles for menu items",
+      "type": "minor"
+    }
+  ],
+  "email": "miclo@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/css-modules.json b/common/changes/css-modules.json
new file mode 100644
index 00000000000000..f1f9846b462c43
--- /dev/null
+++ b/common/changes/css-modules.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "IMPORTANT: \n\nThis pull request converts ALL components over to use module css. What does this mean?\n\n* All classnames, such as ms-Button, will now be obfuscated to be unique.\n* Pages that host multiple versions of the same component will not stomp on each other and will be safe.\n* All existing class names are left intact, so current customizations should not break.\n\nGoing forward, we will adhere to using local scoped module rules specifically to avoid breaking ourselves when multiple versions. Additionally we are evaluating a much more robust and contractual way of defining our styles.\n\nProblems that still exist:\n\n1. You must rely on class names to customize, and if those class names change, your customizations are broken.\n2. Specificity of our rules is an implicit contract that is easy to break. It is often unclear and partners usually give up early fighting the specificity war and use `!important` to stomp on it, which is not ideal. If a partner does use \"more specific\" rules today, tomorrow they many not be specific enough.\n3. RTL rules in particular are very specific. When something that was once not RTL specific is changed to RTL, it becomes implicitly more specific, and thus breaks specificity contract.\n4. The bundles themselves have a lot of duplicate css. Because we generate rtl rules and theme tokens at build time rather than at runtime, we must download extra code, which bulks up the download size.\n5. Fabric core rules, which we implicitly rely on, are a hard thing to chase. If your page depends on core 6, and you're also using react components, you will find bugs. We'd like to eliminate this dependency so that it is reliable and contractual to use components. If you use a `ContextualMenu`, it should animate without depending on fabric-core css to be loaded.\n\nWe are planning to address these and evaluating library options. Issue being tracked here: #983 \n",
+      "type": "major"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/luh-module-css-people-picker-items_2017-02-22-03-05.json b/common/changes/luh-module-css-people-picker-items_2017-02-22-03-05.json
new file mode 100644
index 00000000000000..a838e0d3004737
--- /dev/null
+++ b/common/changes/luh-module-css-people-picker-items_2017-02-22-03-05.json
@@ -0,0 +1,8 @@
+{
+  "changes": [{
+    "packageName": "office-ui-fabric-react",
+    "comment": "Update People Picker with module css.",
+    "type": "patch"
+  }],
+  "email": "luh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/master_2017-02-22-02-05.json b/common/changes/master_2017-02-22-02-05.json
new file mode 100644
index 00000000000000..04557a2dd108eb
--- /dev/null
+++ b/common/changes/master_2017-02-22-02-05.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "pivot css module",
+      "type": "minor"
+    }
+  ],
+  "email": "xingwa@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/pickers-css-modularize_2017-02-22-01-33.json b/common/changes/pickers-css-modularize_2017-02-22-01-33.json
new file mode 100644
index 00000000000000..57a6d037e9966e
--- /dev/null
+++ b/common/changes/pickers-css-modularize_2017-02-22-01-33.json
@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Pickers: css modularized all the components",
+      "type": "minor"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "joschect@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/temp_modules/rush-example-app-base/package.json b/common/temp_modules/rush-example-app-base/package.json
index 7605fd5909ec35..9a97b7194b6b14 100644
--- a/common/temp_modules/rush-example-app-base/package.json
+++ b/common/temp_modules/rush-example-app-base/package.json
@@ -29,4 +29,4 @@
   "rushDependencies": {
     "office-ui-fabric-react": ">=1.14.1 <2.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/common/temp_modules/rush-fabric-examples/package.json b/common/temp_modules/rush-fabric-examples/package.json
index 3db69ffb285c7d..07da5efae48e1d 100644
--- a/common/temp_modules/rush-fabric-examples/package.json
+++ b/common/temp_modules/rush-fabric-examples/package.json
@@ -43,4 +43,4 @@
     "office-ui-fabric-react": ">=1.14.1 <2.0.0",
     "@uifabric/utilities": ">=1.1.0 <2.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/common/temp_modules/rush-fabric-website/package.json b/common/temp_modules/rush-fabric-website/package.json
index f62dd449d2aa42..a4adc34ec75a1d 100644
--- a/common/temp_modules/rush-fabric-website/package.json
+++ b/common/temp_modules/rush-fabric-website/package.json
@@ -42,4 +42,4 @@
     "office-ui-fabric-react": "^1.14.1",
     "@uifabric/utilities": ">=1.1.0 <2.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/common/temp_modules/rush-ssr-tests/package.json b/common/temp_modules/rush-ssr-tests/package.json
index 4ff40ec4f7f97d..87c11e95266fde 100644
--- a/common/temp_modules/rush-ssr-tests/package.json
+++ b/common/temp_modules/rush-ssr-tests/package.json
@@ -14,4 +14,4 @@
     "fabric-examples": ">=1.0.0 <2.0.0",
     "office-ui-fabric-react": ">=1.14.1 <2.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/common/temp_modules/rush-todo-app/package.json b/common/temp_modules/rush-todo-app/package.json
index 96b003820f78e7..11cf094ec3b113 100644
--- a/common/temp_modules/rush-todo-app/package.json
+++ b/common/temp_modules/rush-todo-app/package.json
@@ -24,4 +24,4 @@
   "rushDependencies": {
     "office-ui-fabric-react": ">=1.14.1 <2.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/gulpfile.js b/packages/office-ui-fabric-react/gulpfile.js
index 9099a698655a2e..1333d8ca6a40ea 100644
--- a/packages/office-ui-fabric-react/gulpfile.js
+++ b/packages/office-ui-fabric-react/gulpfile.js
@@ -22,6 +22,9 @@ build.typescript.setConfig({ typescript: require('typescript') });
 // Use css modules.
 build.sass.setConfig({ useCSSModules: true });
 
+// Use Karma Tests - Disable during develoment if prefered
+build.karma.isEnabled = () => true;
+
 // Disable unnecessary subtasks.
 build.preCopy.isEnabled = () => false;
 build.postCopy.isEnabled = () => isProduction;
@@ -62,4 +65,4 @@ build.task('tslint', build.tslint);
 build.task('ts', build.typescript);
 
 // initialize tasks.
-build.initialize(gulp);
+build.initialize(gulp);
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json
index c4ad5dfa64ef38..460af29effe97c 100644
--- a/packages/office-ui-fabric-react/package.json
+++ b/packages/office-ui-fabric-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "1.14.3",
+  "version": "2.0.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
diff --git a/packages/office-ui-fabric-react/results/Button not pressed_0.diff.png b/packages/office-ui-fabric-react/results/Button not pressed_0.diff.png
new file mode 100644
index 00000000000000..35ec2867d36a1b
Binary files /dev/null and b/packages/office-ui-fabric-react/results/Button not pressed_0.diff.png differ
diff --git a/packages/office-ui-fabric-react/results/Button not pressed_0.png b/packages/office-ui-fabric-react/results/Button not pressed_0.png
new file mode 100644
index 00000000000000..35ec2867d36a1b
Binary files /dev/null and b/packages/office-ui-fabric-react/results/Button not pressed_0.png differ
diff --git a/packages/office-ui-fabric-react/results/Button pressed_1.diff.png b/packages/office-ui-fabric-react/results/Button pressed_1.diff.png
new file mode 100644
index 00000000000000..aaba4af9cecea2
Binary files /dev/null and b/packages/office-ui-fabric-react/results/Button pressed_1.diff.png differ
diff --git a/packages/office-ui-fabric-react/results/Button pressed_1.png b/packages/office-ui-fabric-react/results/Button pressed_1.png
new file mode 100644
index 00000000000000..aaba4af9cecea2
Binary files /dev/null and b/packages/office-ui-fabric-react/results/Button pressed_1.png differ
diff --git a/packages/office-ui-fabric-react/src/common/_focusBorder.scss b/packages/office-ui-fabric-react/src/common/_focusBorder.scss
index fc7508dc5dd559..a05e1cdf39b28e 100644
--- a/packages/office-ui-fabric-react/src/common/_focusBorder.scss
+++ b/packages/office-ui-fabric-react/src/common/_focusBorder.scss
@@ -14,7 +14,7 @@
     position: relative;
   }
 
-  :global .ms-Fabric.is-focusVisible &:focus:after {
+  :global(.ms-Fabric.is-focusVisible) &:focus:after {
     // Wrap the parent element with $padding pixels.
     content: '';
     position: absolute;
@@ -33,7 +33,7 @@
 
 // When focus is set using the keyboard, apply an outline.
 @mixin focus-outline {
-  :global .ms-Fabric.is-focusVisible &:focus {
+  :global(.ms-Fabric.is-focusVisible) &:focus {
     outline: 1px solid $focusedBorderColor;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss
index 355b007ee69921..f0a5039f19f4be 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss
@@ -14,134 +14,134 @@ $Breadcrumb-itemMaxWidth: 160px;
 $Breadcrumb-itemMaxWidth-sm: 116px;
 $Breadcrumb-chevron-sm: 8px;
 
-:global {
-
-  .ms-Breadcrumb {
-    @include ms-baseFont;
-    margin: 23px 0 1px;
-  }
-
-  .ms-Breadcrumb-list {
-    white-space: nowrap;
-    padding: 0;
-    margin: 0;
-  }
-
-  .ms-Breadcrumb-chevron {
-    font-size: $ms-font-size-s;
-    color: $ms-color-neutralSecondary;
-    vertical-align: top;
-    margin: 11px 0px;
-    line-height: 1;
-  }
+.root {
+  @include ms-baseFont;
+  margin: 23px 0 1px;
+}
 
-  .ms-Breadcrumb-listItem {
-    list-style-type: none;
-    vertical-align: top;
-    margin: 0;
-    padding: 0;
-    display: inline-block;
-    position: relative;
+.list {
+  white-space: nowrap;
+  padding: 0;
+  margin: 0;
+}
 
-    &:last-of-type {
-      .ms-Breadcrumb-chevron {
-        display: none;
-      }
-    }
+.chevron {
+  font-size: $ms-font-size-s;
+  color: $ms-color-neutralSecondary;
+  vertical-align: top;
+  margin: 11px 0px;
+  line-height: 1;
+}
 
-    .ms-Breadcrumb-item,
-    .ms-Breadcrumb-itemLink {
-      @include ms-font-xl;
-      color: $ms-color-neutralPrimary;
-      display: inline-block;
-      padding: 0 8px;
-      max-width: $Breadcrumb-itemMaxWidth;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      vertical-align: top;
+.listItem {
+  list-style-type: none;
+  vertical-align: top;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  position: relative;
+
+  &:last-of-type {
+    .chevron {
+      display: none;
     }
   }
 
-  .ms-Breadcrumb-overflow {
+  .item,
+  .itemLink {
+    @include ms-font-xl;
+    color: $ms-color-neutralPrimary;
     display: inline-block;
-    position: relative;
+    padding: 0 8px;
+    max-width: $Breadcrumb-itemMaxWidth;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    vertical-align: top;
   }
+}
 
-  .ms-Breadcrumb-overflowButton {
-    font-size: $Breadcrumb-overflowButtonSize;
-    display: inline-block;
-    color: $Breadcrumb-overflowButtonColor;
-    padding: 9px 8px;
+.overflow {
+  display: inline-block;
+  position: relative;
+}
+
+.overflowButton {
+  font-size: $Breadcrumb-overflowButtonSize;
+  display: inline-block;
+  color: $Breadcrumb-overflowButtonColor;
+  padding: 9px 8px;
+  cursor: pointer;
+  vertical-align: top;
+  line-height: 1;
+  &:hover {
     cursor: pointer;
-    vertical-align: top;
-    line-height: 1;
+    background-color: $ms-color-neutralLighter;
   }
+}
 
-  .ms-Breadcrumb-item {
-    &:hover {
-      cursor: default;
-    }
+.item {
+  &:hover {
+    cursor: default;
   }
+}
 
-  .ms-Link.ms-Breadcrumb-itemLink {
-    &:hover {
-      background-color: $selectedHoverBackgroundColor;
-      color: initial;
-      cursor: pointer;
-    }
-
-    &:focus {
-      color: $ms-color-neutralDark;
-    }
+.root .itemLink {
+  &:hover {
+    background-color: $selectedHoverBackgroundColor;
+    color: initial;
+    cursor: pointer;
+  }
 
-    &:active {
-      outline: transparent;
-      background-color: $selectedActiveBackgroundColor;
-      color: $selectedActiveForegroundColor;
-    }
+  &:focus {
+    color: $ms-color-neutralDark;
   }
 
-  .ms-Breadcrumb-itemLink,
-  .ms-Breadcrumb-overflowButton {
-    text-decoration: none;
+  &:active {
     outline: transparent;
+    background-color: $selectedActiveBackgroundColor;
+    color: $selectedActiveForegroundColor;
   }
+}
 
-  @media screen and (max-width: $ms-screen-md-max) {
-    margin: 11px 0 1px;
+.itemLink,
+.overflowButton {
+  text-decoration: none;
+  outline: transparent;
+}
 
-    .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
-      font-size: $ms-font-size-l;
-    }
+@media screen and (max-width: $ms-screen-md-max) {
+  // margin: 11px 0 1px;
 
-    .ms-Breadcrumb-chevron {
-      font-size: $ms-font-size-mi;
-      margin: 8px 0;
-    }
+  .listItem .itemLink {
+    font-size: $ms-font-size-l;
+  }
 
-    .ms-Breadcrumb-overflowButton {
-      font-size: $ms-font-size-m-plus;
-      padding: 6px 8px;
-      line-height: 1;
-    }
+  .chevron {
+    font-size: $ms-font-size-mi;
+    margin: 8px 0;
   }
 
-  @media screen and (max-width: $ms-screen-sm-max) {
-    .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
-      font-size: $ms-font-size-m;
-      max-width: $Breadcrumb-itemMaxWidth-sm;
-    }
+  .overflowButton {
+    font-size: $ms-font-size-m-plus;
+    padding: 6px 8px;
+    line-height: 1;
+  }
+}
 
-    .ms-Breadcrumb-chevron {
-      font-size: $Breadcrumb-chevron-sm;
-      margin: 5px 4px;
-      margin: 7px 0;
-    }
+@media screen and (max-width: $ms-screen-sm-max) {
+  .listItem .itemLink {
+    font-size: $ms-font-size-m;
+    max-width: $Breadcrumb-itemMaxWidth-sm;
+  }
 
-    .ms-Breadcrumb-overflowButton {
-      padding: 4px 6px;
-    }
+  .chevron {
+    font-size: $Breadcrumb-chevron-sm;
+    margin: 7px 0;
   }
 
+  .overflowButton {
+    padding: 4px 6px;
+  }
 }
+
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
index f2ee2971b09c80..6ce5ef6beffb48 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -11,7 +11,7 @@ import { ContextualMenu } from '../../ContextualMenu';
 import { Link } from '../../Link';
 import { IBreadcrumbProps, IBreadcrumbItem } from './Breadcrumb.Props';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import './Breadcrumb.scss';
+import styles from './Breadcrumb.scss';
 
 export interface IBreadcrumbState {
   isOverflowOpen: boolean;
@@ -69,25 +69,25 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
     let overflowMenuId = this._id + '-overflow';
 
     return (
-      <div className={ css('ms-Breadcrumb', className) } ref='renderingArea'>
+      <div className={ css('ms-Breadcrumb', className, styles.root) } ref='renderingArea'>
         <FocusZone direction={ FocusZoneDirection.horizontal }>
-          <ul className='ms-Breadcrumb-list'>
+          <ul className={ css('ms-Breadcrumb-list', styles.list) }>
             { renderedOverflowItems && renderedOverflowItems.length ? (
-              <li className='ms-Breadcrumb-overflow' key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
-                <div className='ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More'
+              <li className={ css('ms-Breadcrumb-overflow', styles.overflow) } key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
+                <div className={ css('ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More', styles.overflowButton) }
                   onClick={ this._onOverflowClicked }
                   data-is-focusable={ true }
                   role='button'
                   aria-haspopup='true'
                   aria-owns={ isOverflowOpen ? overflowMenuId : null } />
-                <i className={ css('ms-Breadcrumb-chevron ms-Icon', getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }></i>
+                <i className={ css('ms-Breadcrumb-chevron ms-Icon', styles.chevron, getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }></i>
               </li>
             ) : (null) }
             { renderedItems.map(
               (item, index) => (
-                <li className='ms-Breadcrumb-listItem' key={ item.key || String(index) } ref={ item.key || String(index) }>
+                <li className={ css('ms-Breadcrumb-listItem', styles.listItem) } key={ item.key || String(index) } ref={ item.key || String(index) }>
                   { this._renderItem(item) }
-                  <i className={ css('ms-Breadcrumb-chevron ms-Icon', getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }></i>
+                  <i className={ css('ms-Breadcrumb-chevron ms-Icon', styles.chevron, getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }></i>
                 </li>
               )) }
           </ul>
@@ -116,7 +116,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
     if (item.onClick || item.href) {
       return (
         <Link
-          className='ms-Breadcrumb-itemLink'
+          className={ css('ms-Breadcrumb-itemLink', styles.itemLink) }
           href={ item.href }
           onClick={ this._onBreadcrumbClicked.bind(this, item) }>
           { item.text }
@@ -124,7 +124,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
       );
     } else {
       return (
-        <span className='ms-Breadcrumb-item'>
+        <span className={ css('ms-Breadcrumb-item', styles.item) }>
           { item.text }
         </span>
       );
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.scss b/packages/office-ui-fabric-react/src/components/Button/BaseButton.scss
new file mode 100644
index 00000000000000..b9908efc7d288c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.scss
@@ -0,0 +1,11 @@
+.flexContainer {
+  display: flex;
+  height: 100%;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.root {
+  outline: transparent;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 59b509b3b56497..69f62c75243962 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -9,19 +9,28 @@ import {
   anchorProperties
 } from '../../Utilities';
 import { IButtonProps, IButton } from './Button.Props';
+import styles from './BaseButton.scss';
+
+export interface IBaseButtonClassNames {
+  base: string;
+  variant: string;
+  isDisabled: string;
+  isEnabled: string;
+  description?: string;
+  flexContainer?: string;
+  icon?: string;
+  label?: string;
+  root?: string;
+}
 
 export class BaseButton extends BaseComponent<IButtonProps, {}> implements IButton {
 
-  /**
-   * _baseClassName can be overridden by subclasses to provide a unique class prefix to the class name used for
-   * sub parts of the render template.
-   */
-  protected _baseClassName = 'ms-Button';
-
-  /**
-   * _variantClassName can be overridden by subclasses to add an extra default class name to the root element.
-   */
-  protected _variantClassName = '';
+  protected classNames: IBaseButtonClassNames = {
+    base: 'ms-Button',
+    variant: '',
+    isEnabled: '',
+    isDisabled: ''
+  };
 
   private _buttonElement: HTMLButtonElement;
   private _labelId: string;
@@ -36,7 +45,7 @@ export class BaseButton extends BaseComponent<IButtonProps, {}> implements IButt
   }
 
   public render(): JSX.Element {
-    const { className, description, ariaLabel, ariaDescription, href, disabled } = this.props;
+    const { description, ariaLabel, ariaDescription, href, disabled } = this.props;
     const { _ariaDescriptionId, _labelId, _descriptionId } = this;
     const renderAsAnchor: boolean = !!href;
     const tag = renderAsAnchor ? 'a' : 'button';
@@ -65,15 +74,22 @@ export class BaseButton extends BaseComponent<IButtonProps, {}> implements IButt
       nativeProps,
       {
         className: css(
-          className,
-          this._baseClassName,
-          this._variantClassName,
-          { 'disabled': disabled }
-        ),
+          styles.root,
+          this.props.className,
+          this.classNames.base,
+          this.classNames.variant,
+          this.classNames.root,
+          {
+            'disabled': disabled,
+            [this.classNames.isDisabled]: disabled,
+            [this.classNames.isEnabled]: !disabled
+          }),
         ref: this._resolveRef('_buttonElement'),
+        'disabled': disabled,
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabel ? null : _labelId,
-        'aria-describedby': ariaDescribedBy
+        'aria-describedby': ariaDescribedBy,
+        'aria-disabled': disabled
       }
     );
 
@@ -86,23 +102,24 @@ export class BaseButton extends BaseComponent<IButtonProps, {}> implements IButt
     }
   }
 
-  protected onRenderContent(tag, buttonProps): JSX.Element {
+  protected onRenderContent(tag: any, buttonProps: IButtonProps): JSX.Element {
     return React.createElement(
       tag,
       buttonProps,
-      this.onRenderIcon(),
-      this.onRenderLabel(),
-      this.onRenderDescription(),
-      this.onRenderAriaDescription(),
-      this.onRenderChildren()
-    );
+      React.createElement('div', { className: css(this.classNames.base + '-flexContainer', styles.flexContainer, this.classNames.flexContainer) },
+        this.onRenderIcon(),
+        this.onRenderLabel(),
+        this.onRenderDescription(),
+        this.onRenderAriaDescription(),
+        this.onRenderChildren()
+      ));
   }
 
   protected onRenderIcon() {
     let { icon } = this.props;
 
     return icon ? (
-      <span className={ `${this._baseClassName}-icon` }>
+      <span className={ css(`${this.classNames.base}-icon`, this.classNames.icon) }>
         <i className={ `ms-Icon ms-Icon--${icon}` } />
       </span>
     ) : (
@@ -111,27 +128,26 @@ export class BaseButton extends BaseComponent<IButtonProps, {}> implements IButt
   }
 
   protected onRenderLabel() {
-    let { children, label } = this.props;
+    let { children, text } = this.props;
 
-    // For backwards compat, we should continue to take in the label content from children.
-    if (label === undefined && typeof (children) === 'string') {
-      label = children;
+    // For backwards compat, we should continue to take in the text content from children.
+    if (text === undefined && typeof (children) === 'string') {
+      text = children;
     }
 
-    return label ? (
-      <span className={ `${this._baseClassName}-label` } id={ this._labelId } >
-        { label }
+    return text && (
+      <span className={ css(`${this.classNames.base}-label`, this.classNames.label) } id={ this._labelId } >
+        { text }
       </span>
-    ) : (null);
+    );
   }
 
   protected onRenderChildren() {
-    let { children, label } = this.props;
+    let { children } = this.props;
 
-    // There is no label and the label will be rendered, we don't want the label to appear twice.
-    // If there is a label and the children are of type string it was likely intentional and both
-    // should render.
-    if (label === undefined && typeof (children) === 'string') {
+    // If children is just a string, either it or the text will be rendered via onRenderLabel
+    // If children is another component, it will be rendered after text
+    if (typeof (children) === 'string') {
       return null;
     }
 
@@ -144,7 +160,12 @@ export class BaseButton extends BaseComponent<IButtonProps, {}> implements IButt
     // ms-Button-description is only shown when the button type is compound.
     // In other cases it will not be displayed.
     return description ? (
-      <span className={ `${this._baseClassName}-description` } id={ this._descriptionId }>{ description }</span>
+      <span
+        className={ css(`${this.classNames.base}-description`, this.classNames.description) }
+        id={ this._descriptionId }
+      >
+        { description }
+      </span>
     ) : (
         null
       );
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts b/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts
index bde6f44f5e380b..41920e046790db 100644
--- a/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts
@@ -38,6 +38,11 @@ export interface IButtonProps extends React.HTMLProps<HTMLButtonElement | HTMLAn
    */
   ariaDescription?: string;
 
+  /**
+  * Text to render button label. If text is supplied, it will override any string in button children. Other children components will be passed through after the text.
+  */
+  text?: string;
+
   /**
    * The button icon shown in command or hero type.
    * Deprecated at v1.2.3, to be removed at >= v2.0.0. Use IconButton instead.
diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCore.scss b/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCore.scss
index f0c4ac04566438..4f87801ffe74f1 100644
--- a/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCore.scss
+++ b/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCore.scss
@@ -8,101 +8,50 @@
 @import '../../../common/common';
 @import './ButtonCoreVars';
 
-:global {
-
-  .ms-Button {
-    @include focus-border();
-    @include ms-font-m;
-    user-select: none;
-
-    border-width: 0;
-    text-decoration: none;
-    text-align: center;
-    cursor: pointer;
-    display: inline-block;
-    padding: $button-core-default-padding;
-
-    @media screen and (-ms-high-contrast: active) {
-      color: $ms-color-contrastBlackSelected;
-      border-color: $ms-color-contrastBlackSelected;
-    }
-
-    @media screen and (-ms-high-contrast: black-on-white) {
-      color: $ms-color-contrastWhiteSelected;
-      border-color: $ms-color-contrastWhiteSelected;
-    }
+@mixin button-core-root-styles {
+  @include focus-border();
+  @include ms-font-m;
+
+  user-select: none;
+  border-width: 0;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  padding: $button-core-default-padding;
+
+  @media screen and (-ms-high-contrast: active) {
+    color: $ms-color-contrastBlackSelected;
+    border-color: $ms-color-contrastBlackSelected;
   }
 
-  .ms-Button-icon {
-    margin: 0 4px;
-    width: 16px;
-    vertical-align: top;
-    display: inline-block;
+  @media screen and (-ms-high-contrast: black-on-white) {
+    color: $ms-color-contrastWhiteSelected;
+    border-color: $ms-color-contrastWhiteSelected;
   }
-
-  .ms-Button-label {
-    margin: 0 4px;
-    vertical-align: top;
-    display: inline-block;
-  }
-
-  // TODO: Remove Hero Styles once fully deprecated
-
-  //== Modifier: Hero button
-  //
-  .ms-Button--hero {
-    background-color: transparent;
-    border: 0;
-    height: auto;
-
-    .ms-Button-icon {
-      color: $ms-color-themePrimary;
-      display: inline-block;
-      @include margin-right(8px);
-      padding-top: 5px;
-      font-size: $ms-icon-size-l;
-      line-height: 1; // FireFox vertical offset
-    }
-
-    .ms-Button-label {
-      color: $ms-color-themePrimary;
-      font-size: $ms-font-size-xl;
-      font-weight: $ms-font-weight-light;
-      vertical-align: top;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: transparent;
-
-      .ms-Button-icon {
-        color: $ms-color-themeDark;
-      }
-
-      .ms-Button-label {
-        color: $ms-color-themeDarker;
-      }
-    }
-
-    &:active {
-      .ms-Button-icon {
-        color: $ms-color-themePrimary;
-      }
-
-      .ms-Button-label {
-        color: $ms-color-themePrimary;
-      }
-    }
-
-    &:disabled,
-    &.is-disabled {
-      .ms-Button-icon {
-        color: $ms-color-neutralTertiaryAlt;
-      }
-
-      .ms-Button-label {
-        color: $ms-color-neutralTertiary;
-      }
-    }
+}
+
+@mixin button-core-icon-styles {
+  margin: 0 4px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+@mixin button-core-label-styles {
+  margin: 0 4px;
+  line-height: 100%;
+}
+
+@mixin button-core-disabled {
+  background-color: $ms-color-neutralLighter;
+  color: $ms-color-neutralTertiary;
+  cursor: default;
+  pointer-events: none;
+
+  &:hover,
+  &:focus {
+    outline: 0;
   }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCoreVars.scss b/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCoreVars.scss
index d362fea239a295..e53c1f61ee2f9c 100644
--- a/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCoreVars.scss
+++ b/packages/office-ui-fabric-react/src/components/Button/ButtonCore/ButtonCoreVars.scss
@@ -2,15 +2,3 @@ $button-core-default-height: 32px;
 $button-core-default-minWidth: 80px;
 $button-core-default-padding: 0 16px;
 
-@mixin core-button-disabled {
-  background-color: $ms-color-neutralLighter;
-  border-color: $ms-color-neutralLighter;
-  cursor: default;
-  pointer-events: none;
-  color: $ms-color-neutralTertiary;
-
-  &:hover,
-  &:focus {
-    outline: 0;
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.scss b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.scss
index 9eb6b31484ebf0..b63a5304121802 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.scss
+++ b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.scss
@@ -1,5 +1,3 @@
-@import '../../../common/common';
-
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 
 //
@@ -7,65 +5,50 @@
 // --------------------------------------------------
 // Command Button styles
 
-$button-commandButtonHeight: 40px;
+@import '../../../common/common';
+@import '../ButtonCore/ButtonCore';
+@import '../ButtonCore/ButtonCoreVars';
 
-:global {
-  
-  .ms-Button.ms-Button--command {
-    @include text-align(left);
+$button-commandButtonHeight: 40px;
 
-    background-color: transparent;
-    border: none;
-    padding: 0 4px;
+.root {
+  @include button-core-root-styles;
 
-    .ms-Button-label,
-    .ms-Button-icon {
-      height: $button-commandButtonHeight;
-      line-height: $button-commandButtonHeight;
-    }
+  background-color: transparent;
+  padding: 0 4px;
+  height: $button-commandButtonHeight;
+  color: $ms-color-neutralPrimary;
+}
 
-    .ms-Button-label {
-      @include ms-font-m;
-      font-weight: $ms-font-weight-regular;
-      color: $ms-color-neutralPrimary;
-    }
+.flexContainer {
+  justify-content: flex-start;
+}
 
-    .ms-Button-icon {
-      vertical-align: top;
-      color: $ms-color-themePrimary;
-      display: inline-block;
-      font-size: $ms-icon-size-m;
-      position: relative;
-    }
+.label {
+  @include button-core-label-styles;
+}
 
-    &:hover,
-    &:focus {
-      background-color: transparent;
+.icon {
+  @include button-core-icon-styles;
+}
 
-      &,
-      .ms-Button-icon,
-      .ms-Button-label {
-        color: $ms-color-themeDarker;
-      }
-    }
+.isEnabled {
 
-    &:active {
-      &,
-      .ms-Button-icon,
-      .ms-Button-label {
-        color: $ms-color-themePrimary;
-      }
-    }
+  &:hover {
+    color: $ms-color-themeDarker;
+  }
 
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
+  &:active {
+    color: $ms-color-themePrimary;
+  }
 
-      .ms-Button-icon,
-      .ms-Button-label {
-        color: $ms-color-neutralTertiaryAlt;
-      }
-    }
+  .icon {
+    color: $ms-color-themePrimary;
   }
+}
 
+.isDisabled {
+  @include button-core-disabled;
+  background-color: transparent;
 }
+
diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx
index 3c842cd5eeeab8..b313147ed92c09 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx
@@ -1,11 +1,17 @@
 import { BaseButton } from '../BaseButton';
-import './CommandButton.scss';
-import '../ButtonCore/ButtonCore.scss';
+import styles from './CommandButton.scss';
 
 export class CommandButton extends BaseButton {
-  protected _variantClassName = 'ms-Button--command';
+  protected classNames = {
+    base: 'ms-Button',
+    variant: 'ms-Button--command',
+    icon: styles.icon,
+    isDisabled: styles.isDisabled,
+    isEnabled: styles.isEnabled,
+    label: styles.label,
+    root: styles.root,
+    flexContainer: styles.flexContainer
+  };
 
-  protected onRenderDescription() {
-    return null;
-  }
+  protected onRenderDescription() { return null; }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.scss b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.scss
index a6613ce798f4bb..6862673e958190 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.scss
+++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.scss
@@ -1,5 +1,3 @@
-@import '../../../common/common';
-
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 
 //
@@ -7,73 +5,75 @@
 // --------------------------------------------------
 // Compound Button styles
 
-:global {
-  .ms-Button.ms-Button--compound {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
+@import '../../../common/common';
+@import '../ButtonCore/ButtonCore';
+@import '../ButtonCore/ButtonCoreVars';
 
-    width: 100%;
-    max-width: 280px;
-    min-height: 72px;
+.root {
+  @include button-core-root-styles;
 
-    padding: 16px 20px;
-    background: $ms-color-neutralLighter;
+  padding: 16px 20px;
+  background-color: $ms-color-neutralLighter;
+  color: $ms-color-neutralSecondary;
 
-    @include text-align(left);
+  min-width: $button-core-default-minWidth;
+  max-width: 280px;
 
-    .ms-Button-label {
-      @include ms-font-m;
-      display: block;
-      font-weight: $ms-font-weight-semibold;
-      color: $ms-color-black;
-      margin: 0 0 2px;
-    }
+  min-height: 72px;
+}
 
-    .ms-Button-description {
-      @include ms-font-s;
-      color: $ms-color-neutralSecondary;
-      display: block;
-    }
+.flexContainer {
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
 
-    &:hover {
-      background-color: $ms-color-neutralLight;
-      border-color: $ms-color-neutralLight;
+  @include text-align(left);
 
-      .ms-Button-description {
-        color: $ms-color-neutralDark;
-      }
-    }
+  min-width: 100%;
+  height: auto;
+}
 
-    &:focus {
-      border-color: $ms-color-themePrimary;
-      background-color: $ms-color-neutralLighter;
 
-      .ms-Button-label {
-        color: $ms-color-neutralPrimary;
-      }
+.label {
+  @include button-core-label-styles;
 
-      .ms-Button-description {
-        color: $ms-color-neutralSecondary;
-      }
-    }
+  font-weight: $ms-font-weight-semibold;
+  color: $ms-color-black;
+  margin: 0 0 5px;
+}
 
-    &:active {
-      background-color: $ms-color-themePrimary;
+.description {
+  @include ms-font-s;
+  color: $ms-color-neutralSecondary;
+  line-height: 100%;
+}
 
-      .ms-Button-description,
-      .ms-Button-label {
-        color: $ms-color-white;
-      }
+.isEnabled {
+
+  &:hover {
+    background-color: $ms-color-neutralLight;
+
+    .description {
+      color: $ms-color-neutralDark;
     }
+  }
+
+  &:active {
+    background-color: $ms-color-themePrimary;
+    color: $ms-color-white;
 
-    &:disabled,
-    &.disabled {
-      .ms-Button-label,
-      .ms-Button-description {
-        color: $ms-color-neutralTertiary;
-      }
+    .label,
+    .description {
+      color: inherit;
     }
   }
-}
\ No newline at end of file
+}
+
+.isDisabled {
+  @include button-core-disabled;
+
+  .label,
+  .description {
+    color: inherit;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx
index b256e67991aad9..5a785ab4dbdec8 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx
@@ -1,11 +1,16 @@
 import { BaseButton } from '../BaseButton';
-import './CompoundButton.scss';
-import '../ButtonCore/ButtonCore.scss';
+import styles from './CompoundButton.scss';
 
 export class CompoundButton extends BaseButton {
-  protected _variantClassName = 'ms-Button--compound';
-
-  protected onRenderIcon() {
-    return null;
-  }
+  protected classNames = {
+    base: 'ms-Button',
+    variant: 'ms-Button--compound',
+    description: styles.description,
+    flexContainer: styles.flexContainer,
+    icon: null,
+    isDisabled: styles.isDisabled,
+    isEnabled: styles.isEnabled,
+    label: styles.label,
+    root: styles.root
+  };
 }
diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.scss b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.scss
index 299631c582f838..fae899fe93cb5f 100644
--- a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.scss
+++ b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.scss
@@ -1,63 +1,48 @@
-@import '../../../common/common';
-@import '../ButtonCore/ButtonCoreVars';
-
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
 //
 // Office UI Fabric
 // --------------------------------------------------
 // Default Button styles
 
-:global {
-  .ms-Button.ms-Button--default {
-    background-color: $ms-color-neutralLighter;
-    border: 1px solid $ms-color-neutralLighter;
-    min-width: $button-core-default-minWidth;
-    color: $ms-color-neutralPrimary;
-
-    .ms-Button-label,
-    .ms-Button-icon {
-      height: $button-core-default-height;
-      line-height: $button-core-default-height;
-    }
-
-    &:hover {
-      background-color: $ms-color-neutralLight;
-      border-color: $ms-color-neutralLight;
-      color: $ms-color-black;
-    }
-
-    &:focus {
-      background-color: $ms-color-neutralLight;
-      border-color: $ms-color-neutralLighter;
-      outline: 1px solid transparent;
-      color: $ms-color-black;
-
-    }
-
-    &:active {
-      background-color: $ms-color-themePrimary;
-      border-color: $ms-color-themePrimary;
-      color: $ms-color-white;
-    }
-
-    .ms-Button-label {
-      font-weight: $ms-font-weight-semibold;
-      font-size: $ms-font-size-m;
-    }
-
-    &:disabled, &.disabled {
-      @include core-button-disabled;
-    }
-  }
+@import '../../../common/common';
+@import '../ButtonCore/ButtonCore';
+@import '../ButtonCore/ButtonCoreVars';
+
+.root {
+  @include button-core-root-styles;
+
+  background-color: $ms-color-neutralLighter;
+  color: $ms-color-neutralPrimary;
 
-  .ms-Fabric.is-focusVisible .ms-Button {
-    &:focus {
-      color: $ms-color-black;
+  min-width: $button-core-default-minWidth;
+  height: $button-core-default-height;
+
+  font-weight: $ms-font-weight-semibold;
+  font-size: $ms-font-size-m;
+}
 
-      &:before {
-        border-color: $ms-color-themePrimary;
-      }
-    }
+.label {
+  @include button-core-label-styles;
+}
+
+.icon {
+  @include button-core-icon-styles;
+}
+
+.isEnabled {
+
+  &:hover {
+    background-color: $ms-color-neutralLight;
+    color: $ms-color-black;
+  }
+
+  &:active {
+    background-color: $ms-color-themePrimary;
+    color: $ms-color-white;
   }
 }
+
+.isDisabled {
+  @include button-core-disabled;
+}
+
diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx
index 817057d6ac3b27..7106d51ad265b0 100644
--- a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx
@@ -1,11 +1,16 @@
 import { BaseButton } from '../BaseButton';
-import './DefaultButton.scss';
-import '../ButtonCore/ButtonCore.scss';
+import styles from './DefaultButton.scss';
 
 export class DefaultButton extends BaseButton {
-  protected _variantClassName = 'ms-Button--default';
+  protected classNames = {
+    base: 'ms-Button',
+    variant: 'ms-Button--default',
+    icon: styles.icon,
+    isDisabled: styles.isDisabled,
+    isEnabled: styles.isEnabled,
+    label: styles.label,
+    root: styles.root
+  };
 
-  protected onRenderDescription() {
-    return null;
-  }
+  protected onRenderDescription() { return null; }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.scss b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.scss
index d13f7ffcd746fa..41cbd7027e3feb 100644
--- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.scss
+++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.scss
@@ -1,50 +1,53 @@
-@import '../../../common/common';
-@import '../ButtonCore/ButtonCoreVars';
-
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
 //
 // Office UI Fabric
 // --------------------------------------------------
 // Icon Button styles
 
-:global {
-
-  .ms-Button.ms-Button--icon {
-    @include focus-border(0px);
-    background-color: transparent;
-    color: $ms-color-neutralSecondary;
-    padding: 0 4px;
-    font-size: $ms-icon-size-m;
-
-    .ms-Button-label,
-    .ms-Button-icon {
-      height: $button-core-default-height;
-      line-height: $button-core-default-height;
-    }
-
-    &:hover,
-    &:active {
-      background-color: transparent;
-      color: $ms-color-neutralPrimary;
-    }
-
-    &:focus {
-      background-color: transparent;
-    }
-
-    &.disabled,
-    &:disabled {
-      color: $ms-color-neutralTertiaryAlt;
-      background-color: transparent;
-    }
-
-    @media screen and (-ms-high-contrast: active) {
-      color: $ms-color-yellowLight;
-    }
-
-    @media screen and (-ms-high-contrast: black-on-white) {
-      color: $ms-color-blueMid;
-    }
+@import '../../../common/common';
+@import '../ButtonCore/ButtonCore';
+@import '../ButtonCore/ButtonCoreVars';
+
+$button-iconButtonSize: $button-core-default-height;
+
+.root {
+  @include button-core-root-styles;
+
+  background-color: transparent;
+  padding: 0 4px;
+
+  width: $button-iconButtonSize;
+  height: $button-iconButtonSize;
+
+  color: $ms-color-neutralSecondary;
+  font-size: $ms-icon-size-m;
+}
+
+.icon {
+  @include button-core-icon-styles;
+}
+
+.isEnabled {
+
+  &:hover {
+    color: $ms-color-themeDarker;
   }
 
+  &:active {
+    color: $ms-color-themePrimary;
+  }
+}
+
+.isDisabled {
+  @include button-core-disabled;
+  background-color: transparent;
+
+  @media screen and (-ms-high-contrast: active) {
+    color: $ms-color-yellowLight;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    color: $ms-color-blueMid;
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx
index 87ae1c8865e414..863cda4cb9873c 100644
--- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx
@@ -1,19 +1,16 @@
 import { BaseButton } from '../BaseButton';
-import './IconButton.scss';
-import '../ButtonCore/ButtonCore.scss';
+import styles from './IconButton.scss';
 
 export class IconButton extends BaseButton {
-  protected _variantClassName = 'ms-Button--icon';
+  protected classNames = {
+    base: 'ms-Button',
+    variant: 'ms-Button--icon',
+    icon: styles.icon,
+    isDisabled: styles.isDisabled,
+    isEnabled: styles.isEnabled,
+    root: styles.root
+  };
 
-  protected onRenderLabel() {
-    return null;
-  }
-
-  protected onRenderDescription() {
-    return null;
-  }
-
-  protected onRenderChildren() {
-    return null;
-  }
+  protected onRenderLabel() { return null; }
+  protected onRenderDescription() { return null; }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.scss b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.scss
index ff584ef208e9d0..0375248ec97ffb 100644
--- a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.scss
+++ b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.scss
@@ -1,61 +1,47 @@
-@import '../../../common/common';
-@import '../ButtonCore/ButtonCoreVars';
-
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
 //
 // Office UI Fabric
 // --------------------------------------------------
-// Primary Button styles
+// Default Button styles
 
-:global {
+@import '../../../common/common';
+@import '../ButtonCore/ButtonCore';
+@import '../ButtonCore/ButtonCoreVars';
 
-  .ms-Button.ms-Button--primary {
-    @include focus-border(1px, $ms-color-white);
+.root {
+  @include button-core-root-styles;
+  @include focus-border(1px, $ms-color-white);
 
-    min-width: $button-core-default-minWidth;
-    background-color: $ms-color-themePrimary;
-    border-color: $ms-color-themePrimary;
-    color: $ms-color-white;
+  background-color: $ms-color-themePrimary;
+  color: $ms-color-white;
 
-    .ms-Button-label,
-    .ms-Button-icon {
-      height: $button-core-default-height;
-      line-height: $button-core-default-height;
-    }
-
-    .ms-Button-label {
-      font-weight: $ms-font-weight-semibold;
-      font-size: $ms-font-size-m;
-    }
-
-    &:hover {
-      background-color: $ms-color-themeDark;
-      border-color: $ms-color-themeDark;
-    }
-
-    &:focus {
-      background-color: $ms-color-themeDark;
-      border-color: $ms-color-themePrimary;
-    }
-
-    &:active {
-      background-color: $ms-color-themePrimary;
-      border-color: $ms-color-themePrimary;
-    }
-
-    &:disabled, &.disabled {
-      @include core-button-disabled;
-    }
-  }
+  min-width: $button-core-default-minWidth;
+  height: $button-core-default-height;
 
-  .ms-Fabric.is-focusVisible .ms-Button--primary {
-    &:focus {
-      color: $ms-color-white;
+  font-weight: $ms-font-weight-semibold;
+  font-size: $ms-font-size-m;
+}
 
-      &:before {
-        border-color: $ms-color-themeLighter;
-      }
-    }
+.label {
+  @include button-core-label-styles;
+}
+
+.icon {
+  @include button-core-icon-styles;
+}
+
+.isEnabled {
+
+  &:hover {
+    background-color: $ms-color-themeDark;
+  }
+
+  &:active {
+    background-color: $ms-color-themePrimary;
+    color: $ms-color-white;
   }
 }
+
+.isDisabled {
+  @include button-core-disabled;
+}
diff --git a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx
index b42ae5d552728d..f49a7c894e019b 100644
--- a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx
@@ -1,11 +1,17 @@
 import { BaseButton } from '../BaseButton';
-import './PrimaryButton.scss';
-import '../ButtonCore/ButtonCore.scss';
+import styles from './PrimaryButton.scss';
 
 export class PrimaryButton extends BaseButton {
-  protected _variantClassName = 'ms-Button--primary';
+  protected classNames = {
+    base: 'ms-Button',
+    variant: 'ms-Button--primary',
+    icon: styles.icon,
+    isDisabled: styles.isDisabled,
+    isEnabled: styles.isEnabled,
+    label: styles.label,
+    root: styles.root
+  };
+
+  protected onRenderDescription() { return null; }
 
-  protected onRenderDescription() {
-    return null;
-  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
index c37d3ccec14b05..a506d64a0c11ff 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
@@ -9,524 +9,522 @@
 $Calendar-day:40px;
 $Calendar-dayPicker-margin: 10px;
 
-:global {
-  .ms-DatePicker {
-    @include ms-u-normalize;
-    margin-bottom: 17px;
-  }
-
-  // Base wrapper for the date picker.
-  .ms-DatePicker-picker {
-    color: $ms-color-black;
-    font-size: $ms-font-size-m;
-    position: relative;
-    @include text-align(left);
-  }
-
-  // The holder is the only "scrollable" top-level container element.
-  .ms-DatePicker-holder {
-    -webkit-overflow-scrolling: touch;
-    @include ms-u-borderBox;
-    background: $ms-color-white;
-    min-width: 300px;
-    display: none;
-  }
-
-
-  // When the picker opens, reveal the content.
-  .ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
-    @include ms-u-slideDownIn10;
-    @include ms-u-borderBox;
-    display: block;
-  }
-
-  // When a picker opens, always open it in front of other closed pickers
-  .ms-DatePicker-picker--opened {
-    position: relative;
-  }
-
-
-  // The frame and wrap work together to ensure that
-  // clicks within the picker don’t reach the holder.
-  .ms-DatePicker-frame {
-    padding: 1px;
+.root {
+  @include ms-u-normalize;
+  margin-bottom: 17px;
+}
+
+// Base wrapper for the date picker.
+.picker {
+  color: $ms-color-black;
+  font-size: $ms-font-size-m;
+  position: relative;
+  @include text-align(left);
+}
+
+// The holder is the only "scrollable" top-level container element.
+.holder {
+  -webkit-overflow-scrolling: touch;
+  @include ms-u-borderBox;
+  background: $ms-color-white;
+  min-width: 300px;
+  display: none;
+}
+
+
+// When the picker opens, reveal the content.
+.picker.pickerIsOpened .holder {
+  @include ms-u-slideDownIn10;
+  @include ms-u-borderBox;
+  display: block;
+}
+
+// When a picker opens, always open it in front of other closed pickers
+.pickerIsOpened {
+  position: relative;
+}
+
+
+// The frame and wrap work together to ensure that
+// clicks within the picker don’t reach the holder.
+.frame {
+  padding: 1px;
+}
+
+.wrap {
+  margin: -1px;
+  padding: 9px;
+}
+
+
+// Wrapper containing the calendar view to pick a specific date.
+.dayPicker {
+  display: block;
+  margin-bottom: 30px;
+}
+
+
+// The header containing the month and year.
+.header {
+  height: $Calendar-day;
+  line-height: 44px;
+}
+
+
+// The month and year labels.
+.month,
+.year {
+  display: inline-block;
+  @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
+  margin-top: -1px;
+
+  &:hover {
+    color: $ms-color-themeDark;
+    cursor: pointer;
   }
+}
 
-  .ms-DatePicker-wrap {
-    margin: -1px;
-    padding: 9px;
-  }
+.month {
+  @include margin-left(15px);
+}
 
+.year {
+  @include margin-left(15px);
+}
 
-  // Wrapper containing the calendar view to pick a specific date.
-  .ms-DatePicker-dayPicker {
-    display: block;
-    margin-bottom: 30px;
-  }
 
+// The calendar table of dates.
+.table {
+  text-align: center;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-size: inherit;
 
-  // The header containing the month and year.
-  .ms-DatePicker-header {
-    height: $Calendar-day;
-    line-height: 44px;
-  }
-
-
-  // The month and year labels.
-  .ms-DatePicker-month,
-  .ms-DatePicker-year {
-    display: inline-block;
-    @include ms-font-xl;
-    color: $ms-color-neutralPrimary;
-    margin-top: -1px;
+  td {
+    margin: 0;
+    padding: 0;
 
     &:hover {
-      color: $ms-color-themeDark;
-      cursor: pointer;
-    }
-  }
-
-  .ms-DatePicker-month {
-    @include margin-left(15px);
-  }
-
-  .ms-DatePicker-year {
-    @include margin-left(15px);
-  }
-
-
-  // The calendar table of dates.
-  .ms-DatePicker-table {
-    text-align: center;
-    border-collapse: collapse;
-    border-spacing: 0;
-    table-layout: fixed;
-    font-size: inherit;
-
-    td {
-      margin: 0;
-      padding: 0;
-
-      &:hover {
-        outline: 1px solid transparent;
-      }
+      outline: 1px solid transparent;
     }
   }
-
-
-  // The days on the calendar.
-  .ms-DatePicker-day, .ms-DatePicker-weekday {
-    width: $Calendar-day;
-    height: $Calendar-day;
-    padding: 0;
-    line-height: $Calendar-day;
-    @include ms-font-m-plus;
-    color: $ms-color-neutralPrimary;
+}
+
+
+// The days on the calendar.
+.day, .weekday {
+  width: $Calendar-day;
+  height: $Calendar-day;
+  padding: 0;
+  line-height: $Calendar-day;
+  @include ms-font-m-plus;
+  color: $ms-color-neutralPrimary;
+}
+
+
+// Today.
+.dayIsToday {
+  position: relative;
+  background-color: $ms-color-themeLight;
+}
+
+
+// Disabled day.
+.dayIsDisabled:before {
+  border-top-color: $ms-color-neutralTertiary;
+}
+
+
+// Out of focus days.
+.dayIsUnfocused {
+  color: $ms-color-neutralTertiary;
+  font-weight: $ms-font-weight-regular;
+}
+
+
+// Hovered date picker items.
+.dayIsFocused:hover,
+.dayIsUnfocused:hover {
+  cursor: pointer;
+  color: $ms-color-black;
+  background: $ms-color-neutralLight;
+}
+
+
+// Highlighted and hovered/focused dates.
+.dayIsHighlighted:hover,
+.pickerIsFocused .dayIsHighlighted {
+  cursor: pointer;
+  color: $ms-color-white;
+  background: $ms-color-themePrimary;
+}
+
+
+// Disabled and highlighted dates.
+.dayIsHighlighted.dayDisabled,
+.dayIsHighlighted.dayDisabled:hover {
+  background: $ms-color-neutralTertiary;
+}
+
+
+// Month and year pickers, hidden on small screens by default.
+.monthPicker,
+.yearPicker {
+  display: none;
+}
+
+
+// Month and year previous/next components.
+.monthComponents {
+  position: absolute;
+  top: 9px;
+  @include right(9px);
+  @include left(9px);
+}
+
+.yearComponents,
+.decadeComponents {
+  position: absolute;
+  @include right(10px);
+  top: -2px;
+}
+
+.prevMonth,
+.nextMonth,
+.prevYear,
+.nextYear,
+.prevDecade,
+.nextDecade {
+  width: $Calendar-day;
+  height: $Calendar-day;
+  display: block;
+  @include margin-left(10px);
+  text-align: center;
+  line-height: $Calendar-day;
+  text-align: center;
+  font-size: $ms-icon-size-m;
+  color: $ms-color-neutralSecondary;
+  position: relative;
+  top: 2px;
+
+  &:hover {
+    color: $ms-color-neutralDark;
+    cursor: pointer;
+    outline: 1px solid transparent;
+  }
+}
+
+// Without modifying the Pickadate JS, this transparent
+// button is necessary to toggle the month view.
+.headerToggleView {
+  height: $Calendar-day;
+  @include left(0px);
+  position: absolute;
+  top: 0px;
+  width: 140px;
+  cursor: pointer;
+}
+
+
+// Text showing the currently-selected year.
+.currentYear,
+.currentDecade {
+  display: block;
+  @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
+  height: $Calendar-day;
+  line-height: $Calendar-day;
+  @include margin-left(15px);
+}
+
+// The current year is blue and actionable.
+.currentYear {
+  color: $ms-color-themePrimary;
+
+  &:hover {
+    color: $ms-color-themeDark;
+    cursor: pointer;
   }
-
-
-  // Today.
-  .ms-DatePicker-day--today {
-    position: relative;
-    background-color: $ms-color-themeLight;
+}
+
+
+// A grid of month or year options, which pushes them over
+// five pixels for horizontal centering and moves them down.
+.optionGrid {
+  position: relative;
+  height: 210px;
+  width: 280px;
+  @include margin(10px, 0, 30px, 5px);
+}
+
+// Button to select a different month.
+.monthOption,
+.yearOption {
+  background-color: $ms-color-neutralLighter;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  cursor: pointer;
+  @include float(left);
+  @include margin(0, 10px, 10px, 0);
+  @include ms-font-s-plus;
+  color: $ms-color-neutralPrimary;
+  text-align: center;
+
+  &:hover {
+    background-color: $ms-color-neutralTertiaryAlt;
+    outline: 1px solid transparent;
+  }
+
+  &.isHighlighted {
+    background-color: $ms-color-neutralPrimary;
+    color: $ms-color-white;
   }
+}
 
 
-  // Disabled day.
-  .ms-DatePicker-day--disabled:before {
-    border-top-color: $ms-color-neutralTertiary;
-  }
-
+// Button to navigate to the current date.
+.goToday {
+  bottom: 9px;
+  color: $ms-color-themePrimary;
+  cursor: pointer;
+  @include ms-font-s-plus;
+  color: $ms-color-neutralPrimary;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  position: absolute;
+  @include right(9px);
 
-  // Out of focus days.
-  .ms-DatePicker-day--outfocus {
-    color: $ms-color-neutralTertiary;
-    font-weight: $ms-font-weight-regular;
+  &:hover {
+    outline: 1px solid transparent;
   }
+}
 
-
-  // Hovered date picker items.
-  .ms-DatePicker-day--infocus:hover,
-  .ms-DatePicker-day--outfocus:hover {
-    cursor: pointer;
-    color: $ms-color-black;
-    background: $ms-color-neutralLight;
+// State: The picker is showing the year components.
+.root.isPickingYears {
+  // Hide the day picking components.
+  .dayPicker,
+  .monthComponents {
+    display: none;
   }
-
-
-  // Highlighted and hovered/focused dates.
-  .ms-DatePicker-day--highlighted:hover,
-  .ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted {
-    cursor: pointer;
-    color: $ms-color-white;
-    background: $ms-color-themePrimary;
+  // Hide the month picking components.
+  .monthPicker {
+    display: none;
   }
-
-
-  // Disabled and highlighted dates.
-  .ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,
-  .ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover {
-    background: $ms-color-neutralTertiary;
+  // Show the year picking components.
+  .yearPicker {
+    display: block;
   }
+}
 
+// 460px and up.
+//
+// On screens that can fit it, we show the month picker next to the day picker if we have it enabled.
+@media (min-width: 460px) {
 
-  // Month and year pickers, hidden on small screens by default.
-  .ms-DatePicker-monthPicker,
-  .ms-DatePicker-yearPicker {
-    display: none;
-  }
-
+    $Calendar-day: 30px;
 
-  // Month and year previous/next components.
-  .ms-DatePicker-monthComponents {
-    position: absolute;
-    top: 9px;
-    @include right(9px);
-    @include left(9px);
-  }
+    // Update the spacing and text for the day and month pickers
 
-  .ms-DatePicker-yearComponents,
-  .ms-DatePicker-decadeComponents {
-    position: absolute;
-    @include right(10px);
-    top: -2px;
-  }
+    .header {
+      height: $Calendar-day;
+      line-height: $Calendar-day;
+    }
 
-  .ms-DatePicker-prevMonth,
-  .ms-DatePicker-nextMonth,
-  .ms-DatePicker-prevYear,
-  .ms-DatePicker-nextYear,
-  .ms-DatePicker-prevDecade,
-  .ms-DatePicker-nextDecade {
+  // Calendar day cells are smaller.
+  .day,
+  .weekday {
     width: $Calendar-day;
     height: $Calendar-day;
-    display: block;
-    @include margin-left(10px);
-    text-align: center;
-    line-height: $Calendar-day;
-    text-align: center;
-    font-size: $ms-icon-size-m;
-    color: $ms-color-neutralSecondary;
-    position: relative;
-    top: 2px;
-
-    &:hover {
-      color: $ms-color-neutralDark;
-      cursor: pointer;
-      outline: 1px solid transparent;
-    }
+    line-height: 28px;
+    font-weight: $ms-font-weight-semibold;
+    font-size: $ms-font-size-s;
   }
 
-  // Without modifying the Pickadate JS, this transparent
-  // button is necessary to toggle the month view.
-  .ms-DatePicker-headerToggleView {
-    height: $Calendar-day;
-    @include left(0px);
-    position: absolute;
-    top: 0px;
-    width: 140px;
-    cursor: pointer;
+  // Size the month components to the day picker's new width
+  .monthComponents {
+    width: 210px;
   }
 
-
-  // Text showing the currently-selected year.
-  .ms-DatePicker-currentYear,
-  .ms-DatePicker-currentDecade {
-    display: block;
-    @include ms-font-xl;
-    color: $ms-color-neutralPrimary;
-    height: $Calendar-day;
-    line-height: $Calendar-day;
-    @include margin-left(15px);
+  // Reduce the size of arrows to change month/year.
+  .prevMonth,
+  .nextMonth,
+  .prevYear,
+  .nextYear,
+  .prevDecade,
+  .nextDecade {
+    font-size: $ms-icon-size-s;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
   }
 
-  // The current year is blue and actionable.
-  .ms-DatePicker-currentYear {
-    color: $ms-color-themePrimary;
-
-    &:hover {
-      color: $ms-color-themeDark;
-      cursor: pointer;
-    }
+  .holder {
+    min-width: 240px;
   }
 
-
-  // A grid of month or year options, which pushes them over
-  // five pixels for horizontal centering and moves them down.
-  .ms-DatePicker-optionGrid {
-    position: relative;
-    height: 210px;
-    width: 280px;
-    @include margin(10px, 0, 30px, 5px);
+  // Update header text styles.
+  .month,
+  .year {
+    font-weight: $ms-font-weight-semilight;
   }
 
-  // Button to select a different month.
-  .ms-DatePicker-monthOption,
-  .ms-DatePicker-yearOption {
-    background-color: $ms-color-neutralLighter;
-    width: 60px;
-    height: 60px;
-    line-height: 60px;
-    cursor: pointer;
-    @include float(left);
-    @include margin(0, 10px, 10px, 0);
-    @include ms-font-s-plus;
+  .month,
+  .year {
+    font-size: 17px;
     color: $ms-color-neutralPrimary;
-    text-align: center;
 
     &:hover {
-      background-color: $ms-color-neutralTertiaryAlt;
-      outline: 1px solid transparent;
-    }
-
-    &.is-highlighted {
-      background-color: $ms-color-neutralPrimary;
-      color: $ms-color-white;
+      color: $ms-color-neutralPrimary;
+      cursor: default;
     }
   }
 
 
-  // Button to navigate to the current date.
-  .ms-DatePicker-goToday {
-    bottom: 9px;
-    color: $ms-color-themePrimary;
-    cursor: pointer;
-    @include ms-font-s-plus;
-    color: $ms-color-neutralPrimary;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px;
-    position: absolute;
-    @include right(9px);
-
-    &:hover {
-      outline: 1px solid transparent;
+  // Show the month picker, if enabled
+  .pickerIsMonthPickerVisible {
+    // Swap margin for padding so that the border extends the full height.
+    .dayPicker {
+      margin: -$Calendar-dayPicker-margin 0;
+      padding: $Calendar-dayPicker-margin 0;
     }
-  }
-
-  // State: The picker is showing the year components.
-  .ms-DatePicker.is-pickingYears {
-    // Hide the day picking components.
-    .ms-DatePicker-dayPicker,
-    .ms-DatePicker-monthComponents {
-      display: none;
+    // Contains the calendar view for picking a day.
+    .dayPicker {
+      @include ms-u-borderBox;
+      @include border-right(1px, solid, $ms-color-neutralLight);
+      width: 220px;
+      min-height: ( $Calendar-day * 8 ) - $Calendar-dayPicker-margin;
     }
-    // Hide the month picking components.
-    .ms-DatePicker-monthPicker {
-      display: none;
+
+
+    .holder {
+      width: 440px;
     }
-    // Show the year picking components.
-    .ms-DatePicker-yearPicker {
+    // Show the month picker.
+    .monthPicker {
       display: block;
     }
-  }
-
-  // 460px and up.
-  //
-  // On screens that can fit it, we show the month picker next to the day picker if we have it enabled.
-  @media (min-width: 460px) {
-
-      $Calendar-day: 30px;
-
-      // Update the spacing and text for the day and month pickers
-
-      .ms-DatePicker-header {
-        height: $Calendar-day;
-        line-height: $Calendar-day;
-      }
-
-    // Calendar day cells are smaller.
-    .ms-DatePicker-day,
-    .ms-DatePicker-weekday {
-      width: $Calendar-day;
-      height: $Calendar-day;
-      line-height: 28px;
-      font-weight: $ms-font-weight-semibold;
-      font-size: $ms-font-size-s;
+    // Style the the month and year pickers.
+    .monthPicker,
+    .yearPicker {
+      top: 9px;
+      @include left(238px);
+      position: absolute;
     }
-
-    // Size the month components to the day picker's new width
-    .ms-DatePicker-monthComponents {
-      width: 210px;
+    // Size and position of the month and year labels.
+    .month {
+      @include margin-left(12px);
     }
 
-    // Reduce the size of arrows to change month/year.
-    .ms-DatePicker-prevMonth,
-    .ms-DatePicker-nextMonth,
-    .ms-DatePicker-prevYear,
-    .ms-DatePicker-nextYear,
-    .ms-DatePicker-prevDecade,
-    .ms-DatePicker-nextDecade {
-      font-size: $ms-icon-size-s;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
-    }
 
-    .ms-DatePicker-holder {
-      min-width: 240px;
+    .optionGrid {
+      width: 200px;
+      height: auto;
+      @include margin(10px, 0, 0, 0);
     }
-
-    // Update header text styles.
-    .ms-DatePicker-month,
-    .ms-DatePicker-year {
-      font-weight: $ms-font-weight-semilight;
+    // This component is only used on small displays.
+    .toggleMonthView {
+      display: none;
     }
-
-    .ms-DatePicker-month,
-    .ms-DatePicker-year {
+    // Position the current year and decade labels.
+    .currentYear,
+    .currentDecade {
       font-size: 17px;
-      color: $ms-color-neutralPrimary;
+      margin: 0;
+      height: $Calendar-day;
+      line-height: 26px;
+      padding: 0 10px;
+      display: inline-block;
+    }
+    // Reduce the size of the month buttons.
+    .monthOption,
+    .yearOption {
+      width: 40px;
+      height: 40px;
+      line-height: 38px;
+      font-size: 12px;
+      @include margin(0, 10px, 10px, 0);
 
       &:hover {
-        color: $ms-color-neutralPrimary;
-        cursor: default;
+        outline: 1px solid transparent;
       }
     }
-
-
-    // Show the month picker, if enabled
-    .is-monthPickerVisible {
-      // Swap margin for padding so that the border extends the full height.
-      .ms-DatePicker-dayPicker {
-        margin: -$Calendar-dayPicker-margin 0;
-        padding: $Calendar-dayPicker-margin 0;
-      }
-      // Contains the calendar view for picking a day.
-      .ms-DatePicker-dayPicker {
-        @include ms-u-borderBox;
-        @include border-right(1px, solid, $ms-color-neutralLight);
-        width: 220px;
-        min-height: ( $Calendar-day * 8 ) - $Calendar-dayPicker-margin;
-      }
-
-
-      .ms-DatePicker-holder {
-        width: 440px;
-      }
-      // Show the month picker.
-      .ms-DatePicker-monthPicker {
+    // Position the "Go to today" button below the month picker.
+    .goToday {
+      @include ms-u-borderBox;
+      font-size: 12px;
+      height: $Calendar-day;
+      line-height: $Calendar-day;
+      padding: 0 10px;
+      @include right(10px);
+      @include text-align(right);
+      top: 199px;
+      width: 210px;
+    }
+    // State: The picker is showing the year components.
+    // On larger screens the calendar will remain and the years
+    // will replace the months.
+    .root.isPickingYears {
+      // On large screens, we need to keep the day picker
+      // and month components in view.
+      .dayPicker,
+      .monthComponents {
         display: block;
       }
-      // Style the the month and year pickers.
-      .ms-DatePicker-monthPicker,
-      .ms-DatePicker-yearPicker {
-        top: 9px;
-        @include left(238px);
-        position: absolute;
-      }
-      // Size and position of the month and year labels.
-      .ms-DatePicker-month {
-        @include margin-left(12px);
-      }
-
-
-      .ms-DatePicker-optionGrid {
-        width: 200px;
-        height: auto;
-        @include margin(10px, 0, 0, 0);
-      }
-      // This component is only used on small displays.
-      .ms-DatePicker-toggleMonthView {
+      // Hide the month picking components.
+      .monthPicker {
         display: none;
       }
-      // Position the current year and decade labels.
-      .ms-DatePicker-currentYear,
-      .ms-DatePicker-currentDecade {
-        font-size: 17px;
-        margin: 0;
-        height: $Calendar-day;
-        line-height: 26px;
-        padding: 0 10px;
-        display: inline-block;
-      }
-      // Reduce the size of the month buttons.
-      .ms-DatePicker-monthOption,
-      .ms-DatePicker-yearOption {
-        width: 40px;
-        height: 40px;
-        line-height: 38px;
-        font-size: 12px;
-        @include margin(0, 10px, 10px, 0);
-
-        &:hover {
-          outline: 1px solid transparent;
-        }
-      }
-      // Position the "Go to today" button below the month picker.
-      .ms-DatePicker-goToday {
-        @include ms-u-borderBox;
-        font-size: 12px;
-        height: $Calendar-day;
-        line-height: $Calendar-day;
-        padding: 0 10px;
-        @include right(10px);
-        @include text-align(right);
-        top: 199px;
-        width: 210px;
-      }
-      // State: The picker is showing the year components.
-      // On larger screens the calendar will remain and the years
-      // will replace the months.
-      .ms-DatePicker.is-pickingYears {
-        // On large screens, we need to keep the day picker
-        // and month components in view.
-        .ms-DatePicker-dayPicker,
-        .ms-DatePicker-monthComponents {
-          display: block;
-        }
-        // Hide the month picking components.
-        .ms-DatePicker-monthPicker {
-          display: none;
-        }
-        // Show the year picking components.
-        .ms-DatePicker-yearPicker {
-          display: block;
-        }
+      // Show the year picking components.
+      .yearPicker {
+        display: block;
       }
     }
   }
+}
 
-  // On smaller screens the month button toggles to the picking months state.
-  @media (max-width: 459px) {
+// On smaller screens the month button toggles to the picking months state.
+@media (max-width: 459px) {
 
-    // State: The picker is showing the month components.
-    .ms-DatePicker.is-pickingMonths {
+  // State: The picker is showing the month components.
+  .root.isPickingMonths {
 
-      // Hide the day picking components.
-      .ms-DatePicker-dayPicker,
-      .ms-DatePicker-monthComponents {
-        display: none;
-      }
+    // Hide the day picking components.
+    .dayPicker,
+    .monthComponents {
+      display: none;
+    }
 
-      // Show the month picking components.
-      .ms-DatePicker-monthPicker {
-        display: block;
-      }
+    // Show the month picking components.
+    .monthPicker {
+      display: block;
     }
   }
+}
 
 
-  // Custom CSS for fabric-React
+// Custom CSS for fabric-React
 
 
-  .ms-DatePicker-wrap span:focus,
-  .ms-DatePicker-wrap div:focus {
-    outline: 1px solid $ms-color-themePrimary;
-  }
+.wrap span:focus,
+.wrap div:focus {
+  outline: 1px solid $ms-color-themePrimary;
+}
 
-  .ms-DatePicker-goToday {
-    width: auto;
-  }
+.goToday {
+  width: auto;
+}
 
-  .ms-DatePicker-nextMonth,
-  .ms-DatePicker-prevMonth,
-  .ms-DatePicker-nextYear,
-  .ms-DatePicker-prevYear {
-    display: inline-block;
-  }
+.nextMonth,
+.prevMonth,
+.nextYear,
+.prevYear {
+  display: inline-block;
+}
 
-  .ms-DatePicker-navContainer {
-    @include float('right')
-  }
-}
\ No newline at end of file
+.navContainer {
+  @include float('right')
+}
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
index 9bd4801282d43b..ae904a7b81a430 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
@@ -8,10 +8,11 @@ import { CalendarDay } from './CalendarDay';
 import { CalendarMonth } from './CalendarMonth';
 import {
   autobind,
+  css,
   BaseComponent,
   KeyCodes
 } from '../../Utilities';
-import './Calendar.scss';
+import styles from './Calendar.scss';
 
 export interface ICalendarState {
   /** The currently focused date in the calendar, but not necessarily selected */
@@ -69,15 +70,21 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
 
   public render() {
     let rootClass = 'ms-DatePicker';
-    let { firstDayOfWeek, strings } = this.props;
+    let { firstDayOfWeek, strings, isMonthPickerVisible } = this.props;
     let { selectedDate, navigatedDate } = this.state;
 
     return (
-      <div className={ rootClass } ref='root'>
-        <div className={ 'ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused ' + (this.props.isMonthPickerVisible ? 'is-monthPickerVisible' : '') } >
-          <div className='ms-DatePicker-holder' onKeyDown={ this._onDatePickerPopupKeyDown }>
-            <div className='ms-DatePicker-frame'>
-              <div className='ms-DatePicker-wrap'>
+      <div className={ css(rootClass, styles.root) } ref='root'>
+        <div className={ css(
+          'ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused',
+          styles.picker,
+          styles.pickerIsOpened,
+          styles.pickerIsFocused,
+          isMonthPickerVisible && ('is-monthPickerVisible ' + styles.pickerIsMonthPickerVisible)
+        ) } >
+          <div className={ css('ms-DatePicker-holder', styles.holder) } onKeyDown={ this._onDatePickerPopupKeyDown }>
+            <div className={ css('ms-DatePicker-frame', styles.frame) }>
+              <div className={ css('ms-DatePicker-wrap', styles.wrap) }>
                 <CalendarDay
                   selectedDate={ selectedDate }
                   navigatedDate={ navigatedDate }
@@ -91,7 +98,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
                   strings={ strings }
                   onNavigateDate={ this._onNavigateDate } />
                 <span
-                  className='ms-DatePicker-goToday js-goToday'
+                  className={ css('ms-DatePicker-goToday js-goToday', styles.goToday) }
                   onClick={ this._onGotoToday }
                   onKeyDown={ this._onGotoTodayKeyDown }
                   tabIndex={ 0 }>
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
index 4532d3fbbc1c7a..88c87b44686439 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
@@ -10,6 +10,7 @@ import {
 import { DayOfWeek, ICalendarStrings } from './Calendar.Props';
 import { FocusZone } from '../../FocusZone';
 import { addDays, addWeeks, addMonths, compareDates } from '../../utilities/dateMath/DateMath';
+import styles from './Calendar.scss';
 
 const DAYS_IN_WEEK = 7;
 
@@ -68,36 +69,47 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     weeks.map((week, index) => week.map(day => selectDayCallbacks[day.key] = onSelectDate.bind(this, day.originalDate)));
 
     return (
-      <div className='ms-DatePicker-dayPicker'>
-        <div className='ms-DatePicker-header'>
-          <div className='ms-DatePicker-month'>{ strings.months[navigatedDate.getMonth()] }</div>
-          <div className='ms-DatePicker-year'>{ navigatedDate.getFullYear() }</div>
+      <div className={ css('ms-DatePicker-dayPicker', styles.dayPicker) }>
+        <div className={ css('ms-DatePicker-header', styles.header) }>
+          <div className={ css('ms-DatePicker-month', styles.month) }>{ strings.months[navigatedDate.getMonth()] }</div>
+          <div className={ css('ms-DatePicker-year', styles.year) }>{ navigatedDate.getFullYear() }</div>
         </div>
-        <div className='ms-DatePicker-monthComponents'>
-          <div className='ms-DatePicker-navContainer'>
+        <div className={ css('ms-DatePicker-monthComponents', styles.monthComponents) }>
+          <div className={ css('ms-DatePicker-navContainer', styles.navContainer) }>
             <span
-              className='ms-DatePicker-prevMonth js-prevMonth'
+              className={ css('ms-DatePicker-prevMonth js-prevMonth', styles.prevMonth) }
               onClick={ this._onSelectPrevMonth }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectPrevMonth) }
               tabIndex={ 0 }>
               <i className={ css('ms-Icon', { 'ms-Icon--ChevronLeft': !getRTL(), 'ms-Icon--ChevronRight': getRTL() }) } />
-            </span>
+            </span >
             <span
-              className='ms-DatePicker-nextMonth js-nextMonth'
+              className={ css('ms-DatePicker-nextMonth js-nextMonth', styles.nextMonth) }
               onClick={ this._onSelectNextMonth }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectNextMonth) }
               tabIndex={ 0 }>
               <i className={ css('ms-Icon', { 'ms-Icon--ChevronLeft': getRTL(), 'ms-Icon--ChevronRight': !getRTL() }) } />
-            </span>
-          </div>
-          <div className='ms-DatePicker-headerToggleView js-showMonthPicker'></div>
-        </div>
+            </span >
+          </div >
+          <div className={ css('ms-DatePicker-headerToggleView js-showMonthPicker', styles.headerToggleView) } />
+        </div >
         <FocusZone>
-          <table className='ms-DatePicker-table' role='grid' aria-readonly='true' aria-multiselectable='false' aria-activedescendant={ activeDescendantId }>
+          <table
+            className={ css('ms-DatePicker-table', styles.table) }
+            role='grid'
+            aria-readonly='true'
+            aria-multiselectable='false'
+            aria-activedescendant={ activeDescendantId }
+          >
             <thead>
               <tr>
                 { strings.shortDays.map((val, index) =>
-                  <th className='ms-DatePicker-weekday' scope='col' key={ index } title={ strings.days[(index + firstDayOfWeek) % DAYS_IN_WEEK] }>
+                  <th
+                    className={ css('ms-DatePicker-weekday', styles.weekday) }
+                    scope='col'
+                    key={ index }
+                    title={ strings.days[(index + firstDayOfWeek) % DAYS_IN_WEEK] }
+                  >
                     { strings.shortDays[(index + firstDayOfWeek) % DAYS_IN_WEEK] }
                   </th>) }
               </tr>
@@ -108,12 +120,15 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
                   { week.map((day, dayIndex) =>
                     <td role='presentation' key={ day.key }>
                       <div
-                        className={ css('ms-DatePicker-day', {
-                          'ms-DatePicker-day--infocus': day.isInMonth,
-                          'ms-DatePicker-day--outfocus': !day.isInMonth,
-                          'ms-DatePicker-day--today': day.isToday,
-                          'ms-DatePicker-day--highlighted': day.isSelected
-                        }) }
+                        className={ css(
+                          'ms-DatePicker-day',
+                          styles.day,
+                          {
+                            ['ms-DatePicker-day--infocus ' + styles.dayIsFocused]: day.isInMonth,
+                            ['ms-DatePicker-day--outfocus ' + styles.dayIsUnfocused]: !day.isInMonth,
+                            ['ms-DatePicker-day--today ' + styles.dayIsToday]: day.isToday,
+                            ['ms-DatePicker-day--highlighted ' + styles.dayIsHighlighted]: day.isSelected
+                          }) }
                         role='gridcell'
                         onClick={ selectDayCallbacks[day.key] }
                         onKeyDown={ (ev: React.KeyboardEvent<HTMLElement>) =>
@@ -132,7 +147,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
             </tbody>
           </table>
         </FocusZone>
-      </div>
+      </div >
     );
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
index 3fcaa3656a913f..7fb88f90c33e4e 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
@@ -7,6 +7,7 @@ import {
 import { ICalendarStrings } from './Calendar.Props';
 import { FocusZone } from '../../FocusZone';
 import { addYears, setMonth } from '../../utilities/dateMath/DateMath';
+import styles from './Calendar.scss';
 
 export interface ICalendarMonthProps {
   navigatedDate: Date;
@@ -35,30 +36,42 @@ export class CalendarMonth extends React.Component<ICalendarMonthProps, {}> {
     let { navigatedDate, strings } = this.props;
 
     return (
-      <div className='ms-DatePicker-monthPicker'>
-        <div className='ms-DatePicker-header'>
-          <div className='ms-DatePicker-yearComponents ms-DatePicker-navContainer'>
+      <div className={ css('ms-DatePicker-monthPicker', styles.monthPicker) }>
+        <div className={ css('ms-DatePicker-header', styles.header) }>
+          <div className={ css(
+            'ms-DatePicker-yearComponents ms-DatePicker-navContainer',
+            styles.yearComponents,
+            styles.navContainer
+          ) }>
             <span
-              className='ms-DatePicker-prevYear js-prevYear'
+              className={ css('ms-DatePicker-prevYear js-prevYear', styles.prevYear) }
               onClick={ this._onSelectPrevYear }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectPrevYear) }
               tabIndex={ 0 }>
               <i className={ css('ms-Icon', { 'ms-Icon--ChevronLeft': !getRTL(), 'ms-Icon--ChevronRight': getRTL() }) } />
             </span>
             <span
-              className='ms-DatePicker-nextYear js-nextYear'
+              className={ css('ms-DatePicker-nextYear js-nextYear', styles.nextYear) }
               onClick={ this._onSelectNextYear }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectNextYear) }
               tabIndex={ 0 }>
               <i className={ css('ms-Icon', { 'ms-Icon--ChevronLeft': getRTL(), 'ms-Icon--ChevronRight': !getRTL() }) } />
             </span>
           </div>
-          <div className='ms-DatePicker-currentYear js-showYearPicker'>{ navigatedDate.getFullYear() }</div>
+          <div className={ css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear) }>{ navigatedDate.getFullYear() }</div>
         </div>
         <FocusZone>
-          <div className='ms-DatePicker-optionGrid'>
+          <div className={ css('ms-DatePicker-optionGrid', styles.optionGrid) }>
             { strings.shortMonths.map((month, index) => {
-              return (<span className='ms-DatePicker-monthOption' key={ index } onClick={ this._selectMonthCallbacks[index] } data-is-focusable={ true }>{ month }</span>);
+              return (
+                <span
+                  className={ css('ms-DatePicker-monthOption', styles.monthOption) }
+                  key={ index }
+                  onClick={ this._selectMonthCallbacks[index] }
+                  data-is-focusable={ true }
+                >
+                  { month }
+                </span>);
             }) }
           </div>
         </FocusZone>
diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.scss b/packages/office-ui-fabric-react/src/components/Callout/Callout.scss
index eb17db0619125d..ff77ae217729ae 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/Callout.scss
+++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.scss
@@ -21,44 +21,43 @@ $Callout-smallbeak-slant-width: 16px;
   transform: rotate(45deg);
 }
 
-:global {
-  .ms-Callout {
-    @include ms-baseFont;
-    @include drop-shadow(0,0, 15px, -5px);
-    position: absolute;
-    border: 1px solid $ms-color-neutralLight;
-    box-sizing: border-box;
+.root {
+  @include ms-baseFont;
+  @include drop-shadow(0,0, 15px, -5px);
+  position: absolute;
+  border: 1px solid $ms-color-neutralLight;
+  box-sizing: border-box;
 
-    @media screen and (-ms-high-contrast: active) {
-      border: 1px solid $ms-color-white;
-    }
-    @media screen and (-ms-high-contrast: black-on-white) {
-      border: 1px solid $ms-color-black;
-    }
+  @media screen and (-ms-high-contrast: active) {
+    border: 1px solid $ms-color-white;
   }
-
-  .ms-Callout-container {
-    position: relative;
+  @media screen and (-ms-high-contrast: black-on-white) {
+    border: 1px solid $ms-color-black;
   }
+}
 
-  // The actual callout element
-  .ms-Callout-main {
-    background-color: $ms-color-white;
-    overflow-x: hidden;
-    overflow-y: auto;
-    position: relative;
-  }
+.container {
+  position: relative;
+}
 
-  .ms-Callout-beak {
-    @include calloutBeak;
-  }
+// The actual callout element
+.main {
+  background-color: $ms-color-white;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+}
 
-  .ms-Callout-beakCurtain {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: $ms-color-white;
-  }
+.beak {
+  @include calloutBeak;
 }
+
+.beakCurtain {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $ms-color-white;
+}
+
diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx
index 95d2bdf5e994be..a9f0daa0dad083 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx
@@ -1,9 +1,13 @@
+/* tslint:disable:no-unused-variable */
 import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import { BaseComponent } from '../../Utilities';
 import { ICalloutProps } from './Callout.Props';
 import { ICalloutState, CalloutContent } from './CalloutContent';
 import { Layer } from '../../Layer';
 
-export class Callout extends React.Component<ICalloutProps, ICalloutState> {
+export class Callout extends BaseComponent<ICalloutProps, ICalloutState> {
 
   constructor(props: ICalloutProps) {
     super(props);
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
index 98b23547484d1a..e1528ac9731ffd 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
@@ -16,12 +16,13 @@ import {
 } from '../../Utilities';
 import { getRelativePositions, IPositionInfo, IPositionProps, getMaxHeight } from '../../utilities/positioning';
 import { Popup } from '../../Popup';
-import './Callout.scss';
+import styles from './Callout.scss';
 
 const BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
 const OFF_SCREEN_STYLE = { opacity: 0 };
 const BORDER_WIDTH: number = 1;
 const SPACE_FROM_EDGE: number = 8;
+
 export interface ICalloutState {
   positions?: IPositionInfo;
   slideDirectionalClassName?: string;
@@ -116,11 +117,12 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
     let contentMaxHeight: number = this._getMaxHeight();
     let beakVisible: boolean = isBeakVisible && (!!targetElement || !!target);
     let content = (
-      <div ref={ this._resolveRef('_hostElement') } className={ 'ms-Callout-container' }>
+      <div ref={ this._resolveRef('_hostElement') } className={ css('ms-Callout-container', styles.container) }>
         <div
           className={
             css(
               'ms-Callout',
+              styles.root,
               className,
               directionalClassName
             ) }
@@ -130,14 +132,14 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
 
           { beakVisible && (
             <div
-              className={ 'ms-Callout-beak' }
+              className={ css('ms-Callout-beak', styles.beak) }
               style={ beakReactStyle }
             />) }
 
           { beakVisible &&
-            (<div className='ms-Callout-beakCurtain' />) }
+            (<div className={ css('ms-Callout-beakCurtain', styles.beakCurtain) } />) }
           <Popup
-            className='ms-Callout-main'
+            className={ css('ms-Callout-main', styles.main) }
             onDismiss={ this.dismiss }
             shouldRestoreFocus={ true }
             style={ { maxHeight: contentMaxHeight } }>
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.scss b/packages/office-ui-fabric-react/src/components/Check/Check.scss
index 53f26e4eac41d5..87472a3633a3c3 100644
--- a/packages/office-ui-fabric-react/src/components/Check/Check.scss
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.scss
@@ -9,74 +9,73 @@
 
 $checkBoxHeight: 24px;
 
-:global {
-  .ms-Check {
-    line-height: 1;
-    width: $checkBoxHeight;
-    height: $checkBoxHeight;
-    vertical-align: top;
-    position: relative;
-    @include user-select(none);
+.root {
+  line-height: 1;
+  width: $checkBoxHeight;
+  height: $checkBoxHeight;
+  vertical-align: top;
+  position: relative;
+  @include user-select(none);
 
-    &.is-checked {
-      .ms-Check-background {
-        &:before {
-          color: $ms-color-themePrimary;
-        }
-
-        &:after {
-          color: $ms-color-white;
-        }
+  &.rootIsChecked {
+    .background {
+      &:before {
+        color: $ms-color-themePrimary;
       }
 
-      .ms-Check-check {
-        opacity: 1;
+      &:after {
         color: $ms-color-white;
-        font-weight: 900;
-        font-size: $ms-font-size-s;
       }
     }
 
-    &:hover {
-      .ms-Check-check {
-        opacity: 1;
-      }
+    .check {
+      opacity: 1;
+      color: $ms-color-white;
+      font-weight: 900;
+      font-size: $ms-font-size-s;
     }
   }
 
-  .ms-Check-check {
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    position: absolute;
-    color: $ms-color-neutralTertiaryAlt;
-    opacity: 0;
+  &:hover {
+    .check {
+      opacity: 1;
+    }
   }
+}
 
-  .ms-Check-background {
-    position: relative;
-    height: $checkBoxHeight;
-    width: $checkBoxHeight;
+.check {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  color: $ms-color-neutralTertiaryAlt;
+  opacity: 0;
+}
 
-    &:before {
-      content: '\E91F';
-      color: $ms-color-white;
-    }
+.background {
+  position: relative;
+  height: $checkBoxHeight;
+  width: $checkBoxHeight;
 
-    &:after {
-      content: '\EA3A';
-      color: $ms-color-neutralTertiaryAlt;
-    }
+  &:before {
+    content: '\E91F';
+    color: $ms-color-white;
+  }
 
-    &:before,
-    &:after {
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      font-size: $checkBoxHeight;
-      height: $checkBoxHeight;
-      width: $checkBoxHeight;
-      position: absolute;
-    }
+  &:after {
+    content: '\EA3A';
+    color: $ms-color-neutralTertiaryAlt;
+  }
+
+  &:before,
+  &:after {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: $checkBoxHeight;
+    height: $checkBoxHeight;
+    width: $checkBoxHeight;
+    position: absolute;
   }
 }
+
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.tsx b/packages/office-ui-fabric-react/src/components/Check/Check.tsx
index e592614563747b..cc945b0378009d 100644
--- a/packages/office-ui-fabric-react/src/components/Check/Check.tsx
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '../../Utilities';
-import './Check.scss';
+import styles from './Check.scss';
 
 export interface ICheckProps extends React.Props<Check> {
   /**
@@ -27,13 +27,18 @@ export class Check extends React.Component<ICheckProps, {}> {
   public render() {
     let { isChecked, checked } = this.props;
 
+    isChecked = isChecked || checked;
+
     return (
-      <div className={ css('ms-Check', {
-        'is-checked': isChecked || checked
-      }) }>
-        <div className='ms-Icon ms-Check-background'>
+      <div className={ css(
+        'ms-Check',
+        styles.root,
+        {
+          ['is-checked ' + styles.rootIsChecked]: isChecked
+        }) }>
+        <div className={ css('ms-Icon ms-Check-background', styles.background) }>
         </div>
-        <i className='ms-Check-check ms-Icon ms-Icon--CheckMark'></i>
+        <i className={ css('ms-Check-check ms-Icon ms-Icon--CheckMark', styles.check) }></i>
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.scss b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.scss
index fdea6d83ebd93b..e83a7397a2b011 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.scss
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.scss
@@ -32,198 +32,195 @@ $ms-checkbox-highContrast-iconBoxSize: 16px;
   }
 }
 
-:global {
-
-  .ms-Checkbox {
-    box-sizing: border-box;
-    color: $ms-color-neutralPrimary;
-    font-family: $ms-font-family-base;
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-    min-height: 36px;
-    position: relative;
-
-    .ms-Label {
-      font-size: $ms-font-size-m;
-      @include padding(0, 0, 0, 26px);
-      display: inline-block;
-    }
-  }
+.root {
+  box-sizing: border-box;
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-base;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  min-height: 36px;
+  position: relative;
+}
 
-  // The hidden input
-  .ms-Checkbox-input {
-    position: absolute;
-    opacity: 0;
-    top: 8px
-  }
+.textLabel {
+  font-size: $ms-font-size-m;
+  @include padding(0, 0, 0, 26px);
+  display: inline-block;
+  font-size: $ms-font-size-m;
+}
 
-  // The checkbox square container
-  .ms-Checkbox-label::before {
-    content: '';
-    display: inline-block;
-    border: 1px solid $ms-color-neutralTertiary;
-    width: $ms-checkbox-label-size;
-    height: $ms-checkbox-label-size;
-    font-weight: normal;
-    position: absolute;
-    box-sizing: border-box;
-    transition-property: background, border, border-color;
-    transition-duration: $ms-checkbox-transition-duration;
-    transition-timing-function: $ms-checkbox-transition-timing;
-  }
+// The hidden input
+.input {
+  position: absolute;
+  opacity: 0;
+  top: 8px
+}
 
-  // The check mark icon
-  .ms-Checkbox-label::after {
-    @include ms-Icon--CheckMark;
-    font-family: 'FabricMDL2Icons';
-    display: none;
-    position: absolute;
-    font-weight: 900;
-    background-color: transparent;
-    font-size: $ms-font-size-s-plus;
-    top: 0;
-    color: $ms-color-white;
-    line-height: $ms-checkbox-label-size;
-    width: $ms-checkbox-label-size;
-    text-align: center;
-  }
+// The checkbox square container
+.label::before {
+  content: '';
+  display: inline-block;
+  border: 1px solid $ms-color-neutralTertiary;
+  width: $ms-checkbox-label-size;
+  height: $ms-checkbox-label-size;
+  font-weight: normal;
+  position: absolute;
+  box-sizing: border-box;
+  transition-property: background, border, border-color;
+  transition-duration: $ms-checkbox-transition-duration;
+  transition-timing-function: $ms-checkbox-transition-timing;
+}
 
-  // The checkbox label
-  .ms-Checkbox-label {
-    display: inline-block;
-    cursor: pointer;
-    margin-top: 8px;
-    position: relative;
-    vertical-align: top;
-    user-select: none;
-    min-width: $ms-checkbox-label-size;
-    min-height: $ms-checkbox-label-size;
-    line-height: $ms-checkbox-label-size;
-
-    &:hover {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+// The check mark icon
+.label::after {
+  @include ms-Icon--CheckMark;
+  font-family: 'FabricMDL2Icons';
+  display: none;
+  position: absolute;
+  font-weight: 900;
+  background-color: transparent;
+  font-size: $ms-font-size-s-plus;
+  top: 0;
+  color: $ms-color-white;
+  line-height: $ms-checkbox-label-size;
+  width: $ms-checkbox-label-size;
+  text-align: center;
+}
 
-      .ms-Label {
-        color: $ms-color-black;
-      }
+// The checkbox label
+.label {
+  display: inline-block;
+  cursor: pointer;
+  margin-top: 8px;
+  position: relative;
+  vertical-align: top;
+  user-select: none;
+  min-width: $ms-checkbox-label-size;
+  min-height: $ms-checkbox-label-size;
+  line-height: $ms-checkbox-label-size;
+
+  &:hover {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
     }
 
-    &:focus {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+    .textLabel {
+      color: $ms-color-black;
+    }
+  }
 
-      &.is-disabled::before {
-        border-color: $ms-color-neutralTertiaryAlt;
-      }
+  &:focus {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
+    }
 
-      &.is-checked::before {
-        border-color: $ms-color-themeDarkAlt;
-      }
+    &.labelIsDisabled::before {
+      border-color: $ms-color-neutralTertiaryAlt;
     }
 
-    &:active {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+    &.labelIsChecked::before {
+      border-color: $ms-color-themeDarkAlt;
+    }
+  }
 
-      .ms-Label {
-        color: $ms-color-black;
-      }
+  &:active {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
     }
 
-    //== State: A checkbox is checked
-    //
-    &.is-checked {
-      &::before {
-        border: 10px solid $ms-color-themePrimary;
-        background-color: $ms-color-themePrimary;
+    .textLabel {
+      color: $ms-color-black;
+    }
+  }
 
-        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
-          display: none;
-        }
-      }
+  //== State: A checkbox is checked
+  //
+  &.labelIsChecked {
+    &::before {
+      border: 10px solid $ms-color-themePrimary;
+      background-color: $ms-color-themePrimary;
 
-      &::after {
-        display: block;
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
+        display: none;
+      }
+    }
 
-        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
-          height: $ms-checkbox-highContrast-iconBoxSize;
-          width: $ms-checkbox-highContrast-iconBoxSize;
-          line-height: $ms-checkbox-highContrast-iconBoxSize;
-        }
+    &::after {
+      display: block;
 
-        @include highContrast-border($ms-color-white, $ms-color-black);
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
+        height: $ms-checkbox-highContrast-iconBoxSize;
+        width: $ms-checkbox-highContrast-iconBoxSize;
+        line-height: $ms-checkbox-highContrast-iconBoxSize;
       }
 
-      &:hover,
-      &:focus {
-        &::before {
-          border-color: $ms-color-themeDarkAlt;
-        }
-      }
+      @include highContrast-border($ms-color-white, $ms-color-black);
     }
 
-    //== State: A disabled checkbox
-    //
-    &.is-disabled {
-      cursor: default;
-
-      &:hover,
-      &:focus {
-        &::before {
-          border-color: $ms-color-neutralTertiaryAlt;
-        }
+    &:hover,
+    &:focus {
+      &::before {
+        border-color: $ms-color-themeDarkAlt;
       }
+    }
+  }
 
+  //== State: A disabled checkbox
+  //
+  &.labelIsDisabled {
+    cursor: default;
+
+    &:hover,
+    &:focus {
       &::before {
-        background-color: $ms-color-neutralTertiaryAlt;
         border-color: $ms-color-neutralTertiaryAlt;
-        color: $ms-color-neutralTertiaryAlt;
       }
+    }
 
-      &::after {
-        @include highContrast-border($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
-        @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
-      }
-
-      .ms-Label {
-        color: $ms-color-neutralTertiary;
-
-        @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
-      }
+    &::before {
+      background-color: $ms-color-neutralTertiaryAlt;
+      border-color: $ms-color-neutralTertiaryAlt;
+      color: $ms-color-neutralTertiaryAlt;
     }
 
-      //== State: A checkbox in focus
-    //
-    &.is-inFocus {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+    &::after {
+      @include highContrast-border($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
+      @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
+    }
 
-      &.is-disabled::before {
-        border-color: $ms-color-neutralTertiaryAlt;
-      }
+    .textLabel {
+      color: $ms-color-neutralTertiary;
 
-      &.is-checked::before {
-        border-color: $ms-color-themeDarkAlt;
-      }
+      @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
     }
   }
 
-  .is-focusVisible .ms-Checkbox.is-inFocus {
+    //== State: A checkbox in focus
+  //
+  &.labelIsInFocus {
     &::before {
-      content: '';
-      position: absolute;
-      top: 0px;
-      bottom: 0px;
-      @include right(0px);
-      @include left(-8px);
-      border: 1px solid $focusedBorderColor;
-      @include highContrast-border($ms-color-white, $ms-color-black, 1px);
+      border-color: $ms-color-neutralSecondaryAlt;
+    }
+
+    &.labelIsDisabled::before {
+      border-color: $ms-color-neutralTertiaryAlt;
+    }
+
+    &.labelIsChecked::before {
+      border-color: $ms-color-themeDarkAlt;
     }
   }
+}
 
-}
\ No newline at end of file
+:global(.ms-Fabric.is-focusVisible) .rootIsInFocus {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0;
+    right: 0;
+    border: 1px solid $focusedBorderColor;
+    @include highContrast-border($ms-color-white, $ms-color-black, 1px);
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
index 4b8103cce6b75c..e26430beafeabb 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
@@ -9,7 +9,7 @@ import {
   ICheckbox,
   ICheckboxProps
 } from './Checkbox.Props';
-import './Checkbox.scss';
+import styles from './Checkbox.scss';
 
 export interface ICheckboxState {
   /** Is true when the control has focus. */
@@ -32,7 +32,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     this._id = getId('checkbox-');
     this.state = {
       isFocused: false,
-      isChecked: props.defaultChecked || false
+      isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked)
     };
   }
 
@@ -52,8 +52,15 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
 
     return (
       <div
-        className={ css('ms-Checkbox', className, { 'is-inFocus': isFocused }) }
-        >
+        className={ css(
+          'ms-Checkbox',
+          styles.root,
+          className,
+          {
+            'is-inFocus': isFocused,
+            [styles.rootIsInFocus]: isFocused
+          }) }
+      >
         <input
           { ...inputProps }
           { ...(checked !== undefined && { checked }) }
@@ -62,22 +69,23 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
           ref={ this._resolveRef('_checkBox') }
           id={ this._id }
           name={ name || this._id }
-          className='ms-Checkbox-input'
+          className={ css('ms-Checkbox-input', styles.input) }
           type='checkbox'
           onChange={ this._onChange }
           onFocus={ this._onFocus }
           onBlur={ this._onBlur }
           aria-checked={ isChecked }
-          />
+        />
         { this.props.children }
         <label htmlFor={ this._id }
-          className={ css('ms-Checkbox-label', {
-            'is-checked': isChecked,
-            'is-disabled': disabled
+          className={ css('ms-Checkbox-label', styles.label, {
+            ['is-checked ' + styles.labelIsChecked]: isChecked,
+            ['is-disabled ' + styles.labelIsDisabled]: disabled,
+            [styles.labelIsInFocus]: isFocused
           })
           }
-          >
-          { label && <span className='ms-Label'>{ label }</span> }
+        >
+          { label && <span className={ styles.textLabel }>{ label }</span> }
         </label>
       </div>
     );
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
index 6e500ddd02cc2a..149f6325ff2905 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
@@ -14,310 +14,304 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
 //== Component: Choicefield group
 //
 
-:global {
-  .ms-ChoiceFieldGroup {
-    @include ms-baseFont;
-    margin-bottom: 4px;
-
-    .ms-ChoiceFieldGroup-list {
-      padding: 0;
-      margin: 0;
-    }
-  }
-
-  .ms-ChoiceField {
-    box-sizing: border-box;
-    color: $ms-color-neutralPrimary;
-    font-family: $ms-font-family-base;
+.root {
+  @include ms-baseFont;
+  margin-bottom: 4px;
+}
+
+.choiceField {
+  box-sizing: border-box;
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-base;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  min-height: 36px;
+  border: 1px solid transparent;
+  position: relative;
+  line-height: $ms-choiceField-field-size;
+  @include padding-left(8px);
+
+  :global(.ms-Label) {
     font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-    min-height: 36px;
-    border: 1px solid transparent;
-    position: relative;
-    line-height: $ms-choiceField-field-size;
-    @include padding-left(8px);
-
-    .ms-Label {
-      font-size: $ms-font-size-m;
-      @include padding(0, 0, 0, 26px);
-      display: inline-block;
-    }
+    @include padding(0, 0, 0, 26px);
+    display: inline-block;
+  }
+}
+
+// The hidden input
+.input {
+  position: absolute;
+  opacity: 0;
+  top: 8px
+}
+
+// The choiceField container
+.field::before {
+  content: '';
+  display: inline-block;
+  border: 2px solid $ms-color-neutralTertiary;
+  width: $ms-choiceField-field-size;
+  height: $ms-choiceField-field-size;
+  font-weight: normal;
+  position: absolute;
+  box-sizing: border-box;
+  transition-property: background, border, border-color;
+  transition-duration: $ms-choiceField-transition-duration;
+  transition-timing-function: $ms-choiceField-transition-timing;
+  border-radius: 50%;
+}
+
+// The circle
+.field::after {
+  content: '';
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  position: absolute;
+  top: $ms-choiceField-field-size / 2;
+  @include left($ms-choiceField-field-size / 2);
+  bottom: 0;
+  @include right(0);
+  transition-property: top, left, right, width, height;
+  transition-duration: $ms-choiceField-transition-duration-inner;
+  transition-timing-function: $ms-choiceField-transition-timing;
+  box-sizing: border-box;
+
+@media screen and (-ms-high-contrast: active) {
+    color: $ms-color-contrastBlackDisabled;
   }
 
-  // The hidden input
-  .ms-ChoiceField-input {
-    position: absolute;
-    opacity: 0;
-    top: 8px
+  @media screen and (-ms-high-contrast: black-on-white) {
+    color: $ms-color-contrastWhiteDisabled;
   }
+}
+
+// The choiceField field
+.field {
+  display: inline-block;
+  cursor: pointer;
+  margin-top: 8px;
+  position: relative;
+  vertical-align: top;
+  user-select: none;
+
+  &:hover {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
+    }
 
-  // The choiceField container
-  .ms-ChoiceField-field::before {
-    content: '';
-    display: inline-block;
-    border: 2px solid $ms-color-neutralTertiary;
-    width: $ms-choiceField-field-size;
-    height: $ms-choiceField-field-size;
-    font-weight: normal;
-    position: absolute;
-    box-sizing: border-box;
-    transition-property: background, border, border-color;
-    transition-duration: $ms-choiceField-transition-duration;
-    transition-timing-function: $ms-choiceField-transition-timing;
-    border-radius: 50%;
+    :global(.ms-Label) {
+      color: $ms-color-black;
+    }
   }
 
-  // The circle
-  .ms-ChoiceField-field::after {
-    content: '';
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    position: absolute;
-    top: $ms-choiceField-field-size / 2;
-    @include left($ms-choiceField-field-size / 2);
-    bottom: 0;
-    @include right(0);
-    transition-property: top, left, right, width, height;
-    transition-duration: $ms-choiceField-transition-duration-inner;
-    transition-timing-function: $ms-choiceField-transition-timing;
-    box-sizing: border-box;
+  &:focus {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
+    }
 
-  @media screen and (-ms-high-contrast: active) {
-      color: $ms-color-contrastBlackDisabled;
+    &.fieldIsDisabled::before {
+      border-color: $ms-color-neutralTertiaryAlt;
     }
 
-    @media screen and (-ms-high-contrast: black-on-white) {
-      color: $ms-color-contrastWhiteDisabled;
+    &.fieldIsChecked::before {
+      border-color: $ms-color-themeDarkAlt;
     }
   }
+  &:active {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
+    }
 
-  // The choiceField field
-  .ms-ChoiceField-field {
-    display: inline-block;
-    cursor: pointer;
-    margin-top: 8px;
-    position: relative;
-    vertical-align: top;
-    user-select: none;
+    :global(.ms-Label) {
+      color: $ms-color-black;
+    }
+  }
 
-    &:hover {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
+  //== State: A choiceField is checked
+  //
+  &.fieldIsChecked {
+    &::before {
+      border: 2px solid $ms-color-themePrimary;
+      background-color: transparent;
+
+      @media screen and (-ms-high-contrast: active) {
+        border-color: $ms-color-contrastBlackSelected;
       }
 
-      .ms-Label {
-        color: $ms-color-black;
+      @media screen and (-ms-high-contrast: black-on-white) {
+        border-color: $ms-color-contrastWhiteSelected;
       }
     }
 
-    &:focus {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+    &::after {
+      background-color: $ms-color-themePrimary;
+      top: 5px;
+      @include left(5px);
+      width: 10px;
+      height: 10px;
 
-      &.is-disabled::before {
-        border-color: $ms-color-neutralTertiaryAlt;
+      @media screen and (-ms-high-contrast: active) {
+        background-color: $ms-color-contrastBlackSelected;
       }
 
-      &.is-checked::before {
-        border-color: $ms-color-themeDarkAlt;
+      @media screen and (-ms-high-contrast: black-on-white) {
+        background-color: $ms-color-contrastWhiteSelected;
       }
     }
-    &:active {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
 
-      .ms-Label {
-        color: $ms-color-black;
+    &:hover,
+    &:focus {
+      &::before {
+        border-color: $ms-color-themeDarkAlt;
       }
     }
+  }
 
-    //== State: A choiceField is checked
-    //
-    &.is-checked {
-      &::before {
-        border: 2px solid $ms-color-themePrimary;
-        background-color: transparent;
-
-        @media screen and (-ms-high-contrast: active) {
-          border-color: $ms-color-contrastBlackSelected;
-        }
+  //== State: A disabled choiceField
+  //
+  &.fieldIsDisabled {
+    cursor: default;
 
-        @media screen and (-ms-high-contrast: black-on-white) {
-          border-color: $ms-color-contrastWhiteSelected;
-        }
+    &:hover,
+    &:focus {
+      &::before {
+        border-color: $ms-color-neutralTertiaryAlt;
       }
+    }
 
-      &::after {
-        background-color: $ms-color-themePrimary;
-        top: 5px;
-        @include left(5px);
-        width: 10px;
-        height: 10px;
+    &::before {
+      background-color: $ms-color-neutralTertiaryAlt;
+      border-color: $ms-color-neutralTertiaryAlt;
+      color: $ms-color-neutralTertiaryAlt;
 
-        @media screen and (-ms-high-contrast: active) {
-          background-color: $ms-color-contrastBlackSelected;
-        }
-
-        @media screen and (-ms-high-contrast: black-on-white) {
-          background-color: $ms-color-contrastWhiteSelected;
-        }
+      @media screen and (-ms-high-contrast: active) {
+        border-color: $ms-color-contrastBlackDisabled;
       }
 
-      &:hover,
-      &:focus {
-        &::before {
-          border-color: $ms-color-themeDarkAlt;
-        }
+      @media screen and (-ms-high-contrast: black-on-white) {
+        border-color: $ms-color-contrastWhiteDisabled;
       }
     }
 
-    //== State: A disabled choiceField
-    //
-    &.is-disabled {
-      cursor: default;
+    :global(.ms-Label) {
+      color: $ms-color-neutralTertiary;
 
-      &:hover,
-      &:focus {
-        &::before {
-          border-color: $ms-color-neutralTertiaryAlt;
-        }
+      @media screen and (-ms-high-contrast: active) {
+        color: $ms-color-contrastBlackDisabled;
       }
 
-      &::before {
-        background-color: $ms-color-neutralTertiaryAlt;
-        border-color: $ms-color-neutralTertiaryAlt;
-        color: $ms-color-neutralTertiaryAlt;
-
-        @media screen and (-ms-high-contrast: active) {
-          border-color: $ms-color-contrastBlackDisabled;
-        }
-
-        @media screen and (-ms-high-contrast: black-on-white) {
-          border-color: $ms-color-contrastWhiteDisabled;
-        }
+      @media screen and (-ms-high-contrast: black-on-white) {
+        color: $ms-color-contrastWhiteDisabled;
       }
+    }
+  }
 
-      .ms-Label {
-        color: $ms-color-neutralTertiary;
+  //== State: A choiceField in focus
+  //
+  &.choiceFieldIsInFocus {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
+    }
 
-        @media screen and (-ms-high-contrast: active) {
-          color: $ms-color-contrastBlackDisabled;
-        }
+    &.fieldIsDisabled::before {
+      border-color: $ms-color-neutralTertiaryAlt;
+    }
 
-        @media screen and (-ms-high-contrast: black-on-white) {
-          color: $ms-color-contrastWhiteDisabled;
-        }
-      }
+    &.fieldIsChecked::before {
+      border-color: $ms-color-themeDarkAlt;
     }
+  }
+}
 
-    //== State: A choiceField in focus
-    //
-    &.is-inFocus {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+.choiceFieldIsImage {
+  $fieldMinWidth: 164px;
+  $fieldPadding: 20px;
 
-      &.is-disabled::before {
-        border-color: $ms-color-neutralTertiaryAlt;
-      }
+  display: inline-block;
 
-      &.is-checked::before {
-        border-color: $ms-color-themeDarkAlt;
-      }
-    }
-  }
+  font-size: 0;
 
-  .ms-ChoiceField--image {
-    $fieldMinWidth: 164px;
-    $fieldPadding: 20px;
+  @include margin-right(6px);
+  @include padding-left(0px);
+  @include ms-bgColor-neutralLighter;
 
+  .fieldIsImage {
     display: inline-block;
 
-    font-size: 0;
+    box-sizing: border-box;
+    min-width: $fieldMinWidth;
+    cursor: pointer;
+    padding: $fieldPadding $fieldPadding 12px $fieldPadding;
+    text-align: center;
+    transition: all $ms-choiceField-transition-duration ease;
 
-    @include margin-right(6px);
-    @include padding-left(0px);
-    @include ms-bgColor-neutralLighter;
+    .innerField {
+      position: relative;
 
-    .ms-ChoiceField-field--image {
-      display: inline-block;
+      .imageWrapper {
+        transition: opacity $ms-choiceField-transition-duration ease;
 
-      box-sizing: border-box;
-      min-width: $fieldMinWidth;
-      cursor: pointer;
-      padding: $fieldPadding $fieldPadding 12px $fieldPadding;
-      text-align: center;
-      transition: all $ms-choiceField-transition-duration ease;
-
-      .ms-ChoiceField-innerField {
-        position: relative;
-
-        .ms-ChoiceField-imageWrapper {
-          transition: opacity $ms-choiceField-transition-duration ease;
-
-          &.is-hidden {
-            position: absolute;
-            @include left(0);
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            opacity: 0;
-          }
-
-          .ms-Image {
-            display: inline-block;
-          }
+        &.imageWrapperIsHidden {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          opacity: 0;
         }
-        .ms-ChoiceField-iconWrapper {
-          font-size: $ms-font-size-su;
-          line-height: $ms-font-size-su;
+
+        :global(.ms-Image) {
+          display: inline-block;
         }
       }
 
-      .ms-ChoiceField-labelWrapper {
-        display: inline-block;
-        position: relative;
-        margin: 10px 0 0 0;
-        padding: 0 24px;
-
-        .ms-ChoiceField-icon {
-          display: none;
-          position: absolute;
-          @include left(0);
-          line-height: $ms-font-size-s;
+      .iconWrapper {
+        font-size: $ms-font-size-su;
+        line-height: $ms-font-size-su;
+      }
+    }
 
-          @include ms-fontSize-l;
-          @include ms-fontColor-themeDark;
-        }
+    .labelWrapper {
+      display: inline-block;
+      position: relative;
+      margin: 10px 0 0 0;
+      padding: 0 24px;
+
+      .icon {
+        display: none;
+        position: absolute;
+        @include left(0);
+        line-height: $ms-font-size-s;
+
+        @include ms-fontSize-l;
+        @include ms-fontColor-themeDark;
+      }
 
-        .ms-Label {
-          display: inline-block;
-          padding: 0;
-          line-height: $ms-font-size-s;
+      :global(.ms-Label) {
+        display: inline-block;
+        padding: 0;
+        line-height: $ms-font-size-s;
 
-          @include ms-fontWeight-semibold;
-          @include ms-fontColor-neutralPrimary;
-        }
+        @include ms-fontWeight-semibold;
+        @include ms-fontColor-neutralPrimary;
       }
+    }
 
-      &.is-checked {
-        @include ms-bgColor-themeLighter;
+    &.fieldIsChecked {
+      @include ms-bgColor-themeLighter;
 
-        .ms-ChoiceField-labelWrapper .ms-ChoiceField-icon {
-          display: inline-block;
-        }
-        .ms-ChoiceField-iconWrapper {
-          @include ms-fontColor-themeDark;
-        }
+      .labelWrapper .icon {
+        display: inline-block;
+      }
+      .iconWrapper {
+        @include ms-fontColor-themeDark;
       }
     }
   }
+}
 
-  .is-focusVisible .ms-ChoiceField.is-inFocus {
-    border: 1px solid $ms-color-neutralPrimary;
-  }
+:global(.ms-Fabric.is-focusVisible) .choiceFieldIsInFocus {
+  border: 1px solid $ms-color-neutralPrimary;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
index 31ca4bbecf9a85..99e94ad93cc459 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Image } from '../../Image';
+import { Label } from '../../Label';
 import { Icon } from '../../Icon';
 import { IChoiceGroupOption, IChoiceGroupProps } from './ChoiceGroup.Props';
 import {
@@ -7,7 +8,7 @@ import {
   getId,
   BaseComponent
 } from '../../Utilities';
-import './ChoiceGroup.scss';
+import styles from './ChoiceGroup.scss';
 
 export interface IChoiceGroupState {
   keyChecked: string;
@@ -52,35 +53,31 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
     let { label, options, className, required } = this.props;
     let { keyChecked, keyFocused } = this.state;
 
-    const titleClassName = css('ms-Label', className, {
-      'is-required': required
-    });
-
     return (
       // Need to assign role application on containing div because JAWS doesnt call OnKeyDown without this role
       <div role='application' className={ className }>
         <div
-          className='ms-ChoiceFieldGroup'
+          className={ css('ms-ChoiceFieldGroup', styles.root) }
           role='radiogroup'
           aria-labelledby={ this.props.label ? this._id + '-label' : '' }
         >
-          <div className='ms-ChoiceFieldGroup-title'>
-            { this.props.label ? <label className={ titleClassName } id={ this._id + '-label' }>{ label }</label> : null }
-          </div>
+          { this.props.label && (
+            <Label className={ className } required={ required } id={ this._id + '-label' }>{ label }</Label>
+          ) }
 
           { options.map((option) => (
             <div
               key={ option.key }
-              className={ css('ms-ChoiceField', {
-                'ms-ChoiceField--image': !!option.imageSrc || !!option.iconProps,
-                'is-inFocus': option.key === keyFocused
+              className={ css('ms-ChoiceField', styles.choiceField, {
+                ['ms-ChoiceField--image ' + styles.choiceFieldIsImage]: !!option.imageSrc || !!option.iconProps,
+                ['is-inFocus ' + styles.choiceFieldIsInFocus]: option.key === keyFocused
               })
               }
             >
               <input
                 ref={ (c): HTMLInputElement => this._inputElement = c }
                 id={ `${this._id}-${option.key}` }
-                className='ms-ChoiceField-input'
+                className={ css('ms-ChoiceField-input', styles.input) }
                 type='radio'
                 name={ this.props.name || this._id }
                 disabled={ option.isDisabled || option.disabled || this.props.disabled }
@@ -127,23 +124,35 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
       <label
         htmlFor={ this._id + '-' + option.key }
         className={ css({
-          'ms-ChoiceField-field--image': !!option.imageSrc || !!option.iconProps,
-          'ms-ChoiceField-field': !option.imageSrc && !option.iconProps,
-          'is-checked': option.key === keyChecked,
-          'is-disabled': isDisabled
+          ['ms-ChoiceField-field ' + styles.field]: !option.imageSrc && !option.iconProps,
+          ['ms-ChoiceField-field--image ' + styles.fieldIsImage]: !!option.imageSrc || !!option.iconProps,
+          ['is-checked ' + styles.fieldIsChecked]: option.key === keyChecked,
+          ['is-disabled ' + styles.fieldIsDisabled]: isDisabled
         }) }
       >
         {
-          option.imageSrc
-            ? <div className='ms-ChoiceField-innerField'>
-              <div className={ css('ms-ChoiceField-imageWrapper', { 'is-hidden': option.key === keyChecked }) }>
+          option.imageSrc && (
+            <div className={ css('ms-ChoiceField-innerField', styles.innerField) }>
+              <div className={ css(
+                'ms-ChoiceField-imageWrapper',
+                styles.imageWrapper,
+                {
+                  ['is-hidden ' + styles.imageWrapperIsHidden]: option.key === keyChecked
+                }) }
+              >
                 <Image
                   src={ option.imageSrc }
                   width={ option.imageSize.width }
                   height={ option.imageSize.height }
                 />
               </div>
-              <div className={ css('ms-ChoiceField-imageWrapper', { 'is-hidden': option.key !== keyChecked }) }>
+              <div className={ css(
+                'ms-ChoiceField-imageWrapper',
+                styles.imageWrapper,
+                {
+                  ['is-hidden ' + styles.imageWrapperIsHidden]: option.key !== keyChecked
+                }) }
+              >
                 <Image
                   src={ option.selectedImageSrc }
                   width={ option.imageSize.width }
@@ -151,12 +160,12 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
                 />
               </div>
             </div>
-            : null
+          )
         }
         {
           option.iconProps
-            ? <div className='ms-ChoiceField-innerField'>
-              <div className={ css('ms-ChoiceField-iconWrapper') }>
+            ? <div className={ css('ms-ChoiceField-innerField', styles.innerField) }>
+              <div className={ css('ms-ChoiceField-iconWrapper', styles.iconWrapper) }>
                 <Icon { ...option.iconProps } />
               </div>
             </div>
@@ -164,11 +173,14 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
         }
         {
           option.imageSrc || option.iconProps
-            ? <div className='ms-ChoiceField-labelWrapper'>
-              <i className='ms-ChoiceField-icon ms-Icon ms-Icon--CheckMark' />
+            ? (
+              <div className={ css('ms-ChoiceField-labelWrapper', styles.labelWrapper) }>
+                <Icon className={ css('ms-ChoiceField-icon', styles.icon) } iconName='CheckMark' />
+                <span id={ `${this._labelId}-${option.key}` } className='ms-Label'>{ option.text }</span>
+              </div>
+            ) : (
               <span id={ `${this._labelId}-${option.key}` } className='ms-Label'>{ option.text }</span>
-            </div>
-            : <span id={ `${this._labelId}-${option.key}` } className='ms-Label'>{ option.text }</span>
+            )
         }
       </label>
     );
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss
index 7276b54a736831..27decc62b50658 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss
@@ -1,108 +1,107 @@
 @import '../../common/common';
 
-:global {
-  .ms-ColorPicker {
-    position: relative;
-    max-width: 300px;
+.root {
+  position: relative;
+  max-width: 300px;
+}
+
+.panel {
+  padding: 16px;
+}
+
+.colorRect {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.rectContainer {
+  position: relative;
+}
+
+.capture {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(255,0,0,.1);
+}
+
+.rectContainer.rectContainerIsAdjusting .capture {
+  position: fixed;
+}
+
+.thumb {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border: 1px solid rgba(255,255,255,.8);
+  border-radius: 50%;
+  box-shadow: 0 0 15px -5px black;
+  transform: translate(-50%, -50%);
+
+  &.thumbIsSlider {
+    top: 50%;
   }
-
-  .ms-ColorPicker-panel {
-    padding: 16px;
-  }
-
-  .ms-ColorPicker-colorRect {
-    position: relative;
-    margin-bottom: 10px;
-  }
-
-  .ms-ColorPicker-rectContainer {
-    position: relative;
-  }
-
-  .ms-ColorPicker-capture {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    background: rgba(255,0,0,.1);
-  }
-
-  .ms-ColorPicker-rectContainer.is-adjusting .ms-ColorPicker-capture {
-    position: fixed;
+}
+
+.light {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: linear-gradient(to right, white 0%, transparent 100%);
+}
+
+.dark {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, transparent 0, #000 100%);
+}
+
+.slider {
+  position: relative;
+  height: 20px;
+  margin-bottom: 5px;
+  border: 1px solid $ms-color-neutralLight;
+  box-sizing: border-box;
+
+  &.colorSliderIsHue {
+    background: linear-gradient(to left,red 0,#f09 10%,#cd00ff 20%,#3200ff 30%,#06f 40%,#00fffd 50%,#0f6 60%,#35ff00 70%,#cdff00 80%,#f90 90%,red 100%);
   }
 
-  .ms-ColorPicker-thumb {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    background: white;
-    border: 1px solid rgba(255,255,255,.8);
-    border-radius: 50%;
-    box-shadow: 0 0 15px -5px black;
-    transform: translate(-50%, -50%);
-
-    &.is-slider {
-      top: 50%;
-    }
+  &.colorSliderIsAlpha {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==);
   }
-
-  .ms-ColorPicker-light {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: linear-gradient(to right, white 0%, transparent 100%);
-  }
-
-  .ms-ColorPicker-dark {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: linear-gradient(to bottom, transparent 0, #000 100%);
-  }
-
-  .ms-ColorPicker-slider {
-    position: relative;
-    height: 20px;
-    margin-bottom: 5px;
-    border: 1px solid $ms-color-neutralLight;
-    box-sizing: border-box;
-
-    &.is-hue {
-      background: linear-gradient(to left,red 0,#f09 10%,#cd00ff 20%,#3200ff 30%,#06f 40%,#00fffd 50%,#0f6 60%,#35ff00 70%,#cdff00 80%,#f90 90%,red 100%);
-    }
-
-    &.is-alpha {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==);
-    }
-
-  }
-  .ms-ColorPicker-sliderOverlay {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-
-  .ms-ColorPicker-input {
-    width: 100%;
-    border: none;
-    box-sizing: border-box;
-    height: 30px;
-  }
-
-  .ms-ColorPicker-input.ms-TextField {
+}
+
+.sliderOverlay {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.input {
+  width: 100%;
+  border: none;
+  box-sizing: border-box;
+  height: 30px;
+
+  &:global(.ms-TextField) {
     padding-right: 2px;
   }
 
-  .ms-ColorPicker-input .ms-TextField-field {
+  .input &:global(.ms-TextField-field) {
     min-width: auto;
     padding: 5px;
   }
-}
\ No newline at end of file
+}
+
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
index 33aa4eb809821e..66d2600906c3a4 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { autobind } from '../../Utilities';
+import { autobind, css } from '../../Utilities';
 import { IColorPickerProps } from './ColorPicker.Props';
 import { TextField } from '../../TextField';
 import { ColorRectangle } from './ColorRectangle';
@@ -12,7 +12,7 @@ import {
   updateH,
   updateSV
 } from './colors';
-import './ColorPicker.scss';
+import styles from './ColorPicker.scss';
 
 export interface IColorPickerState {
   isOpen: boolean;
@@ -50,11 +50,11 @@ export class ColorPicker extends React.Component<IColorPickerProps, IColorPicker
     let { color } = this.state;
 
     return (
-      <div className='ms-ColorPicker'>
-        <div className='ms-ColorPicker-panel'>
+      <div className={ css('ms-ColorPicker', styles.root) }>
+        <div className={ css('ms-ColorPicker-panel', styles.panel) }>
           <ColorRectangle color={ color } onSVChanged={ this._onSVChanged } />
           <ColorSlider
-            className='is-hue'
+            className={ css('is-hue', styles.colorSliderIsHue) }
             minValue={ 0 }
             maxValue={ MAX_COLOR_HUE }
             initialValue={ color.h }
@@ -62,7 +62,7 @@ export class ColorPicker extends React.Component<IColorPickerProps, IColorPicker
           />
           { !this.props.alphaSliderHidden && (
             <ColorSlider
-              className='is-alpha'
+              className={ css('is-alpha', styles.colorSliderIsAlpha) }
               overlayStyle={ { background: `linear-gradient(to right, transparent 0, ${color.str} 100%)` } }
               minValue={ 0 }
               maxValue={ 100 }
@@ -82,12 +82,26 @@ export class ColorPicker extends React.Component<IColorPickerProps, IColorPicker
             </thead>
             <tbody>
               <tr>
-                <td><TextField className='ms-ColorPicker-input' value={ color.hex } /></td>
-                <td style={ { width: '18%' } }><TextField className='ms-ColorPicker-input' value={ String(color.r) } /></td>
-                <td style={ { width: '18%' } }><TextField className='ms-ColorPicker-input' value={ String(color.g) } /></td>
-                <td style={ { width: '18%' } }><TextField className='ms-ColorPicker-input' value={ String(color.b) } /></td>
+                <td>
+                  <TextField className={ css('ms-ColorPicker-input', styles.input) } value={ color.hex } />
+                </td>
+                <td style={ { width: '18%' } }>
+                  <TextField
+                    className={ css('ms-ColorPicker-input', styles.input) }
+                    value={ String(color.r) }
+                  />
+                </td>
+                <td style={ { width: '18%' } }>
+                  <TextField className={ css('ms-ColorPicker-input', styles.input) } value={ String(color.g) } />
+                </td>
+                <td style={ { width: '18%' } }>
+                  <TextField className={ css('ms-ColorPicker-input', styles.input) } value={ String(color.b) } />
+                </td>
                 { !this.props.alphaSliderHidden && (
-                  <td style={ { width: '18%' } }><TextField className='ms-ColorPicker-input' value={ String(color.a) } /></td>) }
+                  <td style={ { width: '18%' } }>
+                    <TextField className={ css('ms-ColorPicker-input', styles.input) } value={ String(color.a) } />
+                  </td>
+                ) }
               </tr>
             </tbody>
           </table>
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
index cc1fe159e43970..fd9b919ad9d2a0 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   EventGroup,
   assign,
-  autobind
+  autobind,
+  css
 } from '../../Utilities';
 import {
   IColor,
@@ -11,6 +12,7 @@ import {
   getFullColorString,
   hsv2hex
 } from './colors';
+import styles from './ColorPicker.scss';
 
 export interface IColorRectangleProps {
   color: IColor;
@@ -71,10 +73,10 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     let { color, fullColorString } = this.state;
 
     return (
-      <div ref='root' className='ms-ColorPicker-colorRect' style={ { minWidth: minSize, minHeight: minSize, backgroundColor: fullColorString } } onMouseDown={ this._onMouseDown }>
-        <div className='ms-ColorPicker-light' />
-        <div className='ms-ColorPicker-dark' />
-        <div className='ms-ColorPicker-thumb' style={ { left: color.s + '%', top: (MAX_COLOR_VALUE - color.v) + '%', backgroundColor: color.str } } />
+      <div ref='root' className={ css('ms-ColorPicker-colorRect', styles.colorRect) } style={ { minWidth: minSize, minHeight: minSize, backgroundColor: fullColorString } } onMouseDown={ this._onMouseDown }>
+        <div className={ css('ms-ColorPicker-light', styles.light) } />
+        <div className={ css('ms-ColorPicker-dark', styles.dark) } />
+        <div className={ css('ms-ColorPicker-thumb', styles.thumb) } style={ { left: color.s + '%', top: (MAX_COLOR_VALUE - color.v) + '%', backgroundColor: color.str } } />
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
index 9be53e0f781c64..97d002896244d2 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
@@ -4,6 +4,7 @@ import {
   autobind,
   css
 } from '../../Utilities';
+import styles from './ColorPicker.scss';
 
 export interface IColorSliderProps {
   minValue?: number;
@@ -65,12 +66,12 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     return (
       <div
         ref='root'
-        className={ css('ms-ColorPicker-slider', className, {
+        className={ css('ms-ColorPicker-slider', styles.slider, className, {
           'is-adjusting': isAdjusting
         }) }
         onMouseDown={ this._onMouseDown }>
-        <div className='ms-ColorPicker-sliderOverlay' style={ overlayStyle } />
-        <div className='ms-ColorPicker-thumb is-slider' style={ { left: currentPercentage + '%' } } />
+        <div className={ css('ms-ColorPicker-sliderOverlay', styles.sliderOverlay) } style={ overlayStyle } />
+        <div className={ css('ms-ColorPicker-thumb is-slider', styles.thumb, styles.thumbIsSlider) } style={ { left: currentPercentage + '%' } } />
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss
index de6ebfe9e9c0d8..f083f924d8ddd8 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss
@@ -37,335 +37,296 @@ $SearchBox-iconSize: 16px;
 $SearchBox-sidePadding: 8px; // padding in input on left and right sides without icons
 
 @mixin highContrastBorder($color) {
-    @include border-left(1px, solid, $color);
-    @include border-right(1px, solid, $color);
-}
-
-:global {
-  .ms-CommandBar {
-    @include ms-font-m;
-    color: $ms-color-neutralPrimary;
-
-    position: relative;
-    background-color: $ms-color-neutralLighter;
-    height: $CommandBar-height;
-    white-space: nowrap;
-    user-select: none;
-  }
+  position: relative;
 
-  .ms-CommandBar-primaryCommands {
+  &::after {
+    content: '';
     position: absolute;
-    overflow: hidden;
-    display: inline;
-    vertical-align: top;
-    line-height: $CommandBar-height;
-    max-width: 100%;
-    margin: 0 20px;
-  }
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 
-  .ms-CommandBar-sideCommands {
-    position: absolute;
-    @include right(0px);
-    @include text-align(right);
-    @include padding-right(20px);
+    // Make the content not respond to mouse/touch event. Reference: https://css-tricks.com/almanac/properties/p/pointer-events/
+    pointer-events: none;
+
+    // Add focus border with $color
+    border: 1px solid $color;
   }
+}
 
-  // Command Bar Item
-  .ms-CommandBarItem {
-    display: inline-block;
-    color: $ms-color-themePrimary;
-    height: $CommandBarItem-height;
-    outline: transparent;
-    vertical-align: top;
-    padding: 0 4px;
-
-    &:hover {
-      background-color: $ms-color-neutralLight;
-      color: $ms-color-neutralPrimary;
-    }
+.root {
+  @include ms-font-m;
+  color: $ms-color-neutralPrimary;
 
-    @media screen and (-ms-high-contrast: active) {
-      @include highContrastBorder($ms-color-black);
-      height: 38px;
-      outline: none;
-    }
+  position: relative;
+  background-color: $ms-color-neutralLighter;
+  height: $CommandBar-height;
+  white-space: nowrap;
+  user-select: none;
+}
 
-    @media screen and (-ms-high-contrast: black-on-white) {
-      @include highContrastBorder($ms-color-white);
-      height: 38px;
-      outline: none;
-    }
-  }
+.primaryCommands {
+  position: absolute;
+  overflow: hidden;
+  display: inline;
+  vertical-align: top;
+  line-height: $CommandBar-height;
+  max-width: 100%;
+  margin: 0 20px;
+}
 
-  .ms-CommandBarItem-chevronDown,
-  .ms-CommandBarItem-commandText {
-    display: inline-block;
-    padding: 0 4px;
-    vertical-align: top;
-  }
+.sideCommands {
+  position: absolute;
+  @include right(0px);
+  @include text-align(right);
+  @include padding-right(20px);
+}
 
-  @mixin CommandBarItem-text {
-    @include focus-border(2px);
-    @include ms-font-m;
+// Command Bar Item
+.item {
+  display: inline-block;
+  color: $ms-color-themePrimary;
+  height: $CommandBarItem-height;
+  outline: transparent;
+  vertical-align: top;
+  margin: 0 4px;
+
+  &:hover {
+    background-color: $ms-color-neutralLight;
     color: $ms-color-neutralPrimary;
-
-    position: relative;
-    background: none;
-    border: none;
-    line-height: $CommandBarItem-height;
-    min-width: 20px;
-    text-align: center;
-    padding: 0 4px;
-    display: block;
-    height: 100%;
-
-    &.ms-CommandBarItem--noName {
-      padding: 0 8px;
-    }
   }
+}
 
-  .ms-CommandBarItem-text {
-    @include CommandBarItem-text;
+.itemChevronDown,
+.itemCommandText {
+  display: inline-block;
+  padding: 0 4px;
+  vertical-align: top;
+}
+
+@mixin CommandBarItem-text {
+  @include focus-border(2px);
+  @include ms-font-m;
+  color: $ms-color-neutralPrimary;
+
+  position: relative;
+  background: none;
+  border: none;
+  line-height: $CommandBarItem-height;
+  min-width: 20px;
+  text-align: center;
+  padding: 0 4px;
+  display: block;
+  height: 100%;
+
+  &.itemLinkIsNoName {
+    padding: 0 8px;
   }
+}
 
-  .ms-CommandBarItem-link {
-    @include CommandBarItem-text;
-    cursor: pointer;
+.itemText {
+  @include CommandBarItem-text;
+}
 
-    &:hover,
-    &.is-expanded {
-      @media screen and (-ms-high-contrast: active) {
+.itemLink {
+  @include CommandBarItem-text;
+  cursor: pointer;
+  &:hover,
+  &.itemLinkIsExpanded {
+    @media screen and (-ms-high-contrast: active) {
         @include highContrastBorder($ms-color-white);
       }
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        @include highContrastBorder($ms-color-black);
-      }
+    @media screen and (-ms-high-contrast: black-on-white) {
+      @include highContrastBorder($ms-color-black);
     }
+  }
 
-    &:hover:not([disabled]) {
-      color: $ms-color-neutralDark;
-      background-color: $ms-color-neutralLight;
-
-      .ms-CommandBarItem-icon {
-        color: $ms-color-themeDark;
-      }
-
-      .ms-CommandBarItem-chevronDown {
-        color: $ms-color-neutralPrimaryAlt;
-      }
+  &:hover:not([disabled]) {
+    color: $ms-color-neutralDark;
+    background-color: $ms-color-neutralLight;
 
-      .ms-CommandBarItem-overflow {
-        color: $ms-color-neutralDark;
-      }
+    .itemIcon {
+      color: $ms-color-themeDark;
     }
 
-    &.is-expanded {
-      background-color: $ms-color-neutralQuaternaryAlt;
-      color: $ms-color-black;
+    .itemChevronDown {
+      color: $ms-color-neutralPrimaryAlt;
+    }
 
-      .ms-CommandBarItem-icon {
-        color: $ms-color-themeDarker;
-      }
+    .itemOverflow {
+      color: $ms-color-neutralDark;
+    }
+  }
 
-      .ms-CommandBarItem-chevronDown {
-        color: $ms-color-neutralDark;
-      }
+  &.itemLinkIsExpanded {
+    background-color: $ms-color-neutralQuaternaryAlt;
+    color: $ms-color-black;
 
-      .ms-CommandBarItem-overflow {
-        color: $ms-color-black;
-      }
+    .itemIcon {
+      color: $ms-color-themeDarker;
     }
 
-    &.is-expanded:hover {
-      background-color: $ms-color-neutralQuaternary;
+    .itemChevronDown {
+      color: $ms-color-neutralDark;
     }
 
-    &[disabled] {
-      color: $ms-color-neutralTertiaryAlt;
-      cursor: default;
-      pointer-events: none;
-      .ms-CommandBarItem-icon {
-        color: $ms-color-neutralTertiaryAlt;
-      }
+    .itemOverflow {
+      color: $ms-color-black;
     }
   }
 
-  .ms-CommandBarItem-icon {
-    font-size: $CommandBarItem-fontSize;
-    padding: 0 4px;
-  }
-
-  .ms-CommandBarItem-iconColor {
-    color: $ms-color-themeDarkAlt;
-  }
-
-  .ms-CommandBarItem-chevronDown  {
-    color: $ms-color-neutralSecondary;
-    font-size: $CommandBarItem-chevronDown-fontSize;
+  &.itemLinkIsExpanded:hover {
+    background-color: $ms-color-neutralQuaternary;
   }
 
-  .ms-CommandBarItem-overflow {
-    font-size: $CommandBarItem-overflow-fontSize;
-    color: $ms-color-neutralPrimary;
-    padding: 0 7px;
+  &[disabled] {
+    color: $ms-color-neutralTertiaryAlt;
+    cursor: default;
+    pointer-events: none;
+    .itemIcon {
+      color: $ms-color-neutralTertiaryAlt;
+    }
   }
+}
 
-  // CommandBarSearch needs to replaced with SearchBox component, and hence following styles revisited/cleaned.
-  .ms-CommandBarSearch {
-    @include float(left);
-    width: 208px;
-    max-width: 208px;
-    background-color: $ms-color-white;
-    color: $ms-color-neutralPrimary;
-    height: $SearchBox-height;
-    position: relative;
-    box-sizing: border-box;
-    border-color: transparent; // give a base state for animation
-    @include border-right(1px, solid, $ms-color-neutralLight);
+.itemIcon {
+  font-size: $CommandBarItem-fontSize;
+  padding: 0 4px;
+}
 
-    @media screen and (-ms-high-contrast: active) {
-      @include border-right(1px, solid, $ms-color-white);
-      z-index: 10;
-    }
+.itemIconColor {
+  color: $ms-color-themeDarkAlt;
+}
 
-    @media screen and (-ms-high-contrast: black-on-white) {
-      @include border-right(1px, solid, $ms-color-black);
-    }
+.itemChevronDown  {
+  color: $ms-color-neutralSecondary;
+  font-size: $CommandBarItem-chevronDown-fontSize;
+}
 
-    &:before {
-      position: absolute;
-      content: ' ';
-      right: 0;
-      bottom: 0;
-      left: 0;
-      margin: 0 8px;
-      border-bottom: 1px solid $ms-color-neutralLight;
-    }
+.itemOverflow {
+  font-size: $CommandBarItem-overflow-fontSize;
+  color: $ms-color-neutralPrimary;
+  padding: 0 7px;
+}
 
-    &:hover {
-      color: $ms-color-themePrimary;
+// CommandBarSearch needs to replaced with SearchBox component, and hence following styles revisited/cleaned.
+.search {
+  @include float(left);
+  width: 208px;
+  max-width: 208px;
+  background-color: $ms-color-white;
+  color: $ms-color-neutralPrimary;
+  height: $SearchBox-height;
+  position: relative;
+  box-sizing: border-box;
+  border-color: transparent; // give a base state for animation
+  @include border-right(1px, solid, $ms-color-neutralLight);
+
+  @media screen and (-ms-high-contrast: active) {
+    @include border-right(1px, solid, $ms-color-white);
+    z-index: 10;
+  }
 
-      @media screen and (-ms-high-contrast: active) {
-        @include highContrastBorder($ms-color-white);
-      }
+  @media screen and (-ms-high-contrast: black-on-white) {
+    @include border-right(1px, solid, $ms-color-black);
+  }
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        @include highContrastBorder($ms-color-black);
-      }
-    }
+  &:before {
+    position: absolute;
+    content: ' ';
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0 8px;
+    border-bottom: 1px solid $ms-color-neutralLight;
   }
 
-  .ms-CommandBarSearch-input {
-    height: $SearchBox-height;
-    // Due to a bug in IE9, we have to use a transparent left border instead of left padding
-    padding: $SearchBox-sidePadding $SearchBox-sidePadding $SearchBox-sidePadding 0;
-    border: none;
-    @include border-left($SearchBox-height + 2, solid, transparent);
-    background-color: transparent;
-    width: 100%;
-    box-sizing: border-box;
-    outline: none;
-    cursor: pointer;
-    font-size: $ms-font-size-m;
+  &:hover {
+    color: $ms-color-themePrimary;
 
     @media screen and (-ms-high-contrast: active) {
-      @include border-left($SearchBox-height, solid, $ms-color-black);
+      @include highContrastBorder($ms-color-white);
     }
 
     @media screen and (-ms-high-contrast: black-on-white) {
-      @include border-left($SearchBox-height, solid, $ms-color-white);
-    }
-
-    // remove default iOS styles on input boxes
-    -webkit-appearance: none;
-    -webkit-border-radius: 0;
-
-    // hide IE's X button for clearing the input (we have our own)
-    &::-ms-clear {
-      display: none;
+      @include highContrastBorder($ms-color-black);
     }
   }
+}
 
-  // default styles for icons, show the search icon and hide X (and arrow) until focused
-  .ms-CommandBarSearch-iconSearchWrapper {
-    display: block;
+.searchInput {
+  height: $SearchBox-height;
+  // Due to a bug in IE9, we have to use a transparent left border instead of left padding
+  padding: $SearchBox-sidePadding $SearchBox-sidePadding $SearchBox-sidePadding 0;
+  border: none;
+  @include border-left($SearchBox-height + 2, solid, transparent);
+  background-color: transparent;
+  width: 100%;
+  box-sizing: border-box;
+  outline: none;
+  cursor: pointer;
+  font-size: $ms-font-size-m;
+
+  @media screen and (-ms-high-contrast: active) {
+    @include border-left($SearchBox-height, solid, $ms-color-black);
   }
 
-  .ms-CommandBarSearch-iconArrowWrapper {
-    display: none;
+  @media screen and (-ms-high-contrast: black-on-white) {
+    @include border-left($SearchBox-height, solid, $ms-color-white);
   }
 
-  .ms-CommandBarSearch-iconSearchWrapper,
-  .ms-CommandBarSearch-iconArrowWrapper {
-    top: 0;
-    @include padding-left(17px);
-    @include padding-right(8px);
-  }
+  // remove default iOS styles on input boxes
+  -webkit-appearance: none;
+  -webkit-border-radius: 0;
 
-  .ms-CommandBarSearch-iconClearWrapper {
+  // hide IE's X button for clearing the input (we have our own)
+  &::-ms-clear {
     display: none;
-    top: 1px;
-    @include right(0px);
-    z-index: $ms-zIndex-front;
   }
+}
 
-  //== State: Puts search in an active state
-  //
-  .ms-CommandBarSearch.is-active {
-    background-color: $ms-color-themeLight;
-    color: $ms-color-black;
-
-    &:hover {
-      background-color: $ms-color-themeLight;
-      color: $ms-color-black;
-    }
-
-    .ms-CommandBarSearch-input {
-      cursor: text;
-      @include padding-right($SearchBox-height); // leave room for the X
-      @include border-left-width($SearchBox-sidePadding);
-    }
-
-    &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
-      @include border-left-width($SearchBox-height); // leave room for arrow
-    }
-
-    // when focused, remove the search icon and possibly show arrow icon
-    & .ms-CommandBarSearch-iconSearchWrapper {
-      display: none;
-    }
+// default styles for icons, show the search icon and hide X (and arrow) until focused
+.searchIconSearchWrapper {
+  display: block;
+}
 
-    &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
-      display: block;
-    }
+.searchIconArrowWrapper {
+  display: none;
+}
 
-    .ms-CommandBarSearch-input {
-      @include padding-right($SearchBox-height);
-    }
+.searchIconSearchWrapper,
+.searchIconArrowWrapper {
+  top: 0;
+  @include padding-left(17px);
+  @include padding-right(8px);
+}
 
-    .ms-CommandBarSearch-iconClearWrapper {
-      display: block;
-    }
-  }
+.searchIconClearWrapper {
+  display: none;
+  top: 1px;
+  @include right(0px);
+  z-index: $ms-zIndex-front;
+}
 
-  .ms-CommandBarSearch-iconWrapper {
-    height: $SearchBox-height;
-    line-height: $SearchBox-height;
-    cursor: pointer;
-    position: absolute;
-    text-align: center;
-  }
+.searchIconWrapper {
+  height: $SearchBox-height;
+  line-height: $SearchBox-height;
+  cursor: pointer;
+  position: absolute;
+  text-align: center;
+}
 
-  // New rules
-  .ms-CommandBarSearch .ms-Icon:before {
-    font-size: $SearchBox-iconSize;
-    color: $ms-color-themePrimary;
-  }
+// New rules
+.search :global(.ms-Icon:before) {
+  font-size: $SearchBox-iconSize;
+  color: $ms-color-themePrimary;
+}
 
-  .ms-CommandBarSearch-input,
-  .ms-CommandBarSearch-input::-webkit-input-placeholder {
-    @include ms-baseFont;
-    font-size: $ms-font-size-m;
-  }
+.searchInput,
+.searchInput::-webkit-input-placeholder {
+  @include ms-baseFont;
+  font-size: $ms-font-size-m;
 }
+
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
index a026dcaf2e386d..f8e2f8478f5eb6 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
@@ -17,7 +17,7 @@ import {
   IconName,
   IIconProps
 } from '../../Icon';
-import './CommandBar.scss';
+import styles from './CommandBar.scss';
 
 const OVERFLOW_KEY = 'overflow';
 const OVERFLOW_WIDTH = 41.5;
@@ -92,42 +92,51 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
 
     if (isSearchBoxVisible) {
       searchBox = (
-        <div className='ms-CommandBarSearch' ref='searchSurface'>
-          <input className='ms-CommandBarSearch-input' type='text' placeholder={ searchPlaceholderText } />
-          <div className='ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper'>
-            <i className='ms-Icon ms-Icon--Search'></i>
+        <div className={ css('ms-CommandBarSearch', styles.search) } ref='searchSurface'>
+          <input className={ css('ms-CommandBarSearch-input', styles.searchInput) } type='text' placeholder={ searchPlaceholderText } />
+          <div className={ css(
+            'ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper',
+            styles.searchIconWrapper, styles.searchIconSearchWrapper) }>
+            <i className={ css('ms-Icon ms-Icon--Search') }></i>
           </div>
-          <div className='ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s'>
-            <i className='ms-Icon ms-Icon--Cancel'></i>
+          <div className={ css(
+            'ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s',
+            styles.searchIconWrapper,
+            styles.searchIconClearWrapper
+          ) }>
+            <i className={ css('ms-Icon ms-Icon--Cancel') }></i>
           </div>
         </div>
       );
     }
 
     return (
-      <div className={ css('ms-CommandBar', className) } ref='commandBarRegion'>
+      <div className={ css('ms-CommandBar', styles.root, className) } ref='commandBarRegion'>
         { searchBox }
-        <FocusZone ref='focusZone' direction={ FocusZoneDirection.horizontal } rootProps={ { role: 'menubar' } }>
-          <div className='ms-CommandBar-primaryCommands' ref='commandSurface'>
+        <FocusZone ref='focusZone' direction={ FocusZoneDirection.horizontal } role='menubar' >
+          <div className={ css('ms-CommandBar-primaryCommands', styles.primaryCommands) } ref='commandSurface'>
             { renderedItems.map((item, index) => (
               this._renderItemInCommandBar(item, index, expandedMenuItemKey)
             )).concat((renderedOverflowItems && renderedOverflowItems.length) ? [
-              <div className='ms-CommandBarItem' key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
+              <div className={ css('ms-CommandBarItem', styles.item) } key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
                 <button
+                  type='button'
                   id={ this._id + OVERFLOW_KEY }
-                  className={ css('ms-CommandBarItem-link', { 'is-expanded': (expandedMenuItemKey === OVERFLOW_KEY) }) }
+                  className={ css('ms-CommandBarItem-link', styles.itemLink, {
+                    ['is-expanded ' + styles.itemLinkIsExpanded]: (expandedMenuItemKey === OVERFLOW_KEY)
+                  }) }
                   onClick={ this._onOverflowClick }
                   role='menuitem'
                   aria-label={ this.props.elipisisAriaLabel || '' }
                   aria-haspopup={ true }
                   data-automation-id='commandBarOverflow'
                 >
-                  <i className='ms-CommandBarItem-overflow ms-Icon ms-Icon--More' />
+                  <i className={ css('ms-CommandBarItem-overflow ms-Icon ms-Icon--More', styles.itemOverflow) } />
                 </button>
               </div>
             ] : []) }
           </div>
-          <div className='ms-CommandBar-sideCommands' ref='farCommandSurface'>
+          <div className={ css('ms-CommandBar-sideCommands', styles.sideCommands) } ref='farCommandSurface'>
             { renderedFarItems.map((item, index) => (
               this._renderItemInCommandBar(item, index, expandedMenuItemKey, true)
             )) }
@@ -135,7 +144,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
         </FocusZone>
         { (contextualMenuProps) ?
           (<ContextualMenu
-            className='ms-CommandBar-menuHost'
+            className={ css('ms-CommandBar-menuHost') }
             isBeakVisible={ true }
             directionalHint={ DirectionalHint.bottomAutoEdge }
             { ...contextualMenuProps }
@@ -154,17 +163,20 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
 
   private _renderItemInCommandBar(item: IContextualMenuItem, index: number, expandedMenuItemKey: string, isFarItem?: boolean) {
     const itemKey = item.key || String(index);
-    const className = css(item.onClick ? 'ms-CommandBarItem-link' : 'ms-CommandBarItem-text', !item.name && 'ms-CommandBarItem--noName');
-    const classNameValue = css(className, { 'is-expanded': (expandedMenuItemKey === item.key) });
+    const className = css(
+      item.onClick ? ('ms-CommandBarItem-link ' + styles.itemLink) : ('ms-CommandBarItem-text ' + styles.itemText),
+      !item.name && ('ms-CommandBarItem--noName ' + styles.itemLinkIsNoName),
+      (expandedMenuItemKey === item.key) && ('is-expanded ' + styles.itemLinkIsExpanded)
+    );
     let hasIcon = !!item.icon || !!item.iconProps;
 
-    return <div className={ css('ms-CommandBarItem', item.className) } key={ itemKey } ref={ itemKey }>
+    return <div className={ css('ms-CommandBarItem', styles.item, item.className) } key={ itemKey } ref={ itemKey }>
       { (() => {
         if (item.onClick || hasSubmenuItems(item)) {
           return <button
             { ...getNativeProps(item, buttonProperties) }
             id={ this._id + item.key }
-            className={ classNameValue }
+            className={ className }
             onClick={ (ev) => this._onItemClick(ev, item) }
             data-command-key={ index }
             aria-haspopup={ hasSubmenuItems(item) }
@@ -172,21 +184,27 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
             aria-label={ item.ariaLabel || item.name }
           >
             { (hasIcon) ? this._renderIcon(item) : (null) }
-            { (!!item.name) && <span className='ms-CommandBarItem-commandText'>{ item.name }</span> }
+            { (!!item.name) && (
+              <span
+                className={ css('ms-CommandBarItem-commandText', styles.itemCommandText) }
+              >
+                { item.name }
+              </span>
+            ) }
             { hasSubmenuItems(item) ? (
-              <i className='ms-CommandBarItem-chevronDown ms-Icon ms-Icon--ChevronDown' />
+              <i className={ css('ms-CommandBarItem-chevronDown ms-Icon ms-Icon--ChevronDown', styles.itemChevronDown) } />
             ) : (null) }
           </button>;
         } else {
           return <div
             { ...getNativeProps(item, divProperties) }
             id={ this._id + item.key }
-            className={ classNameValue }
+            className={ className }
             data-command-key={ index }
             aria-haspopup={ hasSubmenuItems(item) }
           >
             { (hasIcon) ? this._renderIcon(item) : (null) }
-            <span className='ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular' aria-hidden='true' role='presentation'>{ item.name }</span>
+            <span className={ css('ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular', styles.itemCommandText) } aria-hidden='true' role='presentation'>{ item.name }</span>
           </div>;
         }
       })() }
@@ -199,8 +217,8 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
       iconName: item.icon as IconName
     };
     // Use the default icon color for the known icon names
-    let iconColorClassName = iconProps.iconName === 'None' ? '' : 'ms-CommandBarItem-iconColor';
-    let iconClassName = css('ms-CommandBarItem-icon', iconColorClassName, iconProps.className);
+    let iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-CommandBarItem-iconColor ' + styles.itemIconColor);
+    let iconClassName = css('ms-CommandBarItem-icon', styles.itemIcon, iconColorClassName, iconProps.className);
 
     return <Icon { ...iconProps } className={ iconClassName } />;
   }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts
index 76efa4cfb7c767..1ee025be1c5980 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts
@@ -246,6 +246,12 @@ export interface IContextualMenuItem {
    */
   className?: string;
 
+  /**
+   * Additional styles to apply to the menu item
+   * @defaultvalue undefined
+   */
+  style?: React.CSSProperties;
+
   /**
    * Optional accessibility label (aria-label) attribute that will be stamped on to the element.
    * If none is specified, the arai-label attribute will contain the item name
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.scss b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.scss
index 7a06ea74f43431..db294d29def7db 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.scss
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.scss
@@ -6,146 +6,144 @@ $ContextualMenu-expandedItemBackground: $ms-color-neutralQuaternaryAlt;
 $ContextualMenu-itemHeight: 36px;
 $ContextualMenu-iconWidth: 14px;
 
-:global {
-  .ms-ContextualMenu {
-    background-color: $ContextualMenu-background;
-    min-width: 180px;
-  }
+.root {
+  background-color: $ContextualMenu-background;
+  min-width: 180px;
+}
 
-  .ms-ContextualMenu-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    line-height: 0;
-  }
+.list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+}
 
-  .ms-ContextualMenu-item {
-    @include ms-font-m;
-    color: $ms-color-neutralPrimary;
-    height: $ContextualMenu-itemHeight;
-    position: relative;
-    box-sizing: border-box;
-  }
+.item {
+  @include ms-font-m;
+  color: $ms-color-neutralPrimary;
+  height: $ContextualMenu-itemHeight;
+  position: relative;
+  box-sizing: border-box;
+}
 
-  .ms-ContextualMenu-link {
-    @include focus-border();
-
-    font: inherit;
-    color: inherit;
-    background: none;
-    border: none;
-    width: 100%;
-    height: $ContextualMenu-itemHeight;
-    line-height: $ContextualMenu-itemHeight;
-    display: block;
-    cursor: pointer;
-    padding: 0px 6px;
-    @include text-align(left);
-
-    &:hover:not([disabled]) {
-      background: $ContextualMenu-itemHover;
-    }
-    &.is-disabled,
-    &[disabled] {
+.link {
+  @include focus-border();
+
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  width: 100%;
+  height: $ContextualMenu-itemHeight;
+  line-height: $ContextualMenu-itemHeight;
+  display: block;
+  cursor: pointer;
+  padding: 0px 6px;
+  @include text-align(left);
+
+  &:hover:not([disabled]) {
+    background: $ContextualMenu-itemHover;
+  }
+  &.isDisabled,
+  &[disabled] {
+    color: $ms-color-neutralTertiaryAlt;
+    cursor: default;
+    pointer-events: none;
+    .icon {
       color: $ms-color-neutralTertiaryAlt;
-      cursor: default;
-      pointer-events: none;
-      .ms-ContextualMenu-icon {
-        color: $ms-color-neutralTertiaryAlt;
-      }
-    }
-
-    :global(.is-focusVisible) &:focus {
-      background: $ContextualMenu-itemHover;
     }
+  }
 
-    &.is-expanded,
-    &.is-expanded:hover {
-      background: $ContextualMenu-expandedItemBackground;
-      color: $ms-color-black;
-      font-weight: $ms-font-weight-semibold;
-    }
+  :global(.is-focusVisible) &:focus {
+    background: $ContextualMenu-itemHover;
   }
 
-  .ms-ContextualMenu-header {
-    @include focus-border();
-    @include ms-font-s;
+  &.isExpanded,
+  &.isExpanded:hover {
+    background: $ContextualMenu-expandedItemBackground;
+    color: $ms-color-black;
     font-weight: $ms-font-weight-semibold;
-    color: $ms-color-themePrimary;
-    background: none;
-    border: none;
-    height: $ContextualMenu-itemHeight;
-    line-height: $ContextualMenu-itemHeight;
-    cursor: default;
-    padding: 0px 6px;
-    user-select: none;
-    @include text-align(left);
   }
+}
 
-  a.ms-ContextualMenu-link {
-    padding: 0px 6px;
-    text-rendering: auto;
-    color: inherit;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    box-sizing: border-box;
-  }
-  .ms-ContextualMenu-linkContent {
-    white-space: nowrap;
-    height: inherit;
-    display: flex;
-    align-items: center;
-    max-width: 100%;
-  }
+.header {
+  @include focus-border();
+  @include ms-font-s;
+  font-weight: $ms-font-weight-semibold;
+  color: $ms-color-themePrimary;
+  background: none;
+  border: none;
+  height: $ContextualMenu-itemHeight;
+  line-height: $ContextualMenu-itemHeight;
+  cursor: default;
+  padding: 0px 6px;
+  user-select: none;
+  @include text-align(left);
+}
 
-  .ms-ContextualMenu-divider {
-    display: block;
-    height: 1px;
-    background-color: $dividerColor;
-    position: relative;
-  }
+a.link {
+  padding: 0px 6px;
+  text-rendering: auto;
+  color: inherit;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0px;
+  text-shadow: none;
+  box-sizing: border-box;
+}
+.linkContent {
+  white-space: nowrap;
+  height: inherit;
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+}
 
-  .ms-ContextualMenu-icon {
-    display: inline-block;
-    min-height: 1px;
-    max-height: $ContextualMenu-itemHeight;
-    width: $ContextualMenu-iconWidth;
-    margin: 0 4px;
-    vertical-align: middle;
-    flex-shrink: 0;
-  }
+.divider {
+  display: block;
+  height: 1px;
+  background-color: $dividerColor;
+  position: relative;
+}
 
-  .ms-ContextualMenu-iconColor {
-    color: $ms-color-themePrimary;
-  }
+.icon {
+  display: inline-block;
+  min-height: 1px;
+  max-height: $ContextualMenu-itemHeight;
+  width: $ContextualMenu-iconWidth;
+  margin: 0 4px;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
 
-  .ms-ContextualMenu-itemText {
-    margin: 0 4px;
-    vertical-align: middle;
-    display: inline-block;
-    flex-grow: 1;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+.iconColor {
+  color: $ms-color-themePrimary;
+}
 
-  .ms-ContextualMenu-linkText {
-    margin: 0px 4px;
-    display: inline-block;
-    vertical-align: top;
-    white-space: nowrap;
-  }
+.itemText {
+  margin: 0 4px;
+  vertical-align: middle;
+  display: inline-block;
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 
-  .ms-ContextualMenu-submenuIcon {
-    height: $ContextualMenu-itemHeight;
-    line-height: $ContextualMenu-itemHeight;
-    text-align: center;
-    font-size: $ms-icon-size-xs;
-    display: inline-block;
-    vertical-align: middle;
-    flex-shrink: 0;
-  }
+.linkText {
+  margin: 0px 4px;
+  display: inline-block;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.submenuIcon {
+  height: $ContextualMenu-itemHeight;
+  line-height: $ContextualMenu-itemHeight;
+  text-align: center;
+  font-size: $ms-icon-size-xs;
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
 }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index b1a4a98fadedb5..539aaa15ee529e 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -21,7 +21,7 @@ import {
   Icon,
   IIconProps
 } from '../../Icon';
-import './ContextualMenu.scss';
+import styles from './ContextualMenu.scss';
 
 export interface IContextualMenuState {
   expandedMenuItemKey?: string;
@@ -208,14 +208,14 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
           <div ref={ (host: HTMLDivElement) => this._host = host } id={ id } className={ css('ms-ContextualMenu-container', className) }>
             { (items && items.length) ? (
               <FocusZone
-                className={ 'ms-ContextualMenu is-open' }
+                className={ css('ms-ContextualMenu is-open', styles.root) }
                 direction={ arrowDirection }
                 ariaLabelledBy={ labelElementId }
                 ref={ (focusZone) => this._focusZone = focusZone }
-                rootProps={ { role: 'menu' } }
+                role='menu'
               >
                 <ul
-                  className='ms-ContextualMenu-list is-open'
+                  className={ css('ms-ContextualMenu-list is-open', styles.list) }
                   onKeyDown={ this._onKeyDown }
                   aria-label={ ariaLabel } >
                   { items.map((item, index) => (
@@ -265,7 +265,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       role='menuitem'
       title={ title }
       key={ key }
-      className={ css('ms-ContextualMenu-item', className) }>
+      className={ css('ms-ContextualMenu-item', styles.item, className) }>
       { content }
     </li>;
   }
@@ -275,7 +275,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       return <li
         role='separator'
         key={ 'separator-' + index }
-        className={ css('ms-ContextualMenu-divider', className) } />;
+        className={ css('ms-ContextualMenu-divider', styles.divider, className) } />;
     }
     return null;
   }
@@ -292,7 +292,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
   private _renderHeaderMenuItem(item: IContextualMenuItem, index: number, hasCheckmarks: boolean, hasIcons: boolean): React.ReactNode {
     return (
-      <div className='ms-ContextualMenu-header'>
+      <div className={ css('ms-ContextualMenu-header', styles.header) } style={ item.style }>
         { this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons) }
       </div>);
   }
@@ -303,13 +303,17 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         <a
           { ...getNativeProps(item, anchorProperties) }
           href={ item.href }
-          className={ css('ms-ContextualMenu-link', item.isDisabled || item.disabled ? 'is-disabled' : '') }
+          className={ css(
+            'ms-ContextualMenu-link',
+            styles.link,
+            (item.isDisabled || item.disabled) && 'is-disabled') }
           role='menuitem'
+          style={ item.style }
           onClick={ this._onAnchorClick.bind(this, item) }>
           { (hasIcons) ? (
             this._renderIcon(item)
           ) : (null) }
-          <span className='ms-ContextualMenu-linkText'> { item.name } </span>
+          <span className={ css('ms-ContextualMenu-linkText', styles.linkText) }> { item.name } </span>
         </a>
       </div>);
   }
@@ -329,7 +333,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
 
     let itemButtonProperties = {
-      className: css('ms-ContextualMenu-link', { 'is-expanded': (expandedMenuItemKey === item.key) }),
+      className: css('ms-ContextualMenu-link', styles.link, {
+        ['is-expanded ' + styles.isExpanded]: (expandedMenuItemKey === item.key)
+      }),
       onClick: this._onItemClick.bind(this, item),
       onKeyDown: hasSubmenuItems(item) ? this._onItemKeyDown.bind(this, item) : null,
       onMouseEnter: this._onItemMouseEnter.bind(this, item),
@@ -341,7 +347,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       title: item.title,
       'aria-label': ariaLabel,
       'aria-haspopup': hasSubmenuItems(item) ? true : null,
-      'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null
+      'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null,
+      style: item.style,
     };
 
     return React.createElement(
@@ -353,22 +360,22 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   private _renderMenuItemChildren(item: IContextualMenuItem, index: number, hasCheckmarks: boolean, hasIcons: boolean) {
     let isItemChecked: boolean = item.isChecked || item.checked;
     return (
-      <div className='ms-ContextualMenu-linkContent'>
+      <div className={ css('ms-ContextualMenu-linkContent', styles.linkContent) }>
         { (hasCheckmarks) ? (
           <Icon
             iconName={ isItemChecked ? 'CheckMark' : 'CustomIcon' }
-            className={ 'ms-ContextualMenu-icon' }
+            className={ css('ms-ContextualMenu-icon', styles.icon) }
             onClick={ this._onItemClick.bind(this, item) } />
         ) : (null) }
         { (hasIcons) ? (
           this._renderIcon(item)
         ) : (null) }
-        <span className='ms-ContextualMenu-itemText'>{ item.name }</span>
+        <span className={ css('ms-ContextualMenu-itemText', styles.itemText) }>{ item.name }</span>
         { hasSubmenuItems(item) ? (
           <Icon
             iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
             { ...item.submenuIconProps }
-            className={ css('ms-ContextualMenu-submenuIcon', item.submenuIconProps ? item.submenuIconProps.className : '') } />
+            className={ css('ms-ContextualMenu-submenuIcon', styles.submenuIcon, item.submenuIconProps ? item.submenuIconProps.className : '') } />
         ) : (null) }
       </div>
     );
@@ -382,8 +389,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       className: item.icon ? 'ms-Icon--' + item.icon : ''
     };
     // Use the default icon color for the known icon names
-    let iconColorClassName = iconProps.iconName === 'None' ? '' : 'ms-ContextualMenu-iconColor';
-    let iconClassName = css('ms-ContextualMenu-icon', iconColorClassName, iconProps.className);
+    let iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-ContextualMenu-iconColor ' + styles.iconColor);
+    let iconClassName = css('ms-ContextualMenu-icon', styles.icon, iconColorClassName, iconProps.className);
 
     return <Icon { ...iconProps } className={ iconClassName } />;
   }
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss
index bf3bbfa0f50d3e..b7f06ad56cd070 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss
@@ -15,32 +15,31 @@
   @include right(9px);
 }
 
-:global {
-  .ms-DatePicker {
-    @include ms-u-normalize;
-    margin-bottom: 17px;
-
-    .ms-TextField {
-      position: relative;
-
-      input::-ms-clear {
-        display: none;
-      }
-
-      input[readonly] {
-        cursor: pointer;
-      }
-    }
-  }
+.root {
+  @include ms-u-normalize;
+  margin-bottom: 17px;
+}
 
-  // Insert a calendar icon over the date field.
-  .ms-DatePicker-event--with-label {
-    @include ms-DatePicker-event();
-    top: 35px;
+.textField {
+  position: relative;
+
+  input::-ms-clear {
+    display: none;
   }
 
-  .ms-DatePicker-event--without-label {
-    @include ms-DatePicker-event();
-    top: 7px;
+  input[readonly] {
+    cursor: pointer;
   }
 }
+
+// Insert a calendar icon over the date field.
+.eventWithLabel {
+  @include ms-DatePicker-event();
+  top: 35px;
+}
+
+.eventWithoutLabel {
+  @include ms-DatePicker-event();
+  top: 7px;
+}
+
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
index c0ec4330089d50..1d0824ade84e37 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
@@ -15,7 +15,7 @@ import {
   KeyCodes,
   css
 } from '../../Utilities';
-import './DatePicker.scss';
+import styles from './DatePicker.scss';
 
 export interface IDatePickerState {
   /** The currently focused date in the drop down, but not necessarily selected */
@@ -142,14 +142,14 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
   }
 
   public render() {
-    let rootClass = 'ms-DatePicker';
     let { firstDayOfWeek, strings, label, isRequired, ariaLabel, placeholder, allowTextInput } = this.props;
     let { isDatePickerShown, formattedDate, selectedDate, errorMessage } = this.state;
 
     return (
-      <div className={ rootClass } ref='root'>
+      <div className={ css('ms-DatePicker', styles.root) } ref='root'>
         <div ref={ (c): HTMLElement => this._datepicker = c }>
           <TextField
+            className={ styles.textField }
             ariaLabel={ ariaLabel }
             aria-haspopup='true'
             required={ isRequired }
@@ -163,7 +163,8 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
             placeholder={ placeholder }
             iconClass={ css(
               'ms-Icon ms-Icon--Calendar',
-              label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label'
+              label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label',
+              label ? styles.eventWithLabel : styles.eventWithoutLabel
             ) }
             readOnly={ !allowTextInput }
             value={ formattedDate }
@@ -172,14 +173,14 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
         { isDatePickerShown && (
           <Callout
             isBeakVisible={ false }
-            className='ms-DatePicker-callout'
+            className={ css('ms-DatePicker-callout') }
             gapSpace={ 0 }
             doNotLayer={ false }
             targetElement={ this._datepicker }
             directionalHint={ DirectionalHint.bottomLeftEdge }
             onDismiss={ this._calendarDismissed }
             onPositioned={ this._onCalloutPositioned }
-            >
+          >
             <Calendar
               onSelectDate={ this._onSelectDate }
               onDismiss={ this._calendarDismissed }
@@ -188,7 +189,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
               firstDayOfWeek={ firstDayOfWeek }
               strings={ strings }
               ref={ this._resolveRef('_calendar') }
-              >
+            >
             </Calendar>
           </Callout>
         ) }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
index 419ef59f4dc15c..11fe500a83daae 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
@@ -6,144 +6,144 @@ $dropdownChevronForegroundColor: $ms-color-neutralTertiary;
 $rowHeight: 36px;
 $resizerColor: $ms-color-neutralTertiaryAlt;
 
-:global {
-  .ms-DetailsHeader {
-    display: inline-block;
-    min-width: 100%;
-    height: $rowHeight;
-    line-height: $rowHeight;
-    white-space: nowrap;
-    padding-bottom: 1px;
-    border-bottom: 1px solid $dividerColor;
-    cursor: default;
-    user-select: none;
-
-    &.is-selectAllHidden {
-      @include padding-left(36px);
-    }
-  }
-
-  .ms-DetailsHeader-cell.is-check .ms-Check-background {
-    opacity: 0;
-  }
-
-  .ms-DetailsHeader-cell.is-check:hover .ms-Check-background,
-  .ms-DetailsHeader.is-allSelected .ms-Check-background {
-    opacity: 1;
+.root {
+  display: inline-block;
+  min-width: 100%;
+  height: $rowHeight;
+  line-height: $rowHeight;
+  white-space: nowrap;
+  padding-bottom: 1px;
+  border-bottom: 1px solid $dividerColor;
+  cursor: default;
+  user-select: none;
+
+  &.rootIsSelectAllHidden {
+    @include padding-left(36px);
   }
-
-  .ms-DetailsHeader-cellWrapper {
-    display: inline-block;
+}
+
+.cell.cellIsCheck :global(.ms-Check-background) {
+  opacity: 0;
+}
+
+.cell.cellIsCheck:hover :global(.ms-Check-background),
+.root.rootIsAllSelected :global(.ms-Check-background) {
+  opacity: 1;
+}
+
+.cellWrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.cell {
+  background: inherit;
+  color: $disabledForegroundColor;
+
+  @include focus-border();
+  font-weight: $ms-font-weight-regular;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 0 8px;
+  border: none;
+  line-height: inherit;
+  margin: 0;
+  @include text-align(left);
+  height: $rowHeight;
+  vertical-align: top;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  @include text-align(left);
+
+  &.cellIsCheck {
     position: relative;
-  }
-
-  .ms-DetailsHeader-cellSizeWrapper {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .ms-DetailsHeader-cell {
-    color: $disabledForegroundColor;
-
-    @include focus-border();
-    font-weight: $ms-font-weight-regular;
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    padding: 0 8px;
-    border: none;
-    line-height: inherit;
+    padding: 6px;
     margin: 0;
-    @include text-align(left);
-    height: $rowHeight;
-    vertical-align: top;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    @include text-align(left);
-
-    &.is-check {
-      position: relative;
-      padding: 6px;
-      margin: 0;
-    }
-
-    &.is-actionable {
-      color: $actionableHeaderForegroundColor;
-
-      &:hover {
-        color: $ms-color-neutralPrimary;
-        background: $unselectedHoverBackgroundColor;
-      }
+  }
 
-      &:active {
-        background: $unselectedActiveBackgroundColor;
-      }
-    }
+  &.cellIsActionable {
+    color: $actionableHeaderForegroundColor;
 
-    &.is-sizer {
-      position: absolute;
-      width: 16px;
-      @include margin-left(-10px);
-      cursor: ew-resize;
-      bottom: 0;
-      top: 0;
-      height: inherit;
-      background: transparent;
+    &:hover {
+      color: $ms-color-neutralPrimary;
+      background: $unselectedHoverBackgroundColor;
     }
 
-    &.is-empty {
-      text-overflow: clip;
+    &:active {
+      background: $unselectedActiveBackgroundColor;
     }
   }
 
-  .ms-DetailsHeader-cell.is-sizer:after {
-    content: '';
+  &.cellIsSizer {
     position: absolute;
-    left: 50%;
-    top: 0;
+    width: 16px;
+    @include margin-left(-10px);
+    cursor: ew-resize;
     bottom: 0;
-    width: 1px;
-    background: $resizerColor;
-    opacity: 0;
-  }
-
-  .ms-DetailsHeader-cell.is-sizer:hover:after,
-  .ms-DetailsHeader-cell.is-sizer.is-resizing:after {
-    opacity: 1;
-    transition: opacity .3s linear;
-  }
-
-  .ms-DetailsHeader-collapseButton {
-    text-align: center;
-    transform: rotate(-180deg);
-    transform-origin: 50% 50%;
-    transition: transform .1s linear;
-    width: 20px;
-    outline: 0;
-
-    &.is-collapsed {
-      transform: rotate(0deg);
-    }
-  }
-
-  .ms-DetailsHeader-isSortedDescending {
-    transform: rotate(-180deg);
-    transform-origin: 50% 50%;
-  }
-
-  .ms-DetailsHeader-cell .ms-Icon {
-    color: $iconForegroundColor;
-    opacity: 1;
+    top: 0;
+    height: inherit;
+    background: transparent;
   }
 
-  .ms-DetailsHeader-cell .ms-DetailsHeader-filterChevron.ms-Icon {
-    color: $dropdownChevronForegroundColor;
-    @include padding-left(4px);
-    vertical-align: middle;
+  &.cellIsEmpty {
+    text-overflow: clip;
   }
-
-  .ms-DetailsHeader-cell .ms-DetailsHeader-collapseButton.ms-Icon {
-    @include padding-right(0);
+}
+
+.cell.cellIsSizer:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: $resizerColor;
+  opacity: 0;
+}
+
+.cell.cellIsSizer:hover:after,
+.cell.cellIsSizer.cellIsResizing:after {
+  opacity: 1;
+  transition: opacity .3s linear;
+}
+
+.collapseButton {
+  text-align: center;
+  transform: rotate(-180deg);
+  transform-origin: 50% 50%;
+  transition: transform .1s linear;
+  width: 20px;
+  outline: 0;
+
+  &.collapseButtonIsCollapsed {
+    transform: rotate(0deg);
   }
+}
+
+.cell .nearIcon {
+  color: $iconForegroundColor;
+  opacity: 1;
+  @include padding-right(4px);
+}
+
+.cell .filterChevron {
+  color: $dropdownChevronForegroundColor;
+  @include padding-left(4px);
+  vertical-align: middle;
+}
+
+.sizingOverlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  cursor: ew-resize;
+  background: rgba(255, 255, 255, 0);
+}
+
+.cell .collapseButton {
+  @include padding-right(0);
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
index b901c3249950d9..e08a6cbaef78b0 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
@@ -1,15 +1,18 @@
 import * as React from 'react';
 import {
   BaseComponent,
+  autobind,
   css,
   getRTL
 } from '../../Utilities';
 import { IColumn, DetailsListLayoutMode, ColumnActionsMode } from './DetailsList.Props';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
-import { Check } from '../Check/Check';
+import { Check } from '../../Check';
+import { Icon } from '../../Icon';
+import { Layer } from '../../Layer';
 import { GroupSpacer } from '../GroupedList/GroupSpacer';
 import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
-import './DetailsHeader.scss';
+import styles from './DetailsHeader.scss';
 
 const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
 const MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
@@ -83,7 +86,9 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     let { selection } = this.props;
 
     this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);
-    this._events.on(this.refs.root, 'mousedown', this._onSizerDown);
+
+    // We need to use native on this to avoid MarqueeSelection from handling the event before us.
+    this._events.on(this.refs.root, 'mousedown', this._onRootMouseDown);
   }
 
   public componentWillReceiveProps(newProps) {
@@ -102,20 +107,20 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
       <div
         role='row'
         aria-label={ ariaLabel }
-        className={ css('ms-DetailsHeader', {
-          'is-allSelected': isAllSelected,
-          'is-selectAllHidden': selectAllVisibility === SelectAllVisibility.hidden,
-          'is-resizingColumn': !!columnResizeDetails && isSizing
+        className={ css('ms-DetailsHeader', styles.root, {
+          ['is-allSelected ' + styles.rootIsAllSelected]: isAllSelected,
+          ['is-selectAllHidden ' + styles.rootIsSelectAllHidden]: selectAllVisibility === SelectAllVisibility.hidden,
+          'is-resizingColumn': !!columnResizeDetails && isSizing,
         }) }
-        onMouseMove={ this._onMove.bind(this) }
-        onMouseUp={ this._onUp.bind(this) }
         ref='root'
+        onMouseMove={ this._onRootMouseMove }
         data-automationid='DetailsHeader'>
         <FocusZone ref='focusZone' direction={ FocusZoneDirection.horizontal }>
-          <div className='ms-DetailsHeader-cellWrapper' role='columnheader'>
+          <div className={ css('ms-DetailsHeader-cellWrapper', styles.cellWrapper) } role='columnheader'>
             { (selectAllVisibility === SelectAllVisibility.visible) ? (
               <button
-                className='ms-DetailsHeader-cell is-check'
+                type='button'
+                className={ css('ms-DetailsHeader-cell is-check', styles.cell, styles.cellIsCheck) }
                 onClick={ this._onSelectAllClicked }
                 aria-label={ ariaLabelForSelectAllCheckbox }
                 aria-pressed={ isAllSelected }
@@ -125,75 +130,99 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
             ) : null }
           </div>
           { groupNestingDepth > 0 ? (
-            <button className='ms-DetailsHeader-cell' onClick={ this._onToggleCollapseAll }>
-              <i className={ css('ms-DetailsHeader-collapseButton ms-Icon ms-Icon--ChevronDown', {
-                'is-collapsed': isAllCollapsed
-              }) } >
-              </i>
+            <button
+              type='button'
+              className={ css('ms-DetailsHeader-cell', styles.cell) }
+              onClick={ this._onToggleCollapseAll }>
+              <Icon
+                className={ css(
+                  'ms-DetailsHeader-collapseButton',
+                  styles.collapseButton,
+                  isAllCollapsed && ('is-collapsed ' + styles.collapseButtonIsCollapsed)
+                ) }
+                iconName='ChevronDown'
+              />
             </button>
           ) : (null) }
           { GroupSpacer({ count: groupNestingDepth - 1 }) }
           { columns.map((column, columnIndex) => (
-            <div key={ column.key } className='ms-DetailsHeader-cellSizeWrapper'>
-              <div
-                className='ms-DetailsHeader-cellWrapper'
-                role='columnheader'
-                aria-sort={ column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none' }>
-                <button
-                  key={ column.fieldName }
-                  disabled={ column.columnActionsMode === ColumnActionsMode.disabled }
-                  className={ css('ms-DetailsHeader-cell', column.headerClassName, {
-                    'is-actionable': column.columnActionsMode !== ColumnActionsMode.disabled,
-                    'is-empty': !column.name,
+            <div
+              key={ column.key }
+              className={ css('ms-DetailsHeader-cellWrapper', styles.cellWrapper) }
+              role='columnheader'
+              aria-sort={ column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none' }
+            >
+              <button
+                type='button'
+                key={ column.fieldName }
+                disabled={ column.columnActionsMode === ColumnActionsMode.disabled }
+                className={ css(
+                  'ms-DetailsHeader-cell',
+                  styles.cell,
+                  column.headerClassName, {
+                    ['is-actionable ' + styles.cellIsActionable]: column.columnActionsMode !== ColumnActionsMode.disabled,
+                    ['is-empty ' + styles.cellIsEmpty]: !column.name,
                     'is-icon-visible': column.isSorted || column.isGrouped || column.isFiltered
                   }) }
-                  style={ { width: column.calculatedWidth + INNER_PADDING } }
-                  onClick={ this._onColumnClick.bind(this, column) }
-                  onContextMenu={ this._onColumnContextMenu.bind(this, column) }
-                  aria-haspopup={ column.columnActionsMode === ColumnActionsMode.hasDropdown }
-                  aria-label={ column.ariaLabel || column.name }
-                  data-automationid='ColumnsHeaderColumn'
-                  data-item-key={ column.key }
-                >
-
-                  { column.isFiltered && (
-                    <i className='ms-Icon ms-Icon--filter' />
-                  ) }
-
-                  { column.isSorted && (
-                    <i className={ css('ms-Icon', {
-                      'ms-Icon--SortUp': !column.isSortedDescending,
-                      'ms-Icon--SortDown': column.isSortedDescending
-                    }) } />
-                  ) }
-
-                  { column.isGrouped && (
-                    <i className='ms-Icon ms-Icon--GroupedDescending' />
-                  ) }
-
-                  { column.iconClassName && (
-                    <i className={ 'ms-Icon ' + column.iconClassName } />
-                  ) }
-
-                  { column.name }
-
-                  { column.columnActionsMode === ColumnActionsMode.hasDropdown && (
-                    <i className='ms-DetailsHeader-filterChevron ms-Icon ms-Icon--ChevronDown' />
-                  ) }
-                </button>
-              </div>
-              { (column.isResizable) ? (
+                style={ { width: column.calculatedWidth + INNER_PADDING } }
+                onClick={ this._onColumnClick.bind(this, column) }
+                onContextMenu={ this._onColumnContextMenu.bind(this, column) }
+                aria-haspopup={ column.columnActionsMode === ColumnActionsMode.hasDropdown }
+                aria-label={ column.ariaLabel || column.name }
+                data-automationid='ColumnsHeaderColumn'
+                data-item-key={ column.key }
+              >
+
+                { column.isFiltered && (
+                  <Icon className={ styles.nearIcon } iconName='Filter' />
+                ) }
+
+                { column.isSorted && (
+                  <Icon className={ styles.nearIcon } iconName={ column.isSortedDescending ? 'SortDown' : 'SortUp' } />
+                ) }
+
+                { column.isGrouped && (
+                  <Icon className={ styles.nearIcon } iconName='GroupedDescending' />
+                ) }
+
+                { column.iconClassName && (
+                  <Icon className={ styles.nearIcon } iconName={ column.iconClassName as any } />
+                ) }
+
+                { column.name }
+
+                { column.columnActionsMode === ColumnActionsMode.hasDropdown && (
+                  <Icon
+                    className={ css('ms-DetailsHeader-filterChevron', styles.filterChevron) }
+                    iconName='ChevronDown'
+                  />
+                ) }
+              </button>
+              { (column.isResizable) && (
                 <div
                   data-sizer-index={ columnIndex }
-                  className={ css('ms-DetailsHeader-cell is-sizer', {
-                    'is-resizing': columnResizeDetails && columnResizeDetails.columnIndex === columnIndex && isSizing
-                  }) }
+                  className={ css(
+                    'ms-DetailsHeader-cell is-sizer',
+                    styles.cell,
+                    styles.cellIsSizer,
+                    {
+                      ['is-resizing ' + styles.cellIsResizing]: isSizing && columnResizeDetails.columnIndex === columnIndex
+                    }) }
                   onDoubleClick={ this._onSizerDoubleClick.bind(this, columnIndex) }
                 />
-              ) : (null) }
+              ) }
             </div>
           )) }
         </FocusZone>
+        { isSizing && (
+          <Layer>
+            <div
+              className={ css(isSizing && styles.sizingOverlay) }
+              onMouseMove={ this._onSizerMouseMove }
+              onMouseUp={ this._onSizerMouseUp }
+            />
+          </Layer>
+        ) }
       </div>
     );
   }
@@ -221,68 +250,16 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   /**
    * Called when the select all toggle is clicked.
    */
+
+  @autobind
   private _onSelectAllClicked() {
     let { selection } = this.props;
 
     selection.toggleAllSelected();
   }
 
-  /**
-   * mouse move event handler in the header
-   * it will set isSizing state to true when user clicked on the sizer and move the mouse.
-   *
-   * @private
-   * @param {React.MouseEvent} ev (mouse move event)
-   */
-  private _onMove(ev: React.MouseEvent<HTMLElement>) {
-    let {
-      // use buttons property here since ev.button in some edge case is not upding well during the move.
-      // but firefox doesn't support it, so we set the default value when it is not defined.
-      buttons = MOUSEMOVE_PRIMARY_BUTTON
-    } = ev;
-
-    let { onColumnIsSizingChanged, columns } = this.props;
-    let { columnResizeDetails, isSizing } = this.state;
-
-    if (columnResizeDetails) {
-      if (buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
-        // cancel mouse down event and return early when the primary button is not pressed
-        this._onUp(ev);
-        return;
-      }
-
-      if (!isSizing && ev.clientX !== columnResizeDetails.originX) {
-        isSizing = true;
-
-        this._events.on(window, 'mousemove', this._onSizerMove, true);
-        this._events.on(window, 'mouseup', this._onSizerUp, true);
-
-        this.setState({ isSizing: isSizing });
-
-        if (onColumnIsSizingChanged) {
-          onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);
-        }
-
-      }
-    }
-  }
-
-  /**
-   * mouse up event handler in the header
-   * clear the resize related state.
-   * This is to ensure we can catch double click event
-   *
-   * @private
-   * @param {React.MouseEvent} ev (mouse up event)
-   */
-  private _onUp(ev: React.MouseEvent<HTMLElement>) {
-    this.setState({
-      columnResizeDetails: null,
-      isSizing: false
-    });
-  }
-
-  private _onSizerDown(ev: MouseEvent) {
+  @autobind
+  private _onRootMouseDown(ev: MouseEvent) {
     let columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');
     let columnIndex = Number(columnIndexAttr);
     let { columns } = this.props;
@@ -304,55 +281,72 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     ev.stopPropagation();
   }
 
-  private _onSelectionChanged() {
-    let isAllSelected = this.props.selection.isAllSelected();
+  @autobind
+  private _onRootMouseMove(ev: React.MouseEvent<HTMLElement>) {
+    let { columnResizeDetails, isSizing } = this.state;
 
-    if (this.state.isAllSelected !== isAllSelected) {
-      this.setState({
-        isAllSelected: isAllSelected
-      });
+    if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
+      this.setState({ isSizing: true });
     }
   }
 
-  private _onSizerMove(ev: React.MouseEvent<HTMLElement>) {
+  /**
+   * mouse move event handler in the header
+   * it will set isSizing state to true when user clicked on the sizer and move the mouse.
+   *
+   * @private
+   * @param {React.MouseEvent} ev (mouse move event)
+   */
+  @autobind
+  private _onSizerMouseMove(ev: React.MouseEvent<HTMLElement>) {
     let {
       // use buttons property here since ev.button in some edge case is not upding well during the move.
       // but firefox doesn't support it, so we set the default value when it is not defined.
-      buttons = MOUSEMOVE_PRIMARY_BUTTON
+      buttons
     } = ev;
-
+    let { onColumnIsSizingChanged, onColumnResized, columns } = this.props;
     let { columnResizeDetails } = this.state;
 
-    if (columnResizeDetails) {
-      if (buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
-        // cancel mouse down event and return early when the primary button is not pressed
-        this._onSizerUp();
-        return;
-      }
-
-      let { onColumnResized, columns } = this.props;
+    if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
+      // cancel mouse down event and return early when the primary button is not pressed
+      this._onSizerMouseUp(ev);
+      return;
+    }
 
-      if (onColumnResized) {
-        let movement = ev.clientX - columnResizeDetails.originX;
+    if (ev.clientX !== columnResizeDetails.originX) {
+      if (onColumnIsSizingChanged) {
+        onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);
+      }
+    }
 
-        if (getRTL()) {
-          movement = -movement;
-        }
+    if (onColumnResized) {
+      let movement = ev.clientX - columnResizeDetails.originX;
 
-        onColumnResized(
-          columns[columnResizeDetails.columnIndex],
-          columnResizeDetails.columnMinWidth + movement
-        );
+      if (getRTL()) {
+        movement = -movement;
       }
+
+      onColumnResized(
+        columns[columnResizeDetails.columnIndex],
+        columnResizeDetails.columnMinWidth + movement
+      );
     }
+
   }
 
-  private _onSizerUp() {
+  /**
+   * mouse up event handler in the header
+   * clear the resize related state.
+   * This is to ensure we can catch double click event
+   *
+   * @private
+   * @param {React.MouseEvent} ev (mouse up event)
+   */
+  @autobind
+  private _onSizerMouseUp(ev: React.MouseEvent<HTMLElement>) {
     let { columns, onColumnIsSizingChanged } = this.props;
     let { columnResizeDetails } = this.state;
 
-    this._events.off(window);
-
     this.setState({
       columnResizeDetails: null,
       isSizing: false
@@ -363,6 +357,16 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
+  private _onSelectionChanged() {
+    let isAllSelected = this.props.selection.isAllSelected();
+
+    if (this.state.isAllSelected !== isAllSelected) {
+      this.setState({
+        isAllSelected: isAllSelected
+      });
+    }
+  }
+
   private _onColumnClick(column, ev) {
     let { onColumnClick } = this.props;
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.scss
index 54993a5040c1ee..465add8e0c664c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.scss
@@ -1,37 +1,26 @@
 @import '../../common/common';
 
-:global {
-  .ms-DetailsList {
-    position: relative;
-    font-size: $ms-font-size-s;
-
-    BUTTON {
-      font-family: inherit;
-      background-color: transparent;
-    }
-
-    > .ms-FocusZone {
-      display: inline-block;
-      vertical-align: top;
-      min-width: 1px;
-      min-height: 1px;
-    }
-
-  }
+.root {
+  position: relative;
+  font-size: $ms-font-size-s;
+}
 
-  .ms-DetailsList.is-horizontalConstrained {
-    overflow-x: auto;
-    overflow-y: visible;
+.focusZone {
+  display: inline-block;
+  vertical-align: top;
+  min-width: 1px;
+  min-height: 1px;
+}
 
-    -webkit-overflow-scrolling: touch;
-  }
+.rootIsHorizontalConstrained {
+  overflow-x: auto;
+  overflow-y: visible;
 
-  .ms-DetailsList-cell {
-      word-break: break-word;
-  }
+  -webkit-overflow-scrolling: touch;
+}
 
-  /* Set the min height for a row to 38px so even rendering empty cells takes that space. */
-  .ms-DetailsList .ms-List-cell {
-    min-height: 38px;
-  }
+/* Set the min height for a row to 38px so even rendering empty cells takes that space. */
+.root :global(.ms-List-cell) {
+  min-height: 38px;
+  word-break: break-word;
 }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index 7c8c33110117cc..e3426b83670637 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -30,7 +30,7 @@ import {
   SelectionZone
 } from '../../utilities/selection/index';
 import { DragDropHelper } from '../../utilities/dragdrop/DragDropHelper';
-import './DetailsList.scss';
+import styles from './DetailsList.scss';
 
 export interface IDetailsListState {
   lastWidth?: number;
@@ -236,9 +236,9 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       // with JAWS.
       <div
         ref='root'
-        className={ css('ms-DetailsList', className, {
+        className={ css('ms-DetailsList', styles.root, className, {
           'is-fixed': layoutMode === DetailsListLayoutMode.fixedColumns,
-          'is-horizontalConstrained': constrainMode === ConstrainMode.horizontalConstrained
+          ['is-horizontalConstrained ' + styles.rootIsHorizontalConstrained]: constrainMode === ConstrainMode.horizontalConstrained
         }) }
         data-automationid='DetailsList'
         data-is-scrollable='false'
@@ -270,6 +270,7 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
           <div ref='contentContainer' onKeyDown={ this._onContentKeyDown } role='presentation'>
             <FocusZone
               ref='focusZone'
+              className={ styles.focusZone }
               direction={ FocusZoneDirection.vertical }
               isInnerZoneKeystroke={ (ev) => (ev.which === getRTLSafeKeyCode(KeyCodes.right)) }
               onActiveElementChanged={ this._onActiveRowChanged }
@@ -320,7 +321,7 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
   }
 
   @autobind
-  protected _onRenderRow(props: IDetailsRowProps) {
+  protected _onRenderRow(props: IDetailsRowProps, defaultRender?: any) {
     return <DetailsRow { ...props } />;
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
index 1d597044443013..e485833ed44796 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
@@ -6,109 +6,91 @@ $selectedColor: $ms-color-neutralQuaternary;
 $selectedHoverColor: $ms-color-neutralQuaternaryAlt;
 $unselectedHoverColor: $ms-color-neutralLighter;
 
-:global {
-  .ms-DetailsRow {
-    @include focus-border();
-
-    display: inline-block;
-    min-width: 100%;
-    min-height: $rowHeight;
-    margin: 1px 0;
-    vertical-align: top;
-    white-space: nowrap;
-    padding: 0;
-    box-sizing: border-box;
-
-    background: none;
-    border: none;
-    @include text-align(left);
-    vertical-align: top;
-    line-height: $rowHeight - ($rowVerticalPadding * 2);
-
-    &.ms-DetailsRow.is-selected {
-      background: $selectedColor;
-    }
-
-    &.is-contentUnselectable {
-      user-select: none;
-      cursor: default;
-    }
-  }
-
-  .ms-DetailsRow:hover {
+.root {
+  @include focus-border();
+
+  display: inline-block;
+  min-width: 100%;
+  min-height: $rowHeight;
+  margin: 1px 0;
+  vertical-align: top;
+  white-space: nowrap;
+  padding: 0;
+  box-sizing: border-box;
+
+  background: none;
+  border: none;
+  @include text-align(left);
+  vertical-align: top;
+  line-height: $rowHeight - ($rowVerticalPadding * 2);
+
+  &:hover {
     background: $unselectedHoverColor;
   }
+}
 
-  .ms-DetailsRow.is-selected:hover {
-    background: $selectedHoverColor;
-  }
-
-  .ms-DetailsRow-cell {
-    display: inline-block;
-    position: relative;
-    box-sizing: border-box;
-    padding: $rowVerticalPadding 0;
-    margin: 0 8px;
-    min-height: $rowHeight;
-    vertical-align: top;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.is-multiline {
-      white-space: normal;
-      word-break: break-word;
-      text-overflow: clip;
-    }
-  }
+.rootIsSelected {
+  background: $selectedColor;
 
-  .ms-DetailsRow-fields {
-    display: inline-block;
+  &:hover {
+    background: $selectedHoverColor;
   }
+}
 
-  .ms-DetailsRow-check {
-    @include focus-border();
+.rootIsContentUnselectable {
+  user-select: none;
+  cursor: default;
+}
 
-    display: inline-block;
-    cursor: default;
-    padding: 6px;
-    box-sizing: border-box;
-    vertical-align: top;
-    background: none;
-    border: none;
-  }
+.cell {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: $rowVerticalPadding 0;
+  margin: 0 8px;
+  min-height: $rowHeight;
+  vertical-align: top;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .ms-DetailsRow-check {
-    opacity: 0;
-  }
+.isMultiline {
+  white-space: normal;
+  word-break: break-word;
+  text-overflow: clip;
+}
 
-  .ms-DetailsRow:hover .ms-DetailsRow-check,
-  .ms-DetailsRow.is-selected .ms-DetailsRow-check,
-  .ms-DetailsRow.is-check-visible .ms-DetailsRow-check {
-    opacity: 1;
-  }
+.fields {
+  display: inline-block;
+}
 
-  // TODO: delete?
-  .aFileTypeIconRenderer {
-    height: 36px;
-    line-height: 36px;
-    vertical-align: top;
-  }
+.check {
+  @include focus-border();
+
+  display: inline-block;
+  cursor: default;
+  padding: 6px;
+  box-sizing: border-box;
+  vertical-align: top;
+  background: none;
+  border: none;
+  opacity: 0;
+}
 
-  .FileTypeIconRenderer > img {
-    width: 16px;
-    height: 16px;
-    vertical-align: middle;
-  }
+.root:hover .check,
+.rootIsSelected .check,
+.rootIsCheckVisible .check {
+  opacity: 1;
+}
 
-  .ms-DetailsRow-cellMeasurer .ms-DetailsRow-cell {
-    overflow: visible;
-    white-space: nowrap;
-  }
+.cellMeasurer .cell {
+  overflow: visible;
+  white-space: nowrap;
+}
 
-  .ms-DetailsRow-checkSpacer {
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-  }
+.checkSpacer {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
 }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index ac76a7ac86d5e3..2287a98027d814 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -17,8 +17,8 @@ import {
   IDragDropOptions,
 } from './../../utilities/dragdrop/interfaces';
 import { IViewport } from '../../utilities/decorators/withViewport';
+import styles from './DetailsRow.scss';
 import { IDisposable } from '@uifabric/utilities';
-import './DetailsRow.scss';
 
 export interface IDetailsRowProps extends React.Props<DetailsRow> {
   item: any;
@@ -188,10 +188,10 @@ export class DetailsRow extends React.Component<IDetailsRowProps, IDetailsRowSta
         ref='root'
         role='row'
         aria-label={ ariaLabel }
-        className={ css('ms-DetailsRow ms-u-fadeIn400', droppingClassName, {
-          'is-contentUnselectable': isContentUnselectable,
-          'is-selected': isSelected,
-          'is-check-visible': checkboxVisibility === CheckboxVisibility.always
+        className={ css('ms-DetailsRow ms-u-fadeIn400', styles.root, droppingClassName, {
+          ['is-contentUnselectable ' + styles.rootIsContentUnselectable]: isContentUnselectable,
+          ['is-selected ' + styles.rootIsSelected]: isSelected,
+          ['is-check-visible ' + styles.rootIsCheckVisible]: checkboxVisibility === CheckboxVisibility.always
         }) }
         data-is-focusable={ true }
         data-selection-index={ itemIndex }
@@ -224,7 +224,10 @@ export class DetailsRow extends React.Component<IDetailsRowProps, IDetailsRowSta
           ) }
 
           { columnMeasureInfo && (
-            <span className='ms-DetailsRow-cellMeasurer ms-DetailsRow-cell' ref='cellMeasurer'>
+            <span
+              className={ css('ms-DetailsRow-cellMeasurer ms-DetailsRow-cell', styles.cellMeasurer, styles.cell) }
+              ref='cellMeasurer'
+            >
               <DetailsRowFields
                 columns={ [columnMeasureInfo.column] }
                 item={ item }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
index 611d18af91ff44..3ed7a910505646 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
@@ -1,8 +1,9 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-
+import { css } from '../../Utilities';
 import { Check } from '../../Check';
+import styles from './DetailsRow.scss';
 
 export interface IDetailsRowCheckProps {
   selected?: boolean;
@@ -21,16 +22,16 @@ export const DetailsRowCheck = (props: IDetailsRowCheckProps) => {
   return (
     <button
       type='button'
-      className='ms-DetailsRow-check'
+      className={ css('ms-DetailsRow-check', styles.check) }
       role='button'
       aria-pressed={ selected }
       data-selection-toggle={ true }
       data-automationid='DetailsRowCheck'
       aria-label={ props.ariaLabel }
-      >
+    >
       { props.canSelect ?
         <Check checked={ selected } /> :
-        <div className='ms-DetailsRow-checkSpacer' />
+        <div className={ css('ms-DetailsRow-checkSpacer', styles.checkSpacer) } />
       }
     </button>
   );
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
index edee07876b53ec..ea1e5d4b7305a2 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IColumn } from './DetailsList.Props';
 import { css } from '../../Utilities';
+import styles from './DetailsRow.scss';
 
 export interface IDetailsRowFieldsProps {
   item: any;
@@ -29,13 +30,14 @@ export class DetailsRowFields extends React.Component<IDetailsRowFieldsProps, ID
     let { cellContent } = this.state;
 
     return (
-      <div className='ms-DetailsRow-fields' data-automationid='DetailsRowFields'>
+      <div className={ css('ms-DetailsRow-fields', styles.fields) } data-automationid='DetailsRowFields'>
         { columns.map((column, columnIndex) => (
           <div
             key={ columnIndex }
             role={ column.isRowHeader ? 'rowheader' : 'gridcell' }
-            className={ css('ms-DetailsRow-cell', column.className, {
-              'is-multiline': column.isMultiline
+            className={ css('ms-DetailsRow-cell', styles.cell, column.className, {
+              'is-multiline': column.isMultiline,
+              [styles.isMultiline]: column.isMultiline
             }) }
             style={ { width: column.calculatedWidth } }
             data-automationid='DetailsRowCell'
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.scss b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.scss
index 84d72872b96c00..e563c133f104b9 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.scss
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.scss
@@ -17,209 +17,197 @@ $Dialog-default-max-width: 340px;
   display: inline-block;
 }
 
-:global {
-  .ms-Dialog {
-    @include ms-baseFont;
-    background-color: transparent;
-    position: fixed;
-    height: 100%;
-    width:  100%;
-    top:  0;
-    @include left(0);
-    display: none; // Hidden by default
-
-    .ms-Button.ms-Button--compound {
-      display: block;
-      @include margin-left(0);
-    }
-
-    .ms-Overlay {
-      @media screen and (-ms-high-contrast: active) {
-        opacity: 0;
-      }
-    }
-  }
-
-  // State: The dialog is open
-  .ms-Dialog.is-open {
+.root {
+  @include ms-baseFont;
+  background-color: transparent;
+  position: fixed;
+  height: 100%;
+  width:  100%;
+  top:  0;
+  @include left(0);
+  display: none; // Hidden by default
+
+  :global(.ms-Button.ms-Button--compound) {
     display: block;
+    @include margin-left(0);
   }
 
-  // Fallback for IE9 when dialog is open
-  .ms-Dialog.is-open {
-    display: block;
-    line-height: 100vh;
-    text-align: center;
-
-    &::before {
-      @include dialogPositioningIE9Fallback();
-      content: "";
-      height: 100%;
-      width: 0;
+  :global(.ms-Overlay) {
+    @media screen and (-ms-high-contrast: active) {
+      opacity: 0;
     }
   }
+}
 
-  // State: The dialog is animating open
-  .ms-Dialog.is-animatingOpen {
-    @include ms-u-fadeIn200;
-  }
+// State: The dialog is open
+.root.isOpen {
+  display: block;
+}
 
-  // State: The dialog is animating closed
-  .ms-Dialog.is-animatingClose {
-    @include ms-u-fadeOut200;
-  }
+// Fallback for IE9 when dialog is open
+.root.isOpen {
+  display: block;
+  line-height: 100vh;
+  text-align: center;
 
-  // The actual dialog element
-  .ms-Dialog-main {
+  &::before {
     @include dialogPositioningIE9Fallback();
-    @include drop-shadow();
-    background-color: $ms-color-white;
-    box-sizing: border-box;
-    line-height: 1.35;
-    margin: auto;
-    width: $Dialog-default-min-width;
-    position: relative;
-    @include text-align(left);
-    outline: 3px solid transparent;
-    max-height: 100%;
-    overflow-y: auto;
+    content: "";
+    height: 100%;
+    width: 0;
   }
+}
 
-  // Close button, hidden by default
-  .ms-Dialog-button.ms-Dialog-button--close {
-    display: none;
+// The actual dialog element
+.main {
+  @include dialogPositioningIE9Fallback();
+  @include drop-shadow();
+  background-color: $ms-color-white;
+  box-sizing: border-box;
+  line-height: 1.35;
+  margin: auto;
+  width: $Dialog-default-min-width;
+  position: relative;
+  @include text-align(left);
+  outline: 3px solid transparent;
+  max-height: 100%;
+  overflow-y: auto;
+}
 
-    .ms-Icon.ms-Icon--Cancel {
-      color: $ms-color-neutralSecondary;
-      font-size: 16px;
-    }
-  }
+// Close button, hidden by default
+.button.isClose {
+  display: none;
 
-  .ms-Dialog-inner {
-    padding: 0 28px 20px;
+  :global(.ms-Icon.ms-Icon--Cancel) {
+    color: $ms-color-neutralSecondary;
+    font-size: 16px;
   }
+}
 
-  .ms-Dialog-header {
-    position: relative;
-    width: 100%;
-    box-sizing: border-box;
-  }
+.inner {
+  padding: 0 28px 20px;
+}
 
-  .ms-Dialog-title {
-    margin: 0;
-    @include ms-font-xl;
-    color: $ms-color-neutralPrimary;
-    @include padding(20px, 36px, 20px, 28px);
-  }
+.header {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
 
-  .ms-Dialog-topButton {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    position: absolute;
-    top: 0;
-    @include right(0);
-    @include padding(12px, 12px, 0, 0);
-    > * {
-      flex: 0 0 auto;
-    }
+.title {
+  margin: 0;
+  @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
+  @include padding(20px, 36px, 20px, 28px);
+}
+
+.topButton {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  position: absolute;
+  top: 0;
+  @include right(0);
+  @include padding(12px, 12px, 0, 0);
+  > * {
+    flex: 0 0 auto;
   }
+}
 
-  .ms-Dialog-content {
-    position: relative;
-    width: 100%;
+.content {
+  position: relative;
+  width: 100%;
 
-    // Add margin bottom between compound buttons
-    .ms-Button.ms-Button--compound {
-      margin-bottom: 20px;
+  // Add margin bottom between compound buttons
+  :global(.ms-Button.ms-Button--compound) {
+    margin-bottom: 20px;
 
-      &:last-child {
-        margin-bottom: 0;
-      }
+    &:last-child {
+      margin-bottom: 0;
     }
   }
+}
 
-  .ms-Dialog-subText {
-    margin: 0 0 20px 0;
-    padding-top: 8px;
-    @include ms-font-s;
-    color: $ms-color-neutralPrimary;
-    font-weight: $ms-font-weight-semilight;
-    line-height: 1.5;
-  }
+.subText {
+  margin: 0 0 20px 0;
+  padding-top: 8px;
+  @include ms-font-s;
+  color: $ms-color-neutralPrimary;
+  font-weight: $ms-font-weight-semilight;
+  line-height: 1.5;
+}
 
-  .ms-Dialog-actions {
-    position: relative;
-    width: 100%;
-    min-height:  24px;
-    line-height: 24px;
-    margin: 20px 0 0;
-    font-size: 0;
+.actions {
+  position: relative;
+  width: 100%;
+  min-height:  24px;
+  line-height: 24px;
+  margin: 20px 0 0;
+  font-size: 0;
 
-    .ms-Button {
-      line-height: normal;
-    }
+  :global(.ms-Button) {
+    line-height: normal;
   }
+}
 
-  // Negative margin to needed to compensate for symmetric
-  // padding between action elements.
-  .ms-Dialog-actionsRight {
-    @include text-align(right);
-    @include margin-right(-4px);
-    font-size: 0;
+// Negative margin to needed to compensate for symmetric
+// padding between action elements.
+.actionsRight {
+  @include text-align(right);
+  @include margin-right(-4px);
+  font-size: 0;
 
-    // Reset spacing for first button
-    .ms-Dialog-action {
-      margin: 0px 4px;
-    }
+  // Reset spacing for first button
+  .action {
+    margin: 0px 4px;
   }
+}
 
-  //= Modifier: Dialog with close button
-  //
-  .ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) {
-    // Show the close button
-    .ms-Dialog-button.ms-Dialog-button--close {
-      display: block;
-    }
+//= Modifier: Dialog with close button
+//
+.root.isClose:not(.isLargeHeader) {
+  // Show the close button
+  .button.isClose {
+    display: block;
   }
+}
 
-  //= Modifier: Multiline button dialog
-  //
-  .ms-Dialog.ms-Dialog--multiline {
-    .ms-Dialog-title {
-      font-size: $ms-font-size-xxl;
-    }
+//= Modifier: Multiline button dialog
+//
+.root.isMultiline {
+  .title {
+    font-size: $ms-font-size-xxl;
+  }
 
-    .ms-Dialog-inner {
-      padding: 0 20px 20px;
-    }
+  .inner {
+    padding: 0 20px 20px;
   }
+}
 
-  //= Modifier: Large header dialog
-  //
-  .ms-Dialog.ms-Dialog--lgHeader {
-    .ms-Dialog-header {
-      background-color: $Dialog-lgHeader-backgroundColor;
-    }
+//= Modifier: Large header dialog
+//
+.root.isLargeHeader {
+  .header {
+    background-color: $Dialog-lgHeader-backgroundColor;
+  }
 
-    .ms-Dialog-title {
-      @include ms-font-xxl;
-      color: $ms-color-white;
-      padding: 26px 28px 28px;
-      margin-bottom: 8px;
-    }
+  .title {
+    @include ms-font-xxl;
+    color: $ms-color-white;
+    padding: 26px 28px 28px;
+    margin-bottom: 8px;
+  }
 
-    .ms-Dialog-subText {
-      font-size: $ms-font-size-m;
-    }
+  .subText {
+    font-size: $ms-font-size-m;
   }
+}
 
-  @media (min-width: $ms-screen-md-min) {
-    // Allow wider dialog on larger screens
-    .ms-Dialog-main {
-      width: auto;
-      min-width: $Dialog-default-min-width;
-      max-width: $Dialog-default-max-width;
-    }
+@media (min-width: $ms-screen-md-min) {
+  // Allow wider dialog on larger screens
+  .main {
+    width: auto;
+    min-width: $Dialog-default-min-width;
+    max-width: $Dialog-default-max-width;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
index 58b992d1f2076a..a06137afdeea06 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
@@ -12,7 +12,7 @@ import { Button, ButtonType } from '../../Button';
 import { DialogFooter } from './DialogFooter';
 import { Popup } from '../Popup/index';
 import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
-import './Dialog.scss';
+import styles from './Dialog.scss';
 
 // @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec)
 
@@ -94,17 +94,17 @@ export class Dialog extends BaseComponent<IDialogProps, IDialogState> {
     }
 
     let subTextContent;
-    const dialogClassName = css('ms-Dialog', this.props.className, {
-      'ms-Dialog--lgHeader': type === DialogType.largeHeader,
-      'ms-Dialog--close': type === DialogType.close,
-      'is-open': isOpen,
-      'is-animatingOpen': isAnimatingOpen,
-      'is-animatingClose': isAnimatingClose
+    const dialogClassName = css('ms-Dialog', styles.root, this.props.className, {
+      ['ms-Dialog--lgHeader ' + styles.isLargeHeader]: type === DialogType.largeHeader,
+      ['ms-Dialog--close ' + styles.isClose]: type === DialogType.close,
+      ['is-open ' + styles.isOpen]: isOpen,
+      'ms-u-fadeIn200': isAnimatingOpen,
+      'ms-u-fadeOut200': isAnimatingClose
     });
     let groupings = this._groupChildren();
 
     if (subText) {
-      subTextContent = <p className='ms-Dialog-subText' id={ id + '-subText' }>{ subText }</p>;
+      subTextContent = <p className={ css('ms-Dialog-subText', styles.subText) } id={ id + '-subText' }>{ subText }</p>;
     }
 
     // @temp tuatology - Will adjust this to be a panel at certain breakpoints
@@ -122,20 +122,20 @@ export class Dialog extends BaseComponent<IDialogProps, IDialogState> {
               ref={ this._onDialogRef }>
               <Overlay isDarkThemed={ isDarkOverlay } onClick={ isBlocking ? null : onDismiss } />
               <FocusTrapZone
-                className={ css('ms-Dialog-main', this.props.containerClassName) }
+                className={ css('ms-Dialog-main', styles.main, this.props.containerClassName) }
                 elementToFocusOnDismiss={ elementToFocusOnDismiss }
                 isClickableOutsideFocusTrap={ isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking }
                 ignoreExternalFocusing={ ignoreExternalFocusing }
                 forceFocusInsideTrap={ forceFocusInsideTrap }
                 firstFocusableSelector={ firstFocusableSelector }>
-                <div className='ms-Dialog-header'>
-                  <p className='ms-Dialog-title' id={ id + '-title' }>{ title }</p>
-                  <div className='ms-Dialog-topButton'>
+                <div className={ css('ms-Dialog-header', styles.header) }>
+                  <p className={ css('ms-Dialog-title', styles.title) } id={ id + '-title' }>{ title }</p>
+                  <div className={ css('ms-Dialog-topButton', styles.topButton) }>
                     { this.props.topButtonsProps.map((props) => (
                       <Button {...props} />
                     )) }
                     <Button
-                      className='ms-Dialog-button ms-Dialog-button--close'
+                      className={ css('ms-Dialog-button ms-Dialog-button--close', styles.button, styles.isClose) }
                       buttonType={ ButtonType.icon }
                       icon='Cancel'
                       ariaLabel={ closeButtonAriaLabel }
@@ -143,8 +143,8 @@ export class Dialog extends BaseComponent<IDialogProps, IDialogState> {
                     />
                   </div>
                 </div>
-                <div className='ms-Dialog-inner'>
-                  <div className={ css('ms-Dialog-content', this.props.contentClassName) }>
+                <div className={ css('ms-Dialog-inner', styles.inner) }>
+                  <div className={ css('ms-Dialog-content', styles.content, this.props.contentClassName) }>
                     { subTextContent }
                     { groupings.contents }
                   </div>
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx
index 7e9f9e06d3016b..a2999c51b53cc9 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import './Dialog.scss';
+import { css } from '../../Utilities';
+import styles from './Dialog.scss';
 
 export class DialogFooter extends React.Component<any, any> {
   public render() {
     return (
-      <div className='ms-Dialog-actions'>
-        <div className='ms-Dialog-actionsRight'>
+      <div className={ css('ms-Dialog-actions', styles.actions) }>
+        <div className={ css('ms-Dialog-actionsRight', styles.actionsRight) }>
           { this._renderChildrenAsActions() }
         </div>
       </div>
@@ -14,7 +15,7 @@ export class DialogFooter extends React.Component<any, any> {
 
   private _renderChildrenAsActions() {
     return React.Children.map(this.props.children, child =>
-      <span className='ms-Dialog-action'>{ child }</span>
+      <span className={ css('ms-Dialog-action', styles.action) }>{ child }</span>
     );
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index 4b97537d07aa91..9df484c755e326 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -1,80 +1,288 @@
 @import '../../common/common';
 
-:global {
-  .ms-DocumentCard {
-    -webkit-font-smoothing: antialiased;
-    background-color: $ms-color-white;
-    border: 1px solid $ms-color-neutralLight;
-    box-sizing: border-box;
-    max-width: 320px;
-    min-width: 206px;
-    user-select: none;
-    position: relative;
-  }
+.root {
+  -webkit-font-smoothing: antialiased;
+  background-color: $ms-color-white;
+  border: 1px solid $ms-color-neutralLight;
+  box-sizing: border-box;
+  max-width: 320px;
+  min-width: 206px;
+  user-select: none;
+  position: relative;
+}
 
-  .ms-DocumentCard--actionable:hover {
-    cursor: pointer;
-    border-color: $ms-color-neutralTertiaryAlt;
-
-    // Place a heavier border within the document card
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      border: 1px solid $ms-color-neutralTertiaryAlt;
-      pointer-events: none;
-    }
-  }
+.rootIsActionable:hover {
+  cursor: pointer;
+  border-color: $ms-color-neutralTertiaryAlt;
 
-  // When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding
-  .ms-DocumentCardLocation + .ms-DocumentCardTitle {
-    padding-top: 4px;
+  // Place a heavier border within the document card
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid $ms-color-neutralTertiaryAlt;
+    pointer-events: none;
   }
+}
 
-  // Modifier: Compact layout
-  .ms-DocumentCard--compact {
-    border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
+// When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding
+.location + .title {
+  padding-top: 4px;
+}
+
+// Modifier: Compact layout
+.rootIsCompact {
+  border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
+  display: flex;
+  max-width: 480px;
+  height: 109px;
+  :global(.ms-DocumentCard-details) {
     display: flex;
-    max-width: 480px;
-    height: 109px;
-
-    // Remove the usual accent color from the preview
-    .ms-DocumentCardPreview {
-      border-bottom: none;
-      max-height: 106px;
-      max-width: 144px;
-
-      .ms-DocumentCardPreview-icon {
-        .ms-Image-image {
-          max-height: 32px;
-          max-width: 32px;
-        }
+    flex-direction: column;
+    flex: 1;
+    justify-content: space-between;
+  }
+  // Remove the usual accent color from the preview
+  .preview {
+    border-bottom: none;
+    max-height: 106px;
+    max-width: 144px;
+
+    .icon {
+      :global(.ms-Image-image) {
+        max-height: 32px;
+        max-width: 32px;
       }
     }
+  }
 
-    .ms-DocumentCardPreview {
-      @include border-right(1px, solid, $ms-color-neutralLight);
-    }
+  .preview {
+    @include border-right(1px, solid, $ms-color-neutralLight);
+  }
+
+  .title {
+      padding: 12px 16px 8px 16px;
+      @include ms-font-m;
+      line-height: 16px;
+  }
+
+  .activity {
+    padding-bottom: 12px;
+  }
+}
 
-    // Expand the details area to fill the remaining width
-    .ms-DocumentCard-details {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      justify-content: space-between;
-    }
 
-    .ms-DocumentCardTitle {
-        padding: 12px 16px 8px 16px;
-        @include ms-font-m;
-        line-height: 16px;
+/** Actions **/
+$ms-DocumentCardActions-actionSize: 34px;
+$ms-DocumentCardActions-horizontalPadding: 12px;
+$ms-DocumentCardActions-verticalPadding: 4px;
+
+.actions {
+  height: $ms-DocumentCardActions-actionSize;
+  padding: $ms-DocumentCardActions-verticalPadding $ms-DocumentCardActions-horizontalPadding;
+  position: relative;
+}
+
+.action {
+  @include float(left);
+  @include margin-right(4px);
+  color: $ms-color-neutralSecondary;
+  cursor: pointer;
+
+  :global(.ms-Button) {
+    font-size: 16px;
+    height: $ms-DocumentCardActions-actionSize;
+    width: $ms-DocumentCardActions-actionSize;
+  }
+
+  :global(.ms-Button:hover) {
+    :global(.ms-Button-icon) {
+      color: #1174c3;
+      cursor: pointer;
     }
+  }
+}
+
+.views {
+  @include text-align(right);
+  line-height: $ms-DocumentCardActions-actionSize;
+
+  :global(.ms-Icon) {
+    @include margin-right(4px);
+    font-size: $ms-icon-size-m;
+    vertical-align: top;
+  }
+}
+
+
+/** Activity **/
+$ms-DocumentCardActivity-horizontalPadding: 16px;
+$ms-DocumentCardActivity-imageSize: 25px;
+$ms-DocumentCardActivity-verticalPadding: 8px;
+$ms-DocumentCardActivity-personaTextGutter: 8px;
+
+.activity {
+  padding: $ms-DocumentCardActivity-verticalPadding $ms-DocumentCardActivity-horizontalPadding;
+  position: relative;
+}
+
+.activityIsMultiplePeople {
+  .avatar:nth-of-type(2) {
+    @include margin-left(-16px);
+  }
+
+  .activityDetails {
+    @include left($ms-DocumentCardActivity-horizontalPadding + ($ms-DocumentCardActivity-imageSize * 1.5) + $ms-DocumentCardActivity-personaTextGutter);
+  }
+}
+
+.avatars {
+  @include margin-left(-2px); // Avatars sit outside of the usual padding for visual balance
+}
+
+.avatar {
+  border: 2px solid #fafafa; // Match the background of the card
+  border-radius: 50%;
+  height: $ms-DocumentCardActivity-imageSize;
+  width: $ms-DocumentCardActivity-imageSize;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+
+  :global(.ms-Persona-initials) {
+    height: $ms-DocumentCardActivity-imageSize;
+    line-height: $ms-DocumentCardActivity-imageSize;
+    font-size: $ms-font-size-s;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+}
+
+.avatarInitials {
+  background: $ms-color-themePrimary;
+  color: $ms-color-white;
+  font-weight: 100;
+}
 
-    .ms-DocumentCardActivity{
-      padding-bottom: 12px;
+.activityDetails {
+  @include left($ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter);
+  height: $ms-DocumentCardActivity-imageSize;
+  position: absolute;
+  top: $ms-DocumentCardActivity-verticalPadding;
+  width: calc(100% - #{$ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter + $ms-DocumentCardActivity-horizontalPadding});
+}
+
+.name,
+.activityActivity {
+  display: block;
+  @include ms-font-s;
+  color: $ms-color-neutralSecondaryAlt;
+  line-height: 15px;
+  height: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.name {
+  color: $ms-color-neutralPrimary;
+  @include ms-fontWeight-semibold;
+}
+
+/** Location **/
+.location {
+  @include ms-font-s;
+  color: $ms-color-neutralPrimary;
+  display: block;
+  padding: 8px 16px;
+  position: relative;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    color: $ms-color-themePrimary;
+    cursor: pointer;
+  }
+}
+
+
+/** Preview **/
+.preview {
+  border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
+  position: relative;
+  background-color: $ms-color-neutralLighterAlt;
+  overflow: hidden;
+
+  &.previewIsFileList {
+    background-color: $ms-color-white;
+  }
+}
+
+.icon {
+  @include left(10px);
+  bottom: 10px;
+  position: absolute;
+}
+
+.fileList {
+  @include padding(16px, 16px, 0, 16px);
+  list-style-type: none;
+  margin: 0;
+
+  li {
+    height: 16px;
+    line-height: 16px; // Vertically center the text
+    margin-bottom: 8px;
+    overflow: hidden;
+    @include padding-left(24px); // Make room for icon
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  a {
+    font-size: $ms-font-size-s;
+    text-decoration: none;
+    color: $ms-color-neutralDark;
+
+    &:hover {
+      color: $ms-color-themePrimary;
     }
   }
 }
+
+.fileListIcon {
+  @include left(0);
+  position: absolute;
+  top: 0;
+}
+
+.fileListMore {
+  @include padding(0px, 16px, 8px, 16px);
+  display: block;
+  font-size: $ms-font-size-s;
+}
+
+
+/** Title **/
+$DocumentCard-title-lineHeight: 21px;
+.title {
+  padding: 8px 16px;
+  display: block;
+  @include ms-font-l;
+  color: $ms-color-neutralPrimary;
+  height: 38px; // Two lines of text, making sure the third line is hidden
+  line-height: $DocumentCard-title-lineHeight;
+  overflow: hidden;
+  word-wrap: break-word;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
index f5385e58b63127..124f52758f1206 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
@@ -4,7 +4,7 @@ import {
   autobind,
   css
 } from '../../Utilities';
-import './DocumentCard.scss';
+import styles from './DocumentCard.scss';
 
 export class DocumentCard extends React.Component<IDocumentCardProps, any> {
   public static defaultProps: IDocumentCardProps = {
@@ -28,9 +28,10 @@ export class DocumentCard extends React.Component<IDocumentCardProps, any> {
         className={
           css(
             'ms-DocumentCard',
+            styles.root,
             {
-              'ms-DocumentCard--actionable': actionable,
-              'ms-DocumentCard--compact': type === DocumentCardType.compact ? true : false
+              ['ms-DocumentCard--actionable ' + styles.rootIsActionable]: actionable,
+              ['ms-DocumentCard--compact ' + styles.rootIsCompact]: type === DocumentCardType.compact ? true : false
             },
             className
           )
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss
deleted file mode 100644
index 1a244eae47a472..00000000000000
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@import '../../common/common';
-
-$ms-DocumentCardActions-actionSize: 34px;
-$ms-DocumentCardActions-horizontalPadding: 12px;
-$ms-DocumentCardActions-verticalPadding: 4px;
-
-:global {
-  .ms-DocumentCardActions {
-    height: $ms-DocumentCardActions-actionSize;
-    padding: $ms-DocumentCardActions-verticalPadding $ms-DocumentCardActions-horizontalPadding;
-    position: relative;
-  }
-
-  .ms-DocumentCardActions-actions {
-    @include left($ms-DocumentCardActions-horizontalPadding);
-    position: absolute;
-    top: $ms-DocumentCardActions-verticalPadding;
-  }
-
-  .ms-DocumentCardActions-action {
-    @include float(left);
-    @include margin-right(4px);
-    color: $ms-color-neutralSecondary;
-    cursor: pointer;
-
-    .ms-Button {
-      font-size: 16px;
-      height: $ms-DocumentCardActions-actionSize;
-      width: $ms-DocumentCardActions-actionSize;
-    }
-
-    .ms-Button:hover .ms-Button-icon {
-      color: #1174c3;
-      cursor: pointer;
-    }
-  }
-
-  .ms-DocumentCardActions-views {
-    @include text-align(right);
-    line-height: $ms-DocumentCardActions-actionSize;
-
-    .ms-Icon {
-      @include margin-right(4px);
-      font-size: $ms-icon-size-m;
-      vertical-align: top;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
index f087f049a11ec2..ee4826c87b3e7d 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { css } from '../../Utilities';
 import { IDocumentCardActionsProps } from './DocumentCard.Props';
 import { Button, ButtonType } from '../../Button';
-import './DocumentCardActions.scss';
+import styles from './DocumentCard.scss';
 
 export class DocumentCardActions extends React.Component<IDocumentCardActionsProps, any> {
   public render() {
     let { actions, views } = this.props;
 
     return (
-      <div className='ms-DocumentCardActions'>
+      <div className={ css('ms-DocumentCardActions', styles.actions) }>
 
         { actions && actions.map((action, index) => {
           action.buttonType = ButtonType.icon;
           return (
-            <div className='ms-DocumentCardActions-action' key={ index }>
+            <div className={ css('ms-DocumentCardActions-action', styles.action) } key={ index }>
               <Button { ...action } />
             </div>
           );
         }) }
 
         { views > 0 && (
-          <div className='ms-DocumentCardActions-views'>
+          <div className={ css('ms-DocumentCardActions-views', styles.views) }>
             <i className='ms-Icon ms-Icon--View' />
             { views }
           </div>
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss
deleted file mode 100644
index 11043ef6fa4e55..00000000000000
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@import '../../common/common';
-
-$ms-DocumentCardActivity-horizontalPadding: 16px;
-$ms-DocumentCardActivity-imageSize: 25px;
-$ms-DocumentCardActivity-verticalPadding: 8px;
-$ms-DocumentCardActivity-personaTextGutter: 8px;
-
-:global {
-  .ms-DocumentCardActivity {
-    padding: $ms-DocumentCardActivity-verticalPadding $ms-DocumentCardActivity-horizontalPadding;
-    position: relative;
-  }
-
-  .ms-DocumentCardActivity--multiplePeople {
-    .ms-DocumentCardActivity-avatar:nth-of-type(2) {
-      @include margin-left(-16px);
-    }
-
-    .ms-DocumentCardActivity-details {
-      @include left($ms-DocumentCardActivity-horizontalPadding + ($ms-DocumentCardActivity-imageSize * 1.5) + $ms-DocumentCardActivity-personaTextGutter);
-    }
-  }
-
-  .ms-DocumentCardActivity-avatars {
-    @include margin-left(-2px); // Avatars sit outside of the usual padding for visual balance
-  }
-
-  .ms-DocumentCardActivity-avatar {
-    border: 2px solid #fafafa; // Match the background of the card
-    border-radius: 50%;
-    height: $ms-DocumentCardActivity-imageSize;
-    width: $ms-DocumentCardActivity-imageSize;
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-    text-align: center;
-
-    .ms-Persona-initials {
-      height: $ms-DocumentCardActivity-imageSize;
-      line-height: $ms-DocumentCardActivity-imageSize;
-      font-size: $ms-font-size-s;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-    }
-  }
-
-  .ms-DocumentCardActivity-details {
-    @include left($ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter);
-    height: $ms-DocumentCardActivity-imageSize;
-    position: absolute;
-    top: $ms-DocumentCardActivity-verticalPadding;
-    width: calc(100% - #{$ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter + $ms-DocumentCardActivity-horizontalPadding});
-  }
-
-  .ms-DocumentCardActivity-name,
-  .ms-DocumentCardActivity-activity {
-    display: block;
-    @include ms-font-s;
-    color: $ms-color-neutralSecondaryAlt;
-    line-height: 15px;
-    height: 15px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .ms-DocumentCardActivity-name {
-    color: $ms-color-neutralPrimary;
-    @include ms-fontWeight-semibold;
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
index a5de70b2195a30..4785d70b7c5491 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
@@ -2,11 +2,7 @@ import * as React from 'react';
 import { css } from '../../Utilities';
 import { IDocumentCardActivityProps, IDocumentCardActivityPerson } from './DocumentCard.Props';
 import { Image } from '../../Image';
-import {
-  PERSONA_INITIALS_COLOR,
-  PersonaInitialsColor
-} from '../../Persona';
-import './DocumentCardActivity.scss';
+import styles from './DocumentCard.scss';
 
 export class DocumentCardActivity extends React.Component<IDocumentCardActivityProps, any> {
   public render() {
@@ -14,13 +10,13 @@ export class DocumentCardActivity extends React.Component<IDocumentCardActivityP
 
     return (
       people && people.length > 0 &&
-      <div className={ css('ms-DocumentCardActivity', {
-        'ms-DocumentCardActivity--multiplePeople': people.length > 1
+      <div className={ css('ms-DocumentCardActivity', styles.activity, {
+        ['ms-DocumentCardActivity--multiplePeople ' + styles.activityIsMultiplePeople]: people.length > 1
       }) }>
         { this._renderAvatars(people) }
-        <div className='ms-DocumentCardActivity-details'>
-          <span className='ms-DocumentCardActivity-name'>{ this._getNameString(people) }</span>
-          <span className='ms-DocumentCardActivity-activity'>{ activity }</span>
+        <div className={ css('ms-DocumentCardActivity-details', styles.activityDetails) }>
+          <span className={ css('ms-DocumentCardActivity-name', styles.name) }>{ this._getNameString(people) }</span>
+          <span className={ css('ms-DocumentCardActivity-activity', styles.activityActivity) }>{ activity }</span>
         </div>
       </div>
     );
@@ -28,7 +24,7 @@ export class DocumentCardActivity extends React.Component<IDocumentCardActivityP
 
   private _renderAvatars(people: IDocumentCardActivityPerson[]): React.ReactElement<{}> {
     return (
-      <div className='ms-DocumentCardActivity-avatars'>
+      <div className={ css('ms-DocumentCardActivity-avatars', styles.avatars) }>
         { people.length > 1 ? this._renderAvatar(people[1]) : null }
         { this._renderAvatar(people[0]) }
       </div>
@@ -36,12 +32,11 @@ export class DocumentCardActivity extends React.Component<IDocumentCardActivityP
   }
 
   private _renderAvatar(person: IDocumentCardActivityPerson) {
-    let initialsColor = person.initialsColor === undefined || person.initialsColor === null ? PersonaInitialsColor.blue : person.initialsColor;
 
     return (
-      <div className='ms-DocumentCardActivity-avatar'>
+      <div className={ css('ms-DocumentCardActivity-avatar', styles.avatar) }>
         { person.initials && (
-          <div className={ css('ms-Persona-initials', PERSONA_INITIALS_COLOR[initialsColor]) } role='presentation'>
+          <div className={ css('ms-Persona-initials', styles.avatarInitials) } role='presentation'>
             { person.initials }
           </div>
         ) }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss
deleted file mode 100644
index 9b5b441fa8c002..00000000000000
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import '../../common/common';
-
-:global {
-  .ms-DocumentCardLocation {
-    @include ms-font-s;
-    color: $ms-color-neutralPrimary;
-    display: block;
-    padding: 8px 16px;
-    position: relative;
-    text-decoration: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    &:hover {
-      color: $ms-color-themePrimary;
-      cursor: pointer;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
index ebbc2e92c8e5fb..da11c0b26ca442 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
+import { css } from '../../Utilities';
 import { IDocumentCardLocationProps } from './DocumentCard.Props';
-import './DocumentCardLocation.scss';
+import styles from './DocumentCard.scss';
 
 export class DocumentCardLocation extends React.Component<IDocumentCardLocationProps, any> {
   public render() {
     let { location, locationHref, ariaLabel, onClick } = this.props;
 
     return (
-      <a className='ms-DocumentCardLocation' href={ locationHref } onClick={ onClick } aria-label={ ariaLabel }>{ location }</a>
+      <a className={ css('ms-DocumentCardLocation', styles.location) }
+        href={ locationHref } onClick={ onClick } aria-label={ ariaLabel }>{ location }</a>
     );
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss
deleted file mode 100644
index 51c1c3a14ee97e..00000000000000
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import '../../common/common';
-
-:global {
-  .ms-DocumentCardPreview {
-    border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
-    position: relative;
-    background-color: $ms-color-neutralLighterAlt;
-    overflow: hidden;
-
-    &.is-fileList {
-      background-color: $ms-color-white;
-    }
-  }
-
-  .ms-DocumentCardPreview-icon {
-    @include left(10px);
-    bottom: 10px;
-    position: absolute;
-  }
-
-  .ms-DocumentCardPreview-fileList {
-    @include padding(16px, 16px, 0, 16px);
-    list-style-type: none;
-    margin: 0;
-
-    li {
-      height: 16px;
-      line-height: 16px; // Vertically center the text
-      margin-bottom: 8px;
-      overflow: hidden;
-      @include padding-left(24px); // Make room for icon
-      position: relative;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    a {
-      font-size: $ms-font-size-s;
-      text-decoration: none;
-      color: $ms-color-neutralDark;
-
-      &:hover {
-        color: $ms-color-themePrimary;
-      }
-    }
-  }
-
-  .ms-DocumentCardPreview-fileListIcon {
-    @include left(0);
-    position: absolute;
-    top: 0;
-  }
-
-  .ms-DocumentCardPreview-fileListMore {
-    @include padding(0px, 16px, 8px, 16px);
-    display: block;
-    font-size: $ms-font-size-s;
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
index e03fd5f75a4933..1b06cd3b0058d5 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -5,7 +5,7 @@ import {
   autobind,
   css
 } from '../../Utilities';
-import './DocumentCardPreview.scss';
+import styles from './DocumentCard.scss';
 
 const LIST_ITEM_COUNT = 3;
 
@@ -32,7 +32,7 @@ export class DocumentCardPreview extends React.Component<IDocumentCardPreviewPro
     }
 
     return (
-      <div className={ css('ms-DocumentCardPreview', isFileList && 'is-fileList') } style={ style }>
+      <div className={ css('ms-DocumentCardPreview', styles.preview, isFileList && ('is-fileList ' + styles.previewIsFileList)) } style={ style }>
         { preview }
       </div>
     );
@@ -52,7 +52,7 @@ export class DocumentCardPreview extends React.Component<IDocumentCardPreviewPro
 
     let icon;
     if (previewImage.iconSrc) {
-      icon = <Image className='ms-DocumentCardPreview-icon' src={ previewImage.iconSrc } role='presentation' alt='' />;
+      icon = <Image className={ css('ms-DocumentCardPreview-icon', styles.icon) } src={ previewImage.iconSrc } role='presentation' alt='' />;
     }
 
     return (
@@ -80,7 +80,7 @@ export class DocumentCardPreview extends React.Component<IDocumentCardPreviewPro
     let fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map((file, fileIndex) => (
       <li key={ fileIndex }>
         <Image
-          className='ms-DocumentCardPreview-fileListIcon'
+          className={ css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon) }
           src={ file.iconSrc }
           role='presentation'
           alt=''
@@ -92,11 +92,11 @@ export class DocumentCardPreview extends React.Component<IDocumentCardPreviewPro
 
     return (
       <div>
-        <ul className='ms-DocumentCardPreview-fileList'>
+        <ul className={ css('ms-DocumentCardPreview-fileList', styles.fileList) }>
           { fileListItems }
         </ul>
         { overflowText &&
-          <span className='ms-DocumentCardPreview-fileListMore'>{ overflowText }</span>
+          <span className={ css('ms-DocumentCardPreview-fileListMore', styles.fileListMore) }>{ overflowText }</span>
         }
       </div>
     );
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss
deleted file mode 100644
index 526739d77ad3b0..00000000000000
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import '../../common/common';
-
-$DocumentCard-title-lineHeight: 21px;
-
-:global {
-  .ms-DocumentCardTitle {
-    padding: 8px 16px;
-    display: block;
-    @include ms-font-l;
-    color: $ms-color-neutralPrimary;
-    height: 38px; // Two lines of text, making sure the third line is hidden
-    line-height: $DocumentCard-title-lineHeight;
-    overflow: hidden;
-    word-wrap: break-word;
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
index 65876d671dbdb5..c84f9b709b1da6 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -4,10 +4,11 @@ import * as React from 'react';
 
 import {
   BaseComponent,
-  autobind
+  autobind,
+  css
 } from '../../Utilities';
 import { IDocumentCardTitleProps } from './DocumentCard.Props';
-import './DocumentCardTitle.scss';
+import styles from './DocumentCard.scss';
 
 export interface IDocumentCardTitleState {
   truncatedTitleFirstPiece?: string;
@@ -69,11 +70,11 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
     let documentCardTitle;
     if (shouldTruncate && this._isTruncated) {
       documentCardTitle = (
-        <div className='ms-DocumentCardTitle' ref={ this._resolveRef('_titleElement') } title={ title }>{ truncatedTitleFirstPiece }&hellip;{ truncatedTitleSecondPiece }</div>
+        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>{ truncatedTitleFirstPiece }&hellip;{ truncatedTitleSecondPiece }</div>
       );
     } else {
       documentCardTitle = (
-        <div className='ms-DocumentCardTitle' ref={ this._resolveRef('_titleElement') } title={ title }>{ title }</div>
+        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>{ title }</div>
       );
     }
 
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss
index 664a872f799afb..304f064e0efd0e 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss
@@ -31,205 +31,208 @@ $DropDown-item-height: 36px;
   }
 }
 
-:global {
-  .ms-Dropdown {
-    @include ms-u-normalize;
-    @include ms-font-m;
-    color: $ms-color-neutralPrimary;
-
-    margin-bottom: 10px;
-    position: relative;
-    outline: 0;
-    user-select: none;
-
-    &:hover,
-    &:focus,
-    &:active {
-      .ms-Dropdown-title,
-      .ms-Dropdown-caretDown {
-        color: $ms-color-black;
-
-        @media screen and (-ms-high-contrast: active) {
-          color: $ms-color-contrastBlackSelected;
-        }
-
-        @media screen and (-ms-high-contrast: black-on-white) {
-          color: $ms-color-contrastWhiteSelected;
-        }
-      }
-    }
-
-    &:hover,
-    &:active {
-      .ms-Dropdown-title {
-        border-color: $ms-color-themePrimary;
-
-        @media screen and (-ms-high-contrast: active) {
-          border-color: $ms-color-contrastBlackSelected;
-        }
+.root {
+  @include ms-u-normalize;
+  @include ms-font-m;
+  color: $ms-color-neutralPrimary;
+
+  margin-bottom: 10px;
+  position: relative;
+  outline: 0;
+  user-select: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    .title,
+    .caretDown {
+      color: $ms-color-black;
 
-        @media screen and (-ms-high-contrast: black-on-white) {
-          border-color: $ms-color-contrastWhiteSelected;
-        }
+      @media screen and (-ms-high-contrast: active) {
+        color: $ms-color-contrastBlackSelected;
       }
-    }
-
-    &:focus {
-      .ms-Dropdown-title {
-        border-color: $ms-color-themePrimary;
 
-        @media screen and (-ms-high-contrast: active) {
-          border-color: $ms-color-contrastBlackSelected;
-        }
-
-        @media screen and (-ms-high-contrast: black-on-white) {
-          border-color: $ms-color-contrastWhiteSelected;
-        }
+      @media screen and (-ms-high-contrast: black-on-white) {
+        color: $ms-color-contrastWhiteSelected;
       }
     }
-
-    .ms-Label {
-      display: inline-block;
-      margin-bottom: 8px;
-    }
   }
 
-  //== State: A disabled dropdown
-  .ms-Dropdown.is-disabled {
-    .ms-Dropdown-title {
-      background-color: $ms-color-neutralLighter;
-      border-color: $ms-color-neutralLighter;
-      color: $ms-color-neutralTertiary;
-      cursor: default;
+  &:hover,
+  &:active {
+    .title {
+      border-color: $ms-color-themePrimary;
 
       @media screen and (-ms-high-contrast: active) {
-        border-color: $ms-color-contrastBlackDisabled;
-        color: $ms-color-contrastBlackDisabled;
+        border-color: $ms-color-contrastBlackSelected;
       }
 
       @media screen and (-ms-high-contrast: black-on-white) {
-        border-color: $ms-color-contrastWhiteDisabled;
-        color: $ms-color-contrastWhiteDisabled;
+        border-color: $ms-color-contrastWhiteSelected;
       }
     }
+  }
 
-    .ms-Dropdown-caretDown {
-      color: $ms-color-neutralTertiary;
+  &:focus {
+    .title {
+      border-color: $ms-color-themePrimary;
 
       @media screen and (-ms-high-contrast: active) {
-        color: $ms-color-contrastBlackDisabled;
+        border-color: $ms-color-contrastBlackSelected;
       }
 
       @media screen and (-ms-high-contrast: black-on-white) {
-        color: $ms-color-contrastWhiteDisabled;
+        border-color: $ms-color-contrastWhiteSelected;
       }
     }
   }
 
-  .ms-Dropdown-caretDown {
-    color: $ms-color-neutralDark;
-    font-size: $ms-icon-size-s;
-    position: absolute;
-    top: 0px;
-    @include right(12px);
-    pointer-events: none;
-    line-height: $DropDown-height;
+  :global(.ms-Label) {
+    display: inline-block;
+    margin-bottom: 8px;
   }
+}
 
-  // Style the new, replacement component
-  .ms-Dropdown-title {
-    @include ms-u-normalize;
-    background: $ms-color-white;
-    border: 1px solid $ms-color-neutralTertiaryAlt;
-    cursor: pointer;
-    display: block;
-    height: $DropDown-height;
-    line-height: $DropDown-height - 2px; // height minus the border
-    @include padding(0, $DropDown-height, 0, 12px);
-    position: relative;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+//== State: A disabled dropdown
+.root.rootIsDisabled {
+  .title {
+    background-color: $ms-color-neutralLighter;
+    border-color: $ms-color-neutralLighter;
+    color: $ms-color-neutralTertiary;
+    cursor: default;
+
+    @media screen and (-ms-high-contrast: active) {
+      border-color: $ms-color-contrastBlackDisabled;
+      color: $ms-color-contrastBlackDisabled;
+    }
+
+    @media screen and (-ms-high-contrast: black-on-white) {
+      border-color: $ms-color-contrastWhiteDisabled;
+      color: $ms-color-contrastWhiteDisabled;
+    }
   }
 
-  .ms-Dropdown-callout {
-    box-shadow: 0 0px 15px -5px rgba(0, 0, 0, 0.4);
-    border: 1px solid $ms-color-neutralLight;
+  .caretDown {
+    color: $ms-color-neutralTertiary;
+
+    @media screen and (-ms-high-contrast: active) {
+      color: $ms-color-contrastBlackDisabled;
+    }
+
+    @media screen and (-ms-high-contrast: black-on-white) {
+      color: $ms-color-contrastWhiteDisabled;
+    }
   }
+}
+
+.caretDown {
+  color: $ms-color-neutralDark;
+  font-size: $ms-icon-size-s;
+  position: absolute;
+  top: 0px;
+  @include right(12px);
+  pointer-events: none;
+  line-height: $DropDown-height;
+}
+
+// Style the new, replacement component
+.title {
+  @include ms-u-normalize;
+  background: $ms-color-white;
+  border: 1px solid $ms-color-neutralTertiaryAlt;
+  cursor: pointer;
+  display: block;
+  height: $DropDown-height;
+  line-height: $DropDown-height - 2px; // height minus the border
+  @include padding(0, $DropDown-height, 0, 12px);
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
-  .ms-Dropdown-panel {
+.panel {
     // Force drop shadow even under medium breakpoint
-    .ms-Panel-main {
+    :global(.ms-Panel-main) {
       @include drop-shadow(-30px, 0px, 30px, -30px, .2);
     }
     // Remove padding as items have their own padding and bg
-    .ms-Panel-contentInner {
+    :global(.ms-Panel-contentInner) {
       padding: 0 0 20px
     }
   }
 
-  // Container for the dropdown items, displayed as a panel on small screens.
-  .ms-Dropdown-item {
-    background: transparent;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: block;
-    width: 100%;
-    text-align: left;
-    min-height: $DropDown-item-height;
-    line-height: 20px;
-    padding: 5px 16px;
-    position: relative;
-    border: 1px solid transparent;
-    word-wrap: break-word;
+.callout {
+  box-shadow: 0 0px 15px -5px rgba(0, 0, 0, 0.4);
+  border: 1px solid $ms-color-neutralLight;
+}
 
-    @media screen and (-ms-high-contrast: active) {
-      border-color: $ms-color-black;
-    }
+.items {
+  display: block;
+}
 
-    @media screen and (-ms-high-contrast: black-on-white) {
-      border-color: $ms-color-white;
-    }
+// Container for the dropdown items, displayed as a panel on small screens.
+.item {
+  background: transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: $DropDown-item-height;
+  line-height: 20px;
+  padding: 5px 16px;
+  position: relative;
+  border: 1px solid transparent;
+  word-wrap: break-word;
+  text-align: left;
 
-    &:hover {
-      background-color: $Dropdown-selectedItem-hover-bg;
-      color: $ms-color-black;
+  @media screen and (-ms-high-contrast: active) {
+    border-color: $ms-color-black;
+  }
 
-      @include highContrastListItemState;
-    }
+  @media screen and (-ms-high-contrast: black-on-white) {
+    border-color: $ms-color-white;
+  }
 
-    @include focus-border();
+  &:hover {
+    background-color: $Dropdown-selectedItem-hover-bg;
+    color: $ms-color-black;
 
-    &:focus {
-      background-color: $ms-color-neutralLighter;
-    }
+    @include highContrastListItemState;
+  }
 
-    &:active {
-      background-color: $Dropdown-selectedItem-hover-bg;
-      color: $ms-color-black;
-    }
+  @include focus-border();
 
-    &.is-disabled {
-      background: $ms-color-white;
-      color: $ms-color-neutralTertiary;
-      cursor: default;
-    }
+  &:focus {
+    background-color: $ms-color-neutralLighter;
   }
 
-  //== State: A selected dropdown item
-  // Note: .ms-Dropdown-item--selected is deprecated and will be removed in a future version.
-  // Use .is-selected instead.
-  .ms-Dropdown-item.is-selected,
-  .ms-Dropdown-item.ms-Dropdown-item--selected {
-    background-color: $Dropdown-selectedItem-bg;
+  &:active {
+    background-color: $Dropdown-selectedItem-hover-bg;
     color: $ms-color-black;
+  }
 
-    &:hover {
-      background-color: $Dropdown-selectedItem-bg;
-    }
+  &.itemIsDisabled {
+    background: $ms-color-white;
+    color: $ms-color-neutralTertiary;
+    cursor: default;
+  }
+  :global(.ms-Button-flexContainer) {
+    justify-content: flex-start;
+  }
+}
 
-    @include focus-border();
+//== State: A selected dropdown item
+.item.itemIsSelected {
+  background-color: $Dropdown-selectedItem-bg;
+  color: $ms-color-black;
 
-    @include highContrastListItemState;
+  &:hover {
+    background-color: $Dropdown-selectedItem-bg;
   }
-}
\ No newline at end of file
+
+  @include focus-border();
+
+  @include highContrastListItemState;
+}
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
index d2ee7b51f6777d..a93f7ad89da0ff 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import { IDropdownProps, IDropdownOption } from './Dropdown.Props';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { Callout } from '../../Callout';
-import { BaseButton } from '../../Button';
-import { List } from '../../List';
+import { CommandButton } from '../../Button';
 import { Panel } from '../../Panel';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
@@ -16,7 +15,7 @@ import {
   findIndex,
   getId
 } from '../../Utilities';
-import './Dropdown.scss';
+import styles from './Dropdown.scss';
 
 // Internal only props iterface to support mixing in responsive mode
 export interface IDropdownInternalProps extends IDropdownProps, IWithResponsiveModeState {
@@ -72,7 +71,12 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey)
       });
     }
+  }
 
+  public componentDidUpdate(prevProps: IDropdownProps, prevState: IDropdownState) {
+    if (prevState.isOpen === true && this.state.isOpen === false) {
+      this._dropDown.focus();
+    }
   }
 
   // Primary Render
@@ -97,10 +101,11 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         ) }
         <div
           data-is-focusable={ !disabled }
-          ref={ (c): HTMLElement => this._dropDown = c }
+          ref={ this._resolveRef('_dropDown') }
           id={ id }
-          className={ css('ms-Dropdown', className, {
-            'is-open': isOpen, 'is-disabled': disabled
+          className={ css('ms-Dropdown', styles.root, className, {
+            'is-open': isOpen,
+            ['is-disabled ' + styles.rootIsDisabled]: disabled
           }) }
           tabIndex={ disabled ? -1 : 0 }
           onKeyDown={ this._onDropdownKeyDown }
@@ -114,7 +119,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         >
           <span
             id={ id + '-option' }
-            className='ms-Dropdown-title'
+            className={ css('ms-Dropdown-title', styles.title) }
             key={ selectedIndex }
             aria-atomic={ true }
           >
@@ -122,7 +127,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
               onRenderTitle(selectedOption, this._onRenderTitle)
             ) }
           </span>
-          <i className='ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown'></i>
+          <i className={ css('ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown', styles.caretDown) }></i>
         </div>
         { isOpen && (
           onRenderContainer(this.props, this._onRenderContainer)
@@ -174,7 +179,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     return (
       isSmall ?
         <Panel
-          className='ms-Dropdown-panel'
+          className={ css('ms-Dropdown-panel', styles.panel) }
           isOpen={ true }
           isLightDismiss={ true }
           onDismissed={ this._onDismiss }
@@ -185,7 +190,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         :
         <Callout
           isBeakVisible={ false }
-          className='ms-Dropdown-callout'
+          className={ css('ms-Dropdown-callout', styles.callout) }
           gapSpace={ 0 }
           doNotLayer={ false }
           targetElement={ this._dropDown }
@@ -215,19 +220,12 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         ref={ this._resolveRef('_focusZone') }
         direction={ FocusZoneDirection.vertical }
         defaultActiveElement={ '#' + id + '-list' + selectedIndex }
+        id={ id + '-list' }
+        className={ css('ms-Dropdown-items', styles.items) }
+        aria-labelledby={ id + '-label' }
+        onKeyDown={ this._onZoneKeyDown }
       >
-        <List
-          id={ id + '-list' }
-          className='ms-Dropdown-items'
-          aria-labelledby={ id + '-label' }
-          items={ props.options }
-          onRenderCell={
-            (item: IDropdownOption, index: number) => {
-              item.index = index;
-              return onRenderItem(item, this._onRenderItem);
-            }
-          }
-        />
+        { this.props.options.map((item, index) => onRenderItem({ ...item, index }, this._onRenderItem)) }
       </FocusZone>
     );
   }
@@ -238,19 +236,23 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     let { onRenderOption = this._onRenderOption } = this.props;
     let id = this._id;
     return (
-      <BaseButton
+      <CommandButton
         id={ id + '-list' + item.index }
         ref={ Dropdown.Option + item.index }
         key={ item.key }
         data-index={ item.index }
         data-is-focusable={ true }
-        className={ css('ms-Dropdown-item', { 'is-selected': this.state.selectedIndex === item.index }) }
+        className={ css(
+          'ms-Dropdown-item', styles.item, {
+            ['is-selected ' + styles.itemIsSelected]: this.state.selectedIndex === item.index,
+            ['is-disabled ' + styles.itemIsDisabled]: this.props.disabled === true
+          }
+        ) }
         onClick={ () => this._onItemClick(item.index) }
-        onFocus={ () => this.setSelectedIndex(item.index) }
         role='option'
         aria-selected={ this.state.selectedIndex === item.index ? 'true' : 'false' }
         aria-label={ item.text }
-      > { onRenderOption(item, this._onRenderOption) }</BaseButton>
+      > { onRenderOption(item, this._onRenderOption) }</CommandButton>
     );
   }
 
@@ -275,6 +277,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   @autobind
   private _onDismiss() {
     this.setState({ isOpen: false });
+    this._dropDown.focus();
   }
 
   private _getSelectedIndex(options: IDropdownOption[], selectedKey: string | number) {
@@ -305,7 +308,11 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         break;
 
       case KeyCodes.down:
-        this.setSelectedIndex(this.state.selectedIndex + 1);
+        if (ev.altKey || ev.metaKey) {
+          this.setState({ isOpen: true });
+        } else {
+          this.setSelectedIndex(this.state.selectedIndex + 1);
+        }
         break;
 
       case KeyCodes.home:
@@ -324,6 +331,30 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     ev.preventDefault();
   }
 
+  @autobind
+  private _onZoneKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+    switch (ev.which) {
+
+      case KeyCodes.up:
+        if (ev.altKey || ev.metaKey) {
+          this.setState({ isOpen: false });
+          break;
+        }
+
+        return;
+
+      case KeyCodes.escape:
+        this.setState({ isOpen: false });
+        break;
+
+      default:
+        return;
+    }
+
+    ev.stopPropagation();
+    ev.preventDefault();
+  }
+
   @autobind
   private _onDropdownClick() {
     let { disabled, isDisabled } = this.props;
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
index d409581f87698c..4dc0dcbe58c8c5 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
@@ -1,64 +1,63 @@
 @import '../../common/common';
 
-:global {
-  .ms-Facepile {
-    position: relative;
-    width: auto;
-  }
-
-  .ms-Facepile-clear {
-    clear: both;
-  }
-
-  .ms-Facepile-itemButton {
-    @include focus-outline();
-    position: relative;
-    text-align: center;
-    @include float(left);
-    padding: 0;
-    @include margin-right(4px);
-    margin-bottom: 4px;
-    border-radius: 50%;
-    vertical-align: top;
+.root {
+  position: relative;
+  width: auto;
+}
 
-    .ms-Persona-details {
-      flex: 1 0 auto;
-    }
-  }
+.clear {
+  clear: both;
+}
 
-  button.ms-Facepile-itemButton {
-    background: none;
-    display: inline;
+.itemButton {
+  @include focus-outline();
+  position: relative;
+  text-align: center;
+  @include float(left);
+  padding: 0;
+  @include margin-right(4px);
+  margin-bottom: 4px;
+  border-radius: 50%;
+  vertical-align: top;
+  :global(.ms-Persona-details) {
+    flex: 1 0 auto;
   }
+}
 
-  button.ms-Facepile-addButton {
-    font-size: $ms-font-size-m;
-    color: $ms-color-white;
-    background-color: $ms-color-themePrimary;
-
-    &:hover, &:focus {
-      background-color: $ms-color-themeDark;
-    }
+button.itemButton {
+  display: inline;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  border: none;
+}
 
-    &:active {
-      background-color: $ms-color-themeDarker;
-    }
+button.addButton {
+  font-size: $ms-font-size-m;
+  color: $ms-color-white;
+  background-color: $ms-color-themePrimary;
 
-    &:disabled,
-    &.is-disabled {
-      background-color: $ms-color-neutralTertiaryAlt;
-    }
+  &:hover, &:focus {
+    background-color: $ms-color-themeDark;
   }
 
-  button.ms-Facepile-overflowButton {
-    font-size: $ms-font-size-m;
-    color: $ms-color-neutralSecondary;
-    background-color: $ms-color-neutralLight;
+  &:active {
+    background-color: $ms-color-themeDarker;
   }
 
-  button.ms-Facepile-descriptiveOverflowButton {
-    font-size: $ms-font-size-s;
-    color: $ms-color-neutralSecondary;
-    background-color: $ms-color-neutralLight;
+  &:disabled {
+    background-color: $ms-color-neutralTertiaryAlt;
   }
 }
+
+button.overflowButton {
+  font-size: $ms-font-size-m;
+  color: $ms-color-neutralSecondary;
+  background-color: $ms-color-neutralLight;
+}
+
+button.descriptiveOverflowButton {
+  font-size: $ms-font-size-s;
+  color: $ms-color-neutralSecondary;
+  background-color: $ms-color-neutralLight;
+}
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
index 12d29f7afe6ecf..2c0422a9bd7bc8 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
@@ -1,6 +1,7 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as ReactTestUtils from 'react-addons-test-utils';
 /* tslint:enable:no-unused-variable */
 import { mount, shallow } from 'enzyme';
 import { setRTL } from '../../Utilities';
@@ -37,53 +38,58 @@ describe('Facepile', () => {
     });
 
     it('renders with only add button if no personas found and addButtonProps are not null', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile
           personas={ [] }
           addButtonProps={ {} }
           showAddButton={ true }
-          />);
-      let addButton = wrapper.find('.ms-Icon--AddFriend');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+
+      let addButton = facepile.querySelectorAll('.ms-Icon--AddFriend');
       expect(addButton).to.have.length(1, 'Add button should render');
-      let buttons = wrapper.find('.ms-Facepile-itemButton');
+      let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(1, 'Only one button should be rendered');
     });
 
     it('renders chevron overflow button if overflowButtonProps are not null and OverflowButtonType equals downArrow', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile
           personas={ [] }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.downArrow }
-          />);
-      let overflowButton = wrapper.find('.ms-Icon--ChevronDown');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+      let overflowButton = facepile.querySelectorAll('.ms-Icon--ChevronDown');
       expect(overflowButton).to.have.length(1, 'Overflow button should render');
-      let buttons = wrapper.find('.ms-Facepile-itemButton');
+      let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(1, 'Only one button should be rendered');
     });
 
     it('renders more overflow button if overflowButtonProps are not null as OverflowButtonType equals more', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile
           personas={ [] }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.more }
-          />);
-      let overflowButton = wrapper.find('.ms-Icon--More');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+      let overflowButton = facepile.querySelectorAll('.ms-Icon--More');
       expect(overflowButton).to.have.length(1, 'Overflow button should render');
-      let buttons = wrapper.find('.ms-Facepile-itemButton');
+      let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(1, 'Only one button should be rendered');
     });
 
     it('renders without descriptive overflow button if overflowButtonProps are not null and maximum personas are not exceeded', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile personas={ [] }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.descriptive }
-          />);
-      let overflowButton = wrapper.find('.ms-Facepile-descriptiveOverflowButton');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+      let overflowButton = facepile.querySelectorAll('.ms-Facepile-descriptiveOverflowButton');
       expect(overflowButton).to.have.length(0, 'Overflow button should not render');
-      let buttons = wrapper.find('.ms-Facepile-itemButton');
+      let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(0, 'No buttons should be rendered');
     });
 
@@ -95,7 +101,7 @@ describe('Facepile', () => {
           maxDisplayablePersonas={ 5 }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.descriptive }
-          />);
+        />);
       let overflowButton = wrapper.find('.ms-Facepile-descriptiveOverflowButton');
       expect(overflowButton).to.have.length(1, 'Overflow button should render');
       let buttons = wrapper.find('.ms-Facepile-itemButton');
@@ -107,7 +113,7 @@ describe('Facepile', () => {
         <Facepile
           personas={ facepilePersonas.concat(facepilePersonas, facepilePersonas, facepilePersonas) }
           maxDisplayablePersonas={ 2 }
-          />);
+        />);
       let buttons = wrapper.find('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(2, 'Only two buttons should be rendered');
     });
@@ -124,7 +130,7 @@ describe('Facepile', () => {
       const wrapper = mount(
         <Facepile
           personas={ personas }
-          />);
+        />);
       let buttons = wrapper.find('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(1, 'Clickable Persona should render');
       buttons.simulate('click');
@@ -132,22 +138,23 @@ describe('Facepile', () => {
     });
 
     it('personas and buttons render default size if not specified', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile
           personas={ facepilePersonas }
           addButtonProps={ {} }
           showAddButton={ true }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.downArrow }
-          />);
-      let addButton = wrapper.find('.ms-Persona.ms-Persona--xs.ms-Facepile-addButton.ms-Facepile-itemButton');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+      let addButton = facepile.querySelectorAll('.ms-Facepile-addButton .ms-Persona.ms-Persona--xs');
       expect(addButton).to.have.length(1, 'Add button should render');
-      let faces = wrapper.find(Persona);
+      let faces = facepile.querySelectorAll('.ms-Facepile-person');
       expect(faces).to.have.length(facepilePersonas.length, 'personas should render');
-      wrapper.find(Persona).forEach((node) => {
-        expect(node.html()).to.contain('ms-Persona--xs');
-      });
-      let overflowButton = wrapper.find('.ms-Persona.ms-Persona--xs.ms-Facepile-overflowButton.ms-Facepile-itemButton');
+      for (let i = 0; i < faces.length; ++i) {
+        expect(faces[i].innerHTML).to.have.string('ms-Persona--xs');
+      }
+      let overflowButton = facepile.querySelectorAll('.ms-Facepile-overflowButton .ms-Persona--xs');
       expect(overflowButton).to.have.length(1, 'Overflow button should render');
     });
 
@@ -157,7 +164,7 @@ describe('Facepile', () => {
         <Facepile
           personas={ facepilePersonas }
           personaSize={ PersonaSize.extraExtraSmall }
-          />);
+        />);
       let faces = wrapper.find(Persona);
       expect(faces).to.have.length(facepilePersonas.length, 'XXSmall personas should render');
       wrapper.find(Persona).forEach((node) => {
@@ -169,7 +176,7 @@ describe('Facepile', () => {
         <Facepile
           personas={ facepilePersonas }
           personaSize={ PersonaSize.small }
-          />);
+        />);
       faces = wrapper.find(Persona);
       expect(faces).to.have.length(facepilePersonas.length, 'Small personas should render');
       wrapper.find(Persona).forEach((node) => {
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
index c19b71e05878cc..23106546aeafed 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
@@ -21,10 +21,7 @@ import {
   Persona,
   PersonaSize
 } from '../../Persona';
-import {
-  PERSONA_SIZE
-} from '../Persona/PersonaConsts';
-import './Facepile.scss';
+import styles from './Facepile.scss';
 
 export class Facepile extends React.Component<IFacepileProps, {}> {
   public static defaultProps: IFacepileProps = {
@@ -44,8 +41,8 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
     }
 
     return (
-      <div className='ms-Facepile'>
-        <div className='ms-Facepile-members'>
+      <div className={ css('ms-Facepile', styles.root) }>
+        <div className={ css('ms-Facepile-members') }>
           { showAddButton ? this._getAddNewElement() : null }
           <FocusZone direction={ FocusZoneDirection.horizontal }>
             {
@@ -59,7 +56,7 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
             { overflowButtonProps ? this._getOverflowElement(numPersonasToShow) : null }
           </FocusZone>
         </div>
-        <div className='ms-Facepile-clear'></div>
+        <div className={ css('ms-Facepile-clear', styles.clear) }></div>
       </div>
     );
   }
@@ -80,7 +77,7 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
   private _getElementWithOnClickEvent(personaControl: JSX.Element, persona: IFacepilePersona, index: number): JSX.Element {
     return <BaseButton
       { ...getNativeProps(persona, buttonProperties) }
-      className='ms-Facepile-itemButton'
+      className={ css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton) }
       title={ persona.personaName }
       key={ (!!persona.imageUrl ? 'i' : '') + index }
       onClick={ this._onPersonaClick.bind(this, persona) }
@@ -94,7 +91,7 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
   private _getElementWithoutOnClickEvent(personaControl: JSX.Element, persona: IFacepilePersona, index: number): JSX.Element {
     return <div
       { ...getNativeProps(persona, divProperties) }
-      className='ms-Facepile-itemButton'
+      className={ css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton) }
       title={ persona.personaName }
       key={ (!!persona.imageUrl ? 'i' : '') + index }
       onMouseMove={ this._onPersonaMouseMove.bind(this, persona) }
@@ -125,28 +122,61 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
 
     let personaNames: string = this.props.personas.slice(numPersonasToShow).map((p: IFacepilePersona) => p.personaName).join(', ');
 
-    return <BaseButton { ...getNativeProps(this.props.overflowButtonProps, buttonProperties) }
-      className={ css('ms-Persona', PERSONA_SIZE[personaSize], 'ms-Facepile-descriptiveOverflowButton', 'ms-Facepile-itemButton') }
-      title={ personaNames }
+    return <BaseButton
+      { ...getNativeProps(this.props.overflowButtonProps, buttonProperties) }
+      className={ css('ms-Facepile-descriptiveOverflowButton', 'ms-Facepile-itemButton', styles.descriptiveOverflowButton, styles.itemButton) }
     >
-      { '+' + numPersonasNotPictured }
+      <Persona
+        title={ personaNames }
+        size={ personaSize }
+        hidePersonaDetails={ true }
+        onRenderInitials={ () => {
+          return (
+            <span>{ '+' + numPersonasNotPictured }</span>
+          );
+        } }
+      >
+
+      </Persona>
+
     </BaseButton>;
   }
 
   private _getIconElement(icon: string): JSX.Element {
     let { personaSize } = this.props;
-    return <BaseButton { ...getNativeProps(this.props.overflowButtonProps, buttonProperties) }
-      className={ css('ms-Persona', PERSONA_SIZE[personaSize], 'ms-Facepile-overflowButton', 'ms-Facepile-itemButton') }
+
+    return <BaseButton
+      { ...getNativeProps(this.props.overflowButtonProps, buttonProperties) }
+      className={ css('ms-Facepile-overflowButton', 'ms-Facepile-itemButton', styles.overflowButton, styles.itemButton) }
     >
-      <i className={ css('ms-Icon', 'msIcon', `ms-Icon ms-Icon--${icon}`) } aria-hidden='true'></i>
+      <Persona
+        size={ personaSize }
+        hidePersonaDetails={ true }
+        onRenderInitials={ () => (
+          <i className={ css('ms-Icon', 'msIcon', `ms-Icon ms-Icon--${icon}`) } aria-hidden='true' />
+        ) }
+      >
+
+      </Persona>
     </BaseButton>;
   }
 
   private _getAddNewElement(): JSX.Element {
     let { personaSize } = this.props;
-    return <BaseButton { ...getNativeProps(this.props.addButtonProps, buttonProperties) }
-      className={ css('ms-Persona', PERSONA_SIZE[personaSize], 'ms-Facepile-addButton', 'ms-Facepile-itemButton') }>
-      <i className='ms-Icon msIcon ms-Icon--AddFriend' aria-hidden='true'></i>
+    return <BaseButton
+      { ...getNativeProps(this.props.addButtonProps, buttonProperties) }
+      className={ css('ms-Facepile-addButton', 'ms-Facepile-itemButton', styles.itemButton, styles.addButton) }
+    >
+      <Persona
+        size={ personaSize }
+        hidePersonaDetails={ true }
+        onRenderInitials={ () => (
+          <i className='ms-Icon msIcon ms-Icon--AddFriend' aria-hidden='true' />
+        ) }
+      >
+
+      </Persona>
+
     </BaseButton>;
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
index f2de6cab8a31ee..5f460e4301a7f9 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
@@ -42,7 +42,10 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     let { elementToFocusOnDismiss, isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true } = this.props;
 
     this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement as HTMLElement;
-    this.focus();
+
+    if (!elementContains(this.refs.root, this._previouslyFocusedElement)) {
+      this.focus();
+    }
 
     if (forceFocusInsideTrap) {
       this._events.on(window, 'focus', this._forceFocusInTrap, true);
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts
index f394674fd8cd7e..7ef91d7adb4e10 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts
@@ -24,7 +24,7 @@ export interface IFocusZone {
 /**
  * FocusZone component props.
  */
-export interface IFocusZoneProps extends React.Props<FocusZone> {
+export interface IFocusZoneProps extends React.HTMLProps<HTMLElement | FocusZone> {
   /**
    * Additional class name to provide on the root element, in addition to the ms-FocusZone class.
    */
@@ -72,10 +72,9 @@ export interface IFocusZoneProps extends React.Props<FocusZone> {
   onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) => void;
 
   /**
-   * Props mixed into the div root element that will be mixed into the root element, *before* other props are applied.
-   * This allows you to extend the root element with additional attributes, such as data-automation-id needed for
-   *  automation. Note that if you provide, for example, "ariaLabelledBy" as well as "rootProps.ariaLabelledBy", the
-   * former will take precedence over the later.
+   * Root props to mix into the root element.
+   * @deprecated
+   * Deprecated at v1.12.1, to be removed at >= v2.0.0. Use specific button component instead
    */
   rootProps?: React.HTMLProps<HTMLDivElement>;
 
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
index a2a6500115e436..d4e8ac4a00ba32 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
@@ -10,10 +10,12 @@ import {
   KeyCodes,
   autobind,
   css,
+  divProperties,
   elementContains,
   getDocument,
   getId,
   getNextElement,
+  getNativeProps,
   getParent,
   getPreviousElement,
   getRTL,
@@ -54,7 +56,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   private _isInnerZone: boolean;
 
   constructor(props) {
-    super(props);
+    super(props, { 'rootProps': null });
 
     this._id = getId('FocusZone');
     _allInstances[this._id] = this;
@@ -89,6 +91,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
 
     if (this.props.defaultActiveElement) {
       this._activeElement = getDocument().querySelector(this.props.defaultActiveElement) as HTMLElement;
+      this.focus();
     }
   }
 
@@ -98,9 +101,11 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
 
   public render() {
     let { rootProps, ariaLabelledBy, className } = this.props;
+    let divProps = getNativeProps(this.props, divProperties);
 
     return (
       <div
+        { ...divProps }
         { ...rootProps }
         className={ css('ms-FocusZone', className) }
         ref='root'
@@ -109,7 +114,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
         onKeyDown={ this._onKeyDown }
         onFocus={ this._onFocus }
         { ...{ onMouseDownCapture: this._onMouseDown } }
-        >
+      >
         { this.props.children }
       </div>
     );
@@ -237,6 +242,14 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       return;
     }
 
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(ev);
+
+      if (ev.isDefaultPrevented()) {
+        return;
+      }
+    }
+
     if (
       isInnerZoneKeystroke &&
       this._isImmediateDescendantOfZone(ev.target as HTMLElement) &&
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.scss
index 1475baafc73ec2..d211d77d17ff3b 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.scss
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.scss
@@ -1,14 +1,12 @@
 @import '../../common/common';
 
-:global {
-  .ms-groupFooter {
-    position: relative;
-    padding: 10px 84px;
-    cursor: pointer;
+.root {
+  position: relative;
+  padding: 10px 84px;
+  cursor: pointer;
 
-    .ms-Link {
-      @include ms-baseFont;
-      font-size: $ms-font-size-s;
-    }
+  :global(.ms-Link) {
+    @include ms-baseFont;
+    font-size: $ms-font-size-s;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx
index 0dd9f141976af8..f072e4cf503278 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx
@@ -1,19 +1,20 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  autobind
+  autobind,
+  css
 } from '../../Utilities';
 import { Link } from '../../Link';
 import { IGroupDividerProps } from './GroupedList.Props';
 import { GroupSpacer } from './GroupSpacer';
-import './GroupFooter.scss';
+import styles from './GroupFooter.scss';
 
 export class GroupFooter extends BaseComponent<IGroupDividerProps, {}> {
   public render() {
     let { group, groupLevel, showAllLinkText } = this.props;
 
     return group && (
-      <div className='ms-groupFooter'>
+      <div className={ css('ms-groupFooter', styles.root) }>
         { GroupSpacer({ count: groupLevel }) }
         <Link onClick={ this._onSummarizeClick }>{ showAllLinkText }</Link>
       </div>
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss
index 38d58b1885a176..acac50b8f5c030 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss
@@ -4,118 +4,116 @@ $groupHeader-ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
 $groupHeader-ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
 $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
 
-:global {
-  .ms-GroupHeader {
-    cursor: default;
-    user-select: none;
-    @include focus-border();
-
-    &:hover {
-      background: $ms-color-themeLighterAlt;
-    }
-    &.is-selected {
-      background: $ms-color-themeLighter;
-    }
-    &.is-selected:hover {
-      background: $ms-color-themeLight;
-    }
-  }
+.root {
+  cursor: default;
+  user-select: none;
+  @include focus-border();
 
-  .ms-GroupHeader-check,
-  .ms-GroupHeader-expand {
-    @include focus-border();
-    display: inline-block;
-    cursor: default;
-    padding: 6px;
-    transform: translateY(50%);
-    margin-top: -12px;
-    box-sizing: border-box;
-    vertical-align: top;
-    background: none;
-    border: none;
-    font-size: $ms-icon-size-s;
-    top: 4px;
+  &:hover {
+    background: $ms-color-themeLighterAlt;
   }
-
-  .ms-GroupHeader-check {
-    opacity: 0;
-    margin-top: -10px;
-
-    &:focus {
-      opacity: 1;
-    }
+  &.rootIsSelected {
+    background: $ms-color-themeLighter;
   }
-
-  .ms-GroupHeader:hover .ms-GroupHeader-check,
-  .ms-GroupHeader.is-selected .ms-GroupHeader-check {
-    opacity: 1;
+  &.rootIsSelected:hover {
+    background: $ms-color-themeLight;
   }
-
-  .ms-GroupHeader-title {
-    padding: 14px 6px;
-    display: inline-block;
-    cursor: pointer;
-    outline: 0;
+}
+
+.check,
+.expand {
+  @include focus-border();
+  display: inline-block;
+  cursor: default;
+  padding: 6px;
+  transform: translateY(50%);
+  margin-top: -12px;
+  box-sizing: border-box;
+  vertical-align: top;
+  background: none;
+  border: none;
+  font-size: $ms-icon-size-s;
+  top: 4px;
+}
+
+.check {
+  opacity: 0;
+  margin-top: -10px;
+
+  &:focus {
+    opacity: 1;
   }
-
-  .ms-GroupHeader-expand {
-    width: 36px;
-    height: 40px;
-    color: $ms-color-neutralSecondary;
-
-    .ms-Icon {
-      transform: rotate(-180deg);
-      transform-origin: 50% 50%;
-      transition: transform .1s linear;
-
-      &.is-collapsed {
-        transform: rotate(0deg);
-      }
+}
+
+.root:hover .check,
+.root.rootIsSelected .check {
+  opacity: 1;
+}
+
+.title {
+  padding: 14px 6px;
+  display: inline-block;
+  cursor: pointer;
+  outline: 0;
+}
+
+.expand {
+  width: 36px;
+  height: 40px;
+  color: $ms-color-neutralSecondary;
+
+  :global(.ms-Icon) {
+    transform: rotate(-180deg);
+    transform-origin: 50% 50%;
+    transition: transform .1s linear;
+
+    &.expandIsCollapsed {
+      transform: rotate(0deg);
     }
   }
+}
+
+.loading {
+  display: inline-block;
+  visibility: hidden;
+  opacity: 0;
+  padding: 0px 16px;
+  vertical-align: middle;
+  transition: visibility $ms-duration3, opacity $ms-duration3;
+
+  &.loadingIsVisible {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.dropIcon {
+  display: inline-block;
+  position: relative;
+  top: -16px;
+  @include left(-26px);
+  font-size: $ms-icon-size-l;
+  color: $ms-color-neutralSecondaryAlt;
+  transition: transform $ms-duration2 $groupHeader-ease-in-back, opacity $ms-duration4 $groupHeader-ease-out-sine;
+  opacity: 0;
+  transform: rotate(0.2deg) scale(0.65); // rotation prevents jittery motion in IE
+  transform-origin: 10px 10px;
+
+  :global(.ms-Icon--Tag) {
+    position: absolute;
+  }
+}
 
-  .ms-GroupHeader-loading {
-    display: inline-block;
-    visibility: hidden;
-    opacity: 0;
-    padding: 0px 16px;
-    vertical-align: middle;
-    transition: visibility $ms-duration3, opacity $ms-duration3;
+:global(.ms-GroupedList-group.is-dropping) {
 
-    &.is-loading {
-      visibility: visible;
+  > .root .dropIcon {
+      transition: transform $ms-duration4 $groupHeader-ease-out-circ, opacity $ms-duration1 $groupHeader-ease-out-sine;
+      transition-delay: $ms-duration3;
       opacity: 1;
+      transform: rotate(0.2deg) scale(1); // rotation prevents jittery motion in IE
     }
-  }
 
-  .ms-GroupHeader-dropIcon {
-    display: inline-block;
-    position: relative;
-    top: -16px;
-    @include left(-26px);
-    font-size: $ms-icon-size-l;
-    color: $ms-color-neutralSecondaryAlt;
-    transition: transform $ms-duration2 $groupHeader-ease-in-back, opacity $ms-duration4 $groupHeader-ease-out-sine;
-    opacity: 0;
-    transform: rotate(0.2deg) scale(0.65); // rotation prevents jittery motion in IE
-    transform-origin: 10px 10px;
-
-    .ms-Icon--Tag {
-      position: absolute;
+    .check {
+      opacity: 0;
     }
-  }
-
-  .ms-GroupedList-group.is-dropping {
-
-    > .ms-GroupHeader .ms-GroupHeader-dropIcon {
-        transition: transform $ms-duration4 $groupHeader-ease-out-circ, opacity $ms-duration1 $groupHeader-ease-out-sine;
-        transition-delay: $ms-duration3;
-        opacity: 1;
-        transform: rotate(0.2deg) scale(1); // rotation prevents jittery motion in IE
-      }
-
-      .ms-GroupHeader-check {
-        opacity: 0;
-      }
-  }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
index bd949ae4eda888..f7b0a47605a8af 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
@@ -5,11 +5,12 @@ import {
 } from '../../Utilities';
 import { IGroupDividerProps } from './GroupedList.Props';
 import { SelectionMode } from '../../utilities/selection/index';
-import { Check } from '../Check/Check';
+import { Check } from '../../Check';
+import { Icon } from '../../Icon';
 import { GroupSpacer } from './GroupSpacer';
 import { Spinner } from '../../Spinner';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
-import './GroupHeader.scss';
+import styles from './GroupHeader.scss';
 
 export interface IGroupHeaderState {
   isCollapsed: boolean;
@@ -60,8 +61,8 @@ export class GroupHeader extends React.Component<IGroupDividerProps, IGroupHeade
     let currentlySelected = isSelected || selected;
     return group && (
       <div
-        className={ css('ms-GroupHeader', {
-          'is-selected': currentlySelected
+        className={ css('ms-GroupHeader', styles.root, {
+          ['is-selected ' + styles.rootIsSelected]: currentlySelected
         }) }
         style={ viewport ? { minWidth: viewport.width } : {} }
         onClick={ this._onHeaderClick }
@@ -72,7 +73,8 @@ export class GroupHeader extends React.Component<IGroupDividerProps, IGroupHeade
 
           { isSelectionCheckVisible ? (
             <button
-              className='ms-GroupHeader-check'
+              type='button'
+              className={ css('ms-GroupHeader-check', styles.check) }
               data-selection-toggle={ true }
               onClick={ this._onToggleSelectGroupClick } >
               <Check checked={ currentlySelected } />
@@ -82,22 +84,39 @@ export class GroupHeader extends React.Component<IGroupDividerProps, IGroupHeade
 
           { GroupSpacer({ count: groupLevel }) }
 
-          <div className='ms-GroupHeader-dropIcon'><i className='ms-Icon ms-Icon--Tag'></i></div>
-          <button className='ms-GroupHeader-expand' onClick={ this._onToggleCollapse }>
-            <i className={ css('ms-Icon ms-Icon--ChevronDown', {
-              'is-collapsed': isCollapsed
-            }) } />
+          <div className={ css('ms-GroupHeader-dropIcon', styles.dropIcon) }>
+            <Icon iconName='Tag' />
+          </div>
+          <button
+            type='button'
+            className={ css('ms-GroupHeader-expand', styles.expand) }
+            onClick={ this._onToggleCollapse }>
+            <Icon
+              className={ css(
+                isCollapsed && ('is-collapsed ' + styles.expandIsCollapsed)
+              ) }
+              iconName='ChevronDown'
+            />
           </button>
 
-          <div className='ms-GroupHeader-title ms-font-xl'>
-            <span>{ group.name } </span>
-            {/* hasMoreData flag is set when grouping is throttle by SPO server which in turn resorts to regular sorting to simulate
-                grouping behaviors, in which case group count is the number of items returned so far. That's the reasons we need to
-                use "+" to show we might have more items than count indicates. */}
-            <span>({ group.count }{ group.hasMoreData && '+' }) </span>
+          <div className={ css('ms-GroupHeader-title ms-font-xl', styles.title) }>
+            <span>{ group.name }</span>
+            {
+              // hasMoreData flag is set when grouping is throttle by SPO server which in turn resorts to regular
+              // sorting to simulate grouping behaviors, in which case group count is the number of items returned
+              // so far. That's the reasons we need to use "+" to show we might have more items than count
+              // indicates.
+            }
+            <span>({ group.count }{ group.hasMoreData && '+' })</span>
           </div>
 
-          <div className={ css('ms-GroupHeader-loading', { 'is-loading': isLoadingVisible }) }>
+          <div
+            className={ css(
+              'ms-GroupHeader-loading',
+              styles.loading,
+              isLoadingVisible && ('is-loading ' + styles.loadingIsVisible)
+            ) }
+          >
             <Spinner label={ loadingText } />
           </div>
 
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.scss
index e776797a9a0e0d..f7b3d1cefa4645 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.scss
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.scss
@@ -1,7 +1,5 @@
 @import '../../common/common';
 
-:global {
-  .ms-GroupSpacer {
-    display: inline-block;
-  }
+.root {
+  display: inline-block;
 }
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
index 12bf54e4a62ab1..f918dd896be623 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
@@ -1,7 +1,10 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-import './GroupSpacer.scss';
+import {
+  css
+} from '../../Utilities';
+import styles from './GroupSpacer.scss';
 
 export interface IGroupSpacerProps {
   count: number;
@@ -10,4 +13,12 @@ export interface IGroupSpacerProps {
 const SPACER_WIDTH = 36;
 
 export const GroupSpacer = (props: IGroupSpacerProps) =>
-  props.count > 0 && <span className='ms-GroupSpacer' style={ { width: props.count * SPACER_WIDTH } } />;
+  props.count > 0 && (
+    <span
+      className={ css(
+        'ms-GroupSpacer',
+        styles.root
+      ) }
+      style={ { width: props.count * SPACER_WIDTH } }
+    />
+  );
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.scss
index 8d5ed5cb126788..bf3c85c7458d45 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.scss
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.scss
@@ -2,47 +2,25 @@
 
 $groupList-ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
 
-:global {
-  .ms-GroupedList {
-    position: relative;
-    font-size: $ms-font-size-s;
+.root {
+  position: relative;
+  font-size: $ms-font-size-s;
 
-    BUTTON {
-      font-family: inherit;
-      background-color: transparent;
-    }
-
-    > .ms-FocusZone {
-      display: inline-block;
-      vertical-align: top;
-      min-width: 1px;
-      min-height: 1px;
-    }
-
-  }
-
-  .ms-GroupedList.is-horizontalConstrained {
-    overflow-x: auto;
-    overflow-y: visible;
-
-    -webkit-overflow-scrolling: touch;
-    transform: translateZ(0);
-  }
-
-  .ms-GroupedList-cell {
-      word-break: break-word;
+  BUTTON {
+    font-family: inherit;
+    background-color: transparent;
   }
+}
 
-  .ms-GroupedList-group {
-    transition: background-color $ms-duration2 $groupList-ease-in-out-sine;
-
-    &.is-dropping {
-      background-color: $ms-color-neutralLight;
-    }
-  }
+.group {
+  transition: background-color $ms-duration2 $groupList-ease-in-out-sine;
+}
 
-  /* Set the min height for a row to 38px so even rendering empty cells takes that space. */
-  .ms-GroupedList .ms-List-cell {
-    min-height: 38px;
-  }
+.groupIsDropping {
+  background-color: $ms-color-neutralLight;
 }
+
+/* Set the min height for a row to 38px so even rendering empty cells takes that space. */
+.root :global(.ms-List-cell) {
+  min-height: 38px;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
index 14c7b3cef164e4..b89789614e6caa 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
@@ -19,7 +19,7 @@ import {
 import {
   SelectionMode
 } from '../../utilities/selection/index';
-import './GroupedList.scss';
+import styles from './GroupedList.scss';
 
 export interface IGroupedListState {
   lastWidth?: number;
@@ -85,11 +85,11 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     return (
       <div
         ref='root'
-        className={ css('ms-GroupedList', className) }
+        className={ css('ms-GroupedList', styles.root, className) }
         data-automationid='GroupedList'
         data-is-scrollable='false'
         role='grid'
-        >
+      >
         { !groups ?
           this._renderGroup(null, 0) : (
             <List
@@ -97,7 +97,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
               items={ groups }
               onRenderCell={ this._renderGroup }
               getItemCountForPage={ () => 1 }
-              />
+            />
           )
         }
       </div>
@@ -176,7 +176,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
         selectionMode={ selectionMode }
         selection={ selection }
         viewport={ viewport }
-        />
+      />
     ) : null;
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
index 06490d9b452cf6..9232b2d083692e 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
@@ -32,6 +32,7 @@ import {
 } from './../../utilities/dragdrop/interfaces';
 import { assign, css } from '../../Utilities';
 import { IViewport } from '../../utilities/decorators/withViewport';
+import styles from './GroupedList.scss';
 import { IDisposable } from '@uifabric/utilities';
 
 export interface IGroupedListSectionProps extends React.Props<GroupedListSection> {
@@ -187,7 +188,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
     return (
       <div
         ref='root'
-        className={ css('ms-GroupedList-group', this._getDroppingClassName()) }
+        className={ css('ms-GroupedList-group', styles.group, this._getDroppingClassName()) }
       >
         { onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader) }
         {
@@ -385,7 +386,11 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
     let { isDropping } = this.state;
     let { group } = this.props;
 
-    let droppingClass = group && isDropping ? DEFAULT_DROPPING_CSS_CLASS : '';
-    return droppingClass;
+    isDropping = !!(group && isDropping);
+
+    return css(
+      isDropping && DEFAULT_DROPPING_CSS_CLASS,
+      isDropping && styles.groupIsDropping
+    );
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.scss b/packages/office-ui-fabric-react/src/components/Icon/Icon.scss
index 3a8c15bf0cf366..9de68966816424 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.scss
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.scss
@@ -1,9 +1,3 @@
-:global {
-  .ms-Icon-imageContainer {
-    overflow: hidden;
-  }
-
-  .ms-Icon-Image {
-    position: relative;
-  }
+.imageContainer {
+  overflow: hidden;
 }
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
index 2b37c4dfa3277c..fd69a00c835d1b 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
@@ -1,6 +1,6 @@
 /* tslint:disable */
 import * as React from 'react';
-import './Icon.scss'
+import styles from './Icon.scss'
 /* tslint:enable */
 import { IIconProps } from './Icon.Props';
 import { IconType } from './IconType';
@@ -15,7 +15,7 @@ export const Icon: (props: IIconProps) => JSX.Element = (props: IIconProps) => {
   let customIcon = props.iconName === 'None';
 
   if (props.iconType === IconType.Image) {
-    let containerClassName = css('ms-Icon', 'ms-Icon-imageContainer', props.className);
+    let containerClassName = css('ms-Icon', 'ms-Icon-imageContainer', styles.imageContainer, props.className);
 
     return (
       <div className={ containerClassName } >
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.scss b/packages/office-ui-fabric-react/src/components/Image/Image.scss
index 96f231634a5f8e..618f8ded9e085d 100644
--- a/packages/office-ui-fabric-react/src/components/Image/Image.scss
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.scss
@@ -1,82 +1,80 @@
 @import '../../common/common';
 
-:global {
-  .ms-Image {
-    overflow: hidden;
-  }
+.root {
+  overflow: hidden;
+}
 
-  // Modifier: The image frame should fill its parent element.
-  .ms-Image--maximizeFrame {
-    height: 100%;
-    width: 100%;
-  }
+// Modifier: The image frame should fill its parent element.
+.rootIsMaximizeFrame {
+  height: 100%;
+  width: 100%;
+}
 
-  .ms-Image-image {
-    display: block;
-    opacity: 0;
+.image {
+  display: block;
+  opacity: 0;
 
-    &.is-loaded {
-      opacity: 1;
-    }
+  &.imageIsLoaded {
+    opacity: 1;
   }
+}
 
-  .ms-Image-image--center,
-  .ms-Image-image--contain,
-  .ms-Image-image--cover {
-    position: relative;
-    @include left(50%);
-    top: 50%;
-    // transform-translateX mixin is not used here because a transateY is also required.
-    @include LTR {
-      transform: translate(-50%,-50%);
-    }
-    @include RTL {
-      transform: translate(50%,-50%);
-    }
+.imageIsCenter,
+.imageIsContain,
+.imageIsCover {
+  position: relative;
+  @include left(50%);
+  top: 50%;
+  // transform-translateX mixin is not used here because a transateY is also required.
+  @include LTR {
+    transform: translate(-50%,-50%);
   }
-
-  .ms-Image-image--contain {
-    &.ms-Image-image--landscape {
-      width: 100%;
-      height: auto;
-    }
-
-    &.ms-Image-image--portrait {
-      height: 100%;
-      width: auto;
-    }
+  @include RTL {
+    transform: translate(50%,-50%);
   }
+}
 
-  .ms-Image-image--cover {
-    &.ms-Image-image--landscape {
-      height: 100%;
-      width: auto;
-    }
-
-    &.ms-Image-image--portrait {
-      width: 100%;
-      height: auto;
-    }
+.imageIsContain {
+  &.imageIsLandscape {
+    width: 100%;
+    height: auto;
   }
 
-  .ms-Image-image--none {
-    height: auto;
+  &.imageIsPortrait {
+    height: 100%;
     width: auto;
   }
+}
 
-  /** This is identical to the default behavior. */
-  .ms-Image-image--scaleWidthHeight {
+.imageIsCover {
+  &.imageIsLandscape {
     height: 100%;
-    width: 100%;
+    width: auto;
   }
 
-  .ms-Image-image--scaleWidth {
-    height: auto;
+  &.imageIsPortrait {
     width: 100%;
+    height: auto;
   }
+}
 
-  .ms-Image-image--scaleHeight {
-    height: 100%;
-    width: auto;
-  }
+.imageIsNone {
+  height: auto;
+  width: auto;
+}
+
+/** This is identical to the default behavior. */
+.imageIsScaleWidthHeight {
+  height: 100%;
+  width: 100%;
+}
+
+.imageIsScaleWidth {
+  height: auto;
+  width: 100%;
+}
+
+.imageIsScaleHeight {
+  height: 100%;
+  width: auto;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.tsx
index e0f80636358a3c..991e0672e019c2 100644
--- a/packages/office-ui-fabric-react/src/components/Image/Image.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.tsx
@@ -10,7 +10,7 @@ import {
 } from '../../Utilities';
 import { IImageProps, ImageFit, ImageLoadState } from './Image.Props';
 
-import './Image.scss';
+import styles from './Image.scss';
 
 export interface IImageState {
   loadState?: ImageLoadState;
@@ -22,15 +22,15 @@ export enum CoverStyle {
 }
 
 export const CoverStyleMap = {
-  [CoverStyle.landscape]: 'ms-Image-image--landscape',
-  [CoverStyle.portrait]: 'ms-Image-image--portrait'
+  [CoverStyle.landscape]: 'ms-Image-image--landscape ' + styles.imageIsLandscape,
+  [CoverStyle.portrait]: 'ms-Image-image--portrait ' + styles.imageIsPortrait
 };
 
 export const ImageFitMap = {
-  [ImageFit.center]: 'ms-Image-image--center',
-  [ImageFit.contain]: 'ms-Image-image--contain',
-  [ImageFit.cover]: 'ms-Image-image--cover',
-  [ImageFit.none]: 'ms-Image-image--none'
+  [ImageFit.center]: 'ms-Image-image--center ' + styles.imageIsCenter,
+  [ImageFit.contain]: 'ms-Image-image--contain ' + styles.imageIsContain,
+  [ImageFit.cover]: 'ms-Image-image--cover ' + styles.imageIsCover,
+  [ImageFit.none]: 'ms-Image-image--none ' + styles.imageIsNone
 };
 
 const KEY_PREFIX: string = 'fabricImage';
@@ -85,7 +85,14 @@ export class Image extends BaseComponent<IImageProps, IImageState> {
     // If image dimensions aren't specified, the natural size of the image is used.
     return (
       <div
-        className={ css('ms-Image', className, { 'ms-Image--maximizeFrame': maximizeFrame }) }
+        className={ css(
+          'ms-Image',
+          styles.root,
+          className,
+          {
+            ['ms-Image--maximizeFrame ' + styles.rootIsMaximizeFrame]: maximizeFrame
+          })
+        }
         style={ { width: width, height: height } }
         ref={ this._resolveRef('_frameElement') }
       >
@@ -95,17 +102,19 @@ export class Image extends BaseComponent<IImageProps, IImageState> {
           onError={ this._onImageError }
           key={ KEY_PREFIX + this.props.src || '' }
           className={
-            css('ms-Image-image',
+            css(
+              'ms-Image-image',
+              styles.image,
               CoverStyleMap[coverStyle],
               (imageFit !== undefined) && ImageFitMap[imageFit], {
                 'is-fadeIn': shouldFadeIn,
                 'is-notLoaded': !loaded,
-                'is-loaded': loaded,
+                ['is-loaded ' + styles.imageIsLoaded]: loaded,
                 'ms-u-fadeIn400': loaded && shouldFadeIn,
                 'is-error': loadState === ImageLoadState.error,
-                'ms-Image-image--scaleWidth': (imageFit === undefined && !!width && !height),
-                'ms-Image-image--scaleHeight': (imageFit === undefined && !width && !!height),
-                'ms-Image-image--scaleWidthHeight': (imageFit === undefined && !!width && !!height),
+                ['ms-Image-image--scaleWidth ' + styles.imageIsScaleWidth]: (imageFit === undefined && !!width && !height),
+                ['ms-Image-image--scaleHeight ' + styles.imageIsScaleHeight]: (imageFit === undefined && !width && !!height),
+                ['ms-Image-image--scaleWidthHeight ' + styles.imageIsScaleWidthHeight]: (imageFit === undefined && !!width && !!height),
               }) }
           ref={ this._resolveRef('_imageElement') }
           src={ src }
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.Props.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.Props.ts
index 3bbbad6e5b62fd..00820c684f83f4 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.Props.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { Layer } from './Layer';
 
-export interface ILayerProps extends React.HTMLProps<HTMLDivElement> {
+export interface ILayerProps extends React.HTMLProps<HTMLDivElement | Layer> {
   /** Callback for when the layer is mounted. */
   onLayerMounted?: () => void;
 
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.scss b/packages/office-ui-fabric-react/src/components/Layer/Layer.scss
index dfda2c5b1a0c23..f09d8c521d96e5 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.scss
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.scss
@@ -1,15 +1,13 @@
-:global {
-  .ms-Layer--fixed {
-    position: fixed;
-    z-index: 1000000;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    visibility: hidden;
-  }
+.rootIsFixed {
+  position: fixed;
+  z-index: 1000000;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  visibility: hidden;
+}
 
-  .ms-Layer-content {
-    visibility: visible;
-  }
+.content {
+  visibility: visible;
 }
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx
index fe115510d9253f..f228efa8fc9cc1 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx
@@ -6,7 +6,7 @@ import * as ReactDOM from 'react-dom';
 import { Fabric } from '../../Fabric';
 import { ILayerProps } from './Layer.Props';
 import { css, BaseComponent, getDocument, setVirtualParent } from '../../Utilities';
-import './Layer.scss';
+import styles from './Layer.scss';
 
 let _layersByHostId: { [hostId: string]: Layer[] } = {};
 
@@ -76,7 +76,7 @@ export class Layer extends BaseComponent<ILayerProps, {}> {
 
         this._layerElement = doc.createElement('div');
         this._layerElement.className = css('ms-Layer', {
-          'ms-Layer--fixed': !this.props.hostId
+          ['ms-Layer--fixed ' + styles.rootIsFixed]: !this.props.hostId
         });
 
         host.appendChild(this._layerElement);
@@ -86,7 +86,7 @@ export class Layer extends BaseComponent<ILayerProps, {}> {
       // Using this 'unstable' method allows us to retain the React context across the layer projection.
       ReactDOM.unstable_renderSubtreeIntoContainer(
         this,
-        <Fabric className='ms-Layer-content'>
+        <Fabric className={ css('ms-Layer-content', styles.content) }>
           { this.props.children }
         </Fabric>,
         this._layerElement,
@@ -110,7 +110,7 @@ export class Layer extends BaseComponent<ILayerProps, {}> {
       <span
         className='ms-Layer'
         ref={ this._resolveRef('_rootElement') }
-        />
+      />
     );
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.scss b/packages/office-ui-fabric-react/src/components/Link/Link.scss
index afef2c35b7451d..e90fea8dbb54d6 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.scss
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.scss
@@ -1,48 +1,48 @@
 @import '../../common/common';
 
-:global {
-  .ms-Link {
-    @include ms-baseFont;
-    color: $ms-color-themePrimary;
-    margin: 0;
-    overflow: inherit;
-    padding: 0;
-    text-overflow: inherit;
-
-    // State: The button is not disabled.
-    &:not(.is-disabled) {
-      &:hover,
-      &:focus {
-        color: $ms-color-themeDarker;
-      }
-
-      &:active {
-        color: $ms-color-themePrimary;
-      }
-    }
+// Element: ms-Link root component
+.root {
+  @include ms-baseFont;
+  color: $ms-color-themePrimary;
+  margin: 0;
+  overflow: inherit;
+  padding: 0;
+  text-overflow: inherit;
+}
 
-    // State: The button is disabled.
-    &.is-disabled {
-      color: $ms-color-neutralTertiary;
-      pointer-events: none;
-      cursor: default;
-    }
+// State: The button is not disabled.
+.isEnabled {
+  &:hover,
+  &:focus {
+    color: $ms-color-themeDarker;
   }
 
-  // Link implemented as a button.
-  button.ms-Link {
-    @include focus-border;
-    @include text-align(left);
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: inline;
-    font-size: inherit; // Ensure that we inherit font size, rather than the browser's default.
+  &:active {
+    color: $ms-color-themePrimary;
   }
+}
 
-  // Link implemented as an anchor.
-  a.ms-Link {
-    @include focus-outline;
-    text-decoration: none;
-  }
+// State: The button is disabled.
+.isDisabled {
+  color: $ms-color-neutralTertiary;
+  pointer-events: none;
+  cursor: default;
+}
+
+
+// Link implemented as a button.
+button.root {
+  @include focus-border;
+  @include text-align(left);
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline;
+  font-size: inherit; // Ensure that we inherit font size, rather than the browser's default.
+}
+
+// Link implemented as an anchor.
+a.root {
+  @include focus-outline;
+  text-decoration: none;
 }
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.tsx
index 3b88e08efc3e88..ca1753ca24519e 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.tsx
@@ -8,7 +8,7 @@ import {
   getNativeProps
 } from '../../Utilities';
 import { ILink, ILinkProps } from './Link.Props';
-import './Link.scss';
+import styles from './Link.scss';
 
 interface IMyScreen extends Screen {
   left: number;
@@ -27,8 +27,10 @@ export class Link extends BaseComponent<ILinkProps, any> implements ILink {
       href ? (
         <a
           { ...getNativeProps(this.props, anchorProperties) }
-          className={ css('ms-Link', className, {
-            'is-disabled': disabled
+          className={ css('ms-Link', styles.root, className, {
+            'is-disabled': disabled,
+            [styles.isDisabled]: disabled,
+            [styles.isEnabled]: !disabled
           }) }
           onClick={ this._onClick }
           ref={ this._resolveRef('_link') }
@@ -39,8 +41,9 @@ export class Link extends BaseComponent<ILinkProps, any> implements ILink {
       ) : (
           <button
             { ...getNativeProps(this.props, buttonProperties) }
-            className={ css('ms-Link', className, {
-              'is-disabled': disabled
+            className={ css('ms-Link', styles.root, className, {
+              'is-disabled': disabled,
+              [styles.isDisabled]: disabled
             }) }
             onClick={ this._onClick }
             ref={ this._resolveRef('_link') }
diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss
index b1a56224079000..4615fbd8695a3b 100644
--- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss
+++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.scss
@@ -1,35 +1,33 @@
 @import '../../common/common';
 
-:global {
-  .ms-MarqueeSelection {
-    position: relative;
-    cursor: default;
-  }
+.root {
+  position: relative;
+  cursor: default;
+}
 
-  .ms-MarqueeSelection-dragMask {
-    position: absolute;
-    background: rgba(255, 0, 0, 0);
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
+.dragMask {
+  position: absolute;
+  background: rgba(255, 0, 0, 0);
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
 
-  .ms-MarqueeSelection-box {
-    position: absolute;
-    box-sizing: border-box;
-    border: 1px solid $ms-color-themePrimary;
-    pointer-events: none;
-  }
+.box {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px solid $ms-color-themePrimary;
+  pointer-events: none;
+}
 
-  .ms-MarqueeSelection-boxFill {
-    position: absolute;
-    box-sizing: border-box;
-    background-color: $ms-color-themePrimary;
-    opacity: .1;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
+.boxFill {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: $ms-color-themePrimary;
+  opacity: .1;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
 }
diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
index c079231bb0f6c3..485473578b96c1 100644
--- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
+++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
@@ -11,7 +11,7 @@ import {
   getRTL
 } from '../../Utilities';
 import { IMarqueeSelectionProps } from './MarqueeSelection.Props';
-import './MarqueeSelection.scss';
+import styles from './MarqueeSelection.scss';
 
 export interface IMarqueeSelectionState {
   dragOrigin?: IPoint;
@@ -82,14 +82,14 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     return (
       <div
         { ...rootProps }
-        className={ css('ms-MarqueeSelection', rootProps.className) }
+        className={ css('ms-MarqueeSelection', styles.root, rootProps.className) }
         ref='root'
-        >
+      >
         { children }
-        { dragRect && (<div className='ms-MarqueeSelection-dragMask' />) }
+        { dragRect && (<div className={ css('ms-MarqueeSelection-dragMask', styles.dragMask) } />) }
         { dragRect && (
-          <div className='ms-MarqueeSelection-box' style={ dragRect }>
-            <div className='ms-MarqueeSelection-boxFill' />
+          <div className={ css('ms-MarqueeSelection-box', styles.box) } style={ dragRect }>
+            <div className={ css('ms-MarqueeSelection-boxFill', styles.boxFill) } />
           </div>
         ) }
       </div>
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.scss b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.scss
index d7ba093b5a72cd..559e657380cec9 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.scss
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.scss
@@ -7,189 +7,191 @@
 // --------------------------------------------------
 // MessageBar Styles
 
-:global {
-  .ms-MessageBar {
-    @include ms-baseFont;
-    @include ms-bgColor-info;
-    color: $ms-color-infoText;
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    position: relative;
-
-    .ms-MessageBar-icon {
-      @include padding-right(8px);
-      color: $ms-color-info;
-    }
-
-    .ms-Link {
-      font-size: $ms-font-size-s;
-    }
-  }
+.root {
+  @include ms-baseFont;
+  @include ms-bgColor-info;
+  color: $ms-color-infoText;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
 
-  .ms-MessageBar-icon,
-  .ms-MessageBar-text {
-    display: table-cell;
-    vertical-align: top;
+  .icon {
+    @include padding-right(8px);
+    color: $ms-color-info;
   }
 
-  .ms-MessageBar-icon {
-    font-size: $ms-icon-size-m;
-    min-width: 16px;
-    min-height: 16px;
-    display: flex;
+  :global(.ms-Link) {
+    font-size: $ms-font-size-s;
   }
 
-  .ms-MessageBar-text {
-    @include ms-font-s;
-    min-width: 0;
-    display: flex;
+  :global(.ms-Button) {
+    @include margin-left(6px);
   }
+}
 
+.icon,
+.text {
+  display: table-cell;
+  vertical-align: top;
+}
 
-  //== Modifier: Warning message
-  //
-  .ms-MessageBar.ms-MessageBar--warning {
-    @include ms-bgColor-warning;
-    color: $ms-color-warningText;
-  }
+.icon {
+  font-size: $ms-icon-size-m;
+  min-width: 16px;
+  min-height: 16px;
+  display: flex;
+}
 
+.text {
+  @include ms-font-s;
+  min-width: 0;
+  display: flex;
+}
 
-  //== Modifier: Severe Warning message
-  //
-  .ms-MessageBar.ms-MessageBar--severeWarning {
-    @include ms-bgColor-severeWarning;
-    color: $ms-color-severeWarningText;
 
-    .ms-MessageBar-icon {
-      @include ms-fontColor-severeWarning;
-    }
-  }
+//== Modifier: Warning message
+//
+.root.rootIsWarning {
+  @include ms-bgColor-warning;
+  color: $ms-color-warningText;
+}
 
 
-  //== Modifier: Error message
-  //
-  .ms-MessageBar.ms-MessageBar--error {
-    @include ms-bgColor-error;
-    color: $ms-color-errorText;
+//== Modifier: Severe Warning message
+//
+.root.rootIsSevereWarning {
+  @include ms-bgColor-severeWarning;
+  color: $ms-color-severeWarningText;
 
-    .ms-MessageBar-icon {
-      @include ms-fontColor-error;
-    }
+  .icon {
+    @include ms-fontColor-severeWarning;
   }
+}
 
 
-  //== Modifier: Blocked message
-  //
-  .ms-MessageBar.ms-MessageBar--blocked {
-    @include ms-bgColor-error;
-    color: $ms-color-errorText;
+//== Modifier: Error message
+//
+.root.rootIsError {
+  @include ms-bgColor-error;
+  color: $ms-color-errorText;
 
-    .ms-MessageBar-icon {
-      @include ms-fontColor-error;
-    }
+  .icon {
+    @include ms-fontColor-error;
   }
+}
 
 
-  //== Modifier: Success message
-  //
-  .ms-MessageBar.ms-MessageBar--success {
-    @include ms-bgColor-success;
-    color: $ms-color-successText;
+//== Modifier: Blocked message
+//
+.root.rootIsBlocked {
+  @include ms-bgColor-error;
+  color: $ms-color-errorText;
 
-    .ms-MessageBar-icon {
-      @include ms-fontColor-green;
-    }
+  .icon {
+    @include ms-fontColor-error;
   }
+}
 
-  // Shared
 
-  .ms-MessageBar-content {
-    padding: 16px;
-    display: flex;
-    width: 100%;
-    box-sizing: border-box;
-  }
+//== Modifier: Success message
+//
+.root.rootIsSuccess {
+  @include ms-bgColor-success;
+  color: $ms-color-successText;
 
-  .ms-MessageBar-actionables {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    min-width: 0;
+  .icon {
+    @include ms-fontColor-green;
   }
+}
 
-  .ms-MessageBar-actionables > .ms-MessageBar-dismissal {
-    right: 0;
-    top: 0;
-    position: absolute !important; // Needed because we're using focus-border mixin
-  }
+// Shared
 
-  .ms-MessageBar-actions, .ms-MessageBar-actionsOneline {
-    display: flex;
-    flex: 0 0 auto;
-    flex-direction: row-reverse;
-    align-items: center;
-  }
+.content {
+  padding: 16px;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+}
 
-  .ms-MessageBar-actionsOneline {
-    position: relative;
-  }
+.actionables {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
 
-  .ms-MessageBar-dismissal {
-    @include focus-border();
-    min-width: 0;
-  }
-  .ms-MessageBar-dismissalOneline .ms-MessageBar-dismissal {
-    @include margin-right(-8px);
-  }
+.actionables > .dismissal {
+  right: 0;
+  top: 0;
+  position: absolute !important; // Needed because we're using focus-border mixin
+}
 
-  // Add space between adjacent MessageBars.
-  .ms-MessageBar + .ms-MessageBar {
-    margin-bottom: 6px;
-  }
+.actions, .actionsOneline {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row-reverse;
+  align-items: center;
+}
 
-  .ms-MessageBar-innerTextPadding {
-    @include padding-right(24px); // Add padding if we have a dismiss to prevent button overlapping text.
+.actionsOneline {
+  position: relative;
+}
 
-    span, .ms-MessageBar-innerText > span {
-      @include padding-right(4px); // Add padding between text and hyperlink.
-    }
-  }
+.dismissal {
+  @include focus-border();
+  min-width: 0;
+}
+.dismissalOneline .dismissal {
+  @include margin-right(-8px);
+}
+
+// Add space between adjacent MessageBars.
+.root + .root {
+  margin-bottom: 6px;
+}
+
+.innerTextPadding {
+  @include padding-right(24px); // Add padding if we have a dismiss to prevent button overlapping text.
 
-  // When we can have multiple lines in the message bar.
-  .ms-MessageBar-multiline > .ms-MessageBar-content > .ms-MessageBar-actionables {
-    flex-direction: column;
+  span, .innerText > span {
+    @include padding-right(4px); // Add padding between text and hyperlink.
   }
+}
 
-  // When we should have only a single line of text in the message bar.
-  .ms-MessageBar-singleline {
-    .ms-MessageBar-content {
-      .ms-MessageBar-icon{
-        align-items: center;
-      }
+// When we can have multiple lines in the message bar.
+.multiline > .content > .actionables {
+  flex-direction: column;
+}
 
-      .ms-MessageBar-actionables > .ms-MessageBar-text {
-        justify-content: center;
-        align-items: center;
-
-        .ms-MessageBar-innerText,
-        .ms-MessageBar-innerTextPadding {
-          max-height: 1.3em;
-          line-height: 1.3em;
-          overflow-x: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
+// When we should have only a single line of text in the message bar.
+.singleline {
+  .content {
+    .icon{
+      align-items: center;
     }
 
-    .ms-MessageBar-content > .ms-MessageBar-actionables {
-      flex-direction: row;
+    .actionables > .text {
+      justify-content: center;
+      align-items: center;
+
+      .innerText,
+      .innerTextPadding {
+        max-height: 1.3em;
+        line-height: 1.3em;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
   }
 
-  // Because of an odd behaviour in other CSS, ms-MessageBar--remove causes children's icons to use 8px, and not inherit.
-  .ms-MessageBar .ms-Icon--Cancel {
-    font-size: 14px;
+  .content > .actionables {
+    flex-direction: row;
   }
 }
+
+// Because of an odd behaviour in other CSS, ms-MessageBar--remove causes children's icons to use 8px, and not inherit.
+.root :global(.ms-Icon--Cancel) {
+  font-size: 14px;
+}
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
index 4c908f80b12403..1b275583c2feda 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
@@ -5,7 +5,7 @@ import {
 } from '../../Utilities';
 import { Button, ButtonType } from '../../Button';
 import { IMessageBarProps, MessageBarType } from './MessageBar.Props';
-import './MessageBar.scss';
+import styles from './MessageBar.scss';
 
 export interface IMessageBarState {
   labelId?: string;
@@ -56,7 +56,9 @@ export class MessageBar extends React.Component<IMessageBarProps, IMessageBarSta
 
   private _getActionsDiv(): JSX.Element {
     if (this.props.actions) {
-      return <div className={ this.props.isMultiline ? 'ms-MessageBar-actions' : 'ms-MessageBar-actionsOneline' }>
+      return <div className={ this.props.isMultiline ?
+        ('ms-MessageBar-actions ' + styles.actions) :
+        ('ms-MessageBar-actionsOneline ' + styles.actionsOneline) }>
         { this.props.actions }
       </div>;
     }
@@ -64,13 +66,14 @@ export class MessageBar extends React.Component<IMessageBarProps, IMessageBarSta
   }
 
   private _getClassName(): string {
-    return css(this.props.className, 'ms-MessageBar', {
-      'ms-MessageBar': this.props.messageBarType === MessageBarType.info,
-      'ms-MessageBar--error': this.props.messageBarType === MessageBarType.error,
-      'ms-MessageBar--blocked': (this.props.messageBarType === MessageBarType.blocked) || (this.props.messageBarType === MessageBarType.remove), // TODO remove deprecated value at >= 1.0.0
-      'ms-MessageBar--severeWarning': this.props.messageBarType === MessageBarType.severeWarning,
-      'ms-MessageBar--success': this.props.messageBarType === MessageBarType.success,
-      'ms-MessageBar--warning': this.props.messageBarType === MessageBarType.warning
+    return css(this.props.className, 'ms-MessageBar', styles.root, {
+      ['ms-MessageBar ' + styles.root]: this.props.messageBarType === MessageBarType.info,
+      ['ms-MessageBar--error ' + styles.rootIsError]: this.props.messageBarType === MessageBarType.error,
+      ['ms-MessageBar--blocked ' + styles.rootIsBlocked]: (this.props.messageBarType === MessageBarType.blocked) ||
+      (this.props.messageBarType === MessageBarType.remove), // TODO remove deprecated value at >= 1.0.0
+      ['ms-MessageBar--severeWarning ' + styles.rootIsSevereWarning]: this.props.messageBarType === MessageBarType.severeWarning,
+      ['ms-MessageBar--success ' + styles.rootIsSuccess]: this.props.messageBarType === MessageBarType.success,
+      ['ms-MessageBar--warning ' + styles.rootIsWarning]: this.props.messageBarType === MessageBarType.warning
     });
   }
 
@@ -78,7 +81,7 @@ export class MessageBar extends React.Component<IMessageBarProps, IMessageBarSta
     if (this.props.onDismiss != null) {
       return <Button
         disabled={ false }
-        className='ms-MessageBar-dismissal'
+        className={ css('ms-MessageBar-dismissal', styles.dismissal) }
         buttonType={ ButtonType.icon }
         onClick={ this.props.onDismiss }
         icon='Cancel'
@@ -89,23 +92,28 @@ export class MessageBar extends React.Component<IMessageBarProps, IMessageBarSta
   }
 
   private _getIconSpan(): JSX.Element {
-    return <div className='ms-MessageBar-icon'><i className={ `ms-Icon ms-Icon--${this.ICON_MAP[this.props.messageBarType]}` }></i></div>;
+    return (
+      <div className={ css('ms-MessageBar-icon', styles.icon) }>
+        <i className={ `ms-Icon ms-Icon--${this.ICON_MAP[this.props.messageBarType]}` }></i>
+      </div>
+    );
   }
 
   private _getInnerTextClassName(): string {
-    return this.props.onDismiss || this.props.actions ? 'ms-MessageBar-innerTextPadding' : 'ms-MessageBar-innerText';
+    return this.props.onDismiss || this.props.actions ?
+      'ms-MessageBar-innerTextPadding ' + styles.innerTextPadding : 'ms-MessageBar-innerText ' + styles.innerText;
   }
 
   private _renderMultiLine(): React.ReactElement<React.HTMLProps<HTMLAreaElement>> {
     return (
       <div
-        className={ this._getClassName() + ' ms-MessageBar-multiline' }
+        className={ this._getClassName() + ' ms-MessageBar-multiline ' + styles.multiline }
         role='status'
         aria-live={ this._getAnnouncementPriority() }>
-        <div className='ms-MessageBar-content'>
+        <div className={ css('ms-MessageBar-content', styles.content) }>
           { this._getIconSpan() }
-          <div className='ms-MessageBar-actionables'>
-            <div className='ms-MessageBar-text' id={ this.state.labelId }>
+          <div className={ css('ms-MessageBar-actionables', styles.actionables) }>
+            <div className={ css('ms-MessageBar-text', styles.text) } id={ this.state.labelId }>
               <span className={ this._getInnerTextClassName() }>
                 { this.state.showContent && this.props.children }
               </span>
@@ -120,20 +128,20 @@ export class MessageBar extends React.Component<IMessageBarProps, IMessageBarSta
 
   private _renderSingleLine(): React.ReactElement<React.HTMLProps<HTMLAreaElement>> {
     return (
-      <div className={ this._getClassName() + ' ms-MessageBar-singleline' }
+      <div className={ this._getClassName() + ' ms-MessageBar-singleline ' + styles.singleline }
         role='status'
         aria-live={ this._getAnnouncementPriority() }>
-        <div className='ms-MessageBar-content'>
+        <div className={ css('ms-MessageBar-content', styles.content) }>
           { this._getIconSpan() }
-          <div className='ms-MessageBar-actionables'>
-            <div className='ms-MessageBar-text' id={ this.state.labelId }>
+          <div className={ css('ms-MessageBar-actionables', styles.actionables) }>
+            <div className={ css('ms-MessageBar-text', styles.text) } id={ this.state.labelId }>
               <span className={ this._getInnerTextClassName() }>
                 { this.state.showContent && this.props.children }
               </span>
             </div>
           </div>
           { this._getActionsDiv() }
-          <div className='ms-MessageBar-dismissalOneline'>
+          <div className={ css('ms-MessageBar-dismissalOneline', styles.dismissalOneline) }>
             { this._getDismissDiv() }
           </div>
         </div>
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.scss b/packages/office-ui-fabric-react/src/components/Nav/Nav.scss
index 1d8de4a59d2c17..1d65523c217682 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.scss
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.scss
@@ -5,196 +5,192 @@ $hasExpandButtonLinkLeftPadding: 28px;
 $noExpandButtonLinkLeftPadding: 20px;
 $linkRightPadding: 20px;
 
-:global {
+.root {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  user-select: none;
+}
 
-  .ms-Nav {
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    user-select: none;
-  }
+.rootIsOnTop {
+  position: absolute;
+}
 
-  .ms-Nav.is-onTop {
-    position: absolute;
-  }
+.navItems {
+  list-style-type: none;
+}
 
-  .ms-Nav ul {
-    list-style-type: none;
-  }
+.navItems,
+.navItems > .navItem {
+  padding: 0;
+}
 
-  .ms-Nav ul,
-  .ms-Nav ul > li {
-    padding: 0;
-  }
+.groupContent {
+  display: none;
+  margin-bottom: 40px;
+}
 
-  .ms-Nav-groupContent {
-    display: none;
-    margin-bottom: 40px;
-  }
+.group.groupIsExpanded .groupContent {
+  display: block;
+}
 
-  .ms-Nav-group.is-expanded .ms-Nav-groupContent {
-    display: block;
-  }
-
-  .ms-Nav-Icon {
-    padding: 0px;
-    color: $selectedForegroundColor;
-    background: $selectedBackgroundColor;
-    transition: transform .1s linear;
-  }
+.icon {
+  padding: 0px;
+  color: $selectedForegroundColor;
+  background: $selectedBackgroundColor;
+  transition: transform .1s linear;
+}
 
-  .ms-Nav-IconLink {
-    @include margin-right(4px);
-  }
+.iconLink {
+  @include margin-right(4px);
+}
 
-  .ms-Nav-chevronButton {
-    display: block;
+.chevronButton {
+  display: block;
 
-    font-weight: $ms-font-weight-regular;
-    font-size: $ms-font-size-s;
+  font-weight: $ms-font-weight-regular;
+  font-size: $ms-font-size-s;
 
-    @include text-align(left);
-    line-height: $navnode-height;
-    margin: 5px 0;
-    @include padding(0px, $linkRightPadding, 0px, $hasExpandButtonLinkLeftPadding);
-    background: none;
-    border: none;
+  @include text-align(left);
+  line-height: $navnode-height;
+  margin: 5px 0;
+  @include padding(0px, $linkRightPadding, 0px, $hasExpandButtonLinkLeftPadding);
+  background: none;
+  border: none;
 
-    text-transform: uppercase;
-    cursor: pointer;
+  text-transform: uppercase;
+  cursor: pointer;
 
-    color: $unselectedForegroundColor;
-    background: $unselectedBackgroundColor;
+  color: $unselectedForegroundColor;
+  background: $unselectedBackgroundColor;
 
-    &:visited {
-      color: inherit;
-    }
-
-    &:hover {
-      color: $unselectedHoverForegroundColor;
-      background: $unselectedHoverBackgroundColor;
-    }
-
-    &.ms-Nav-chevronButton--group {
-      width: 100%;
-      height: $navnode-height;
-      border-bottom: 1px solid $dividerColor;
-    }
+  &:visited {
+    color: inherit;
   }
 
-  .ms-Nav-chevron.ms-Icon {
-    position: absolute;
-    @include left(8px);
-    height: $navnode-height;
-    line-height: $navnode-height;
-    font-size: 12px;
-    transition: transform .1s linear;
+  &:hover {
+    color: $unselectedHoverForegroundColor;
+    background: $unselectedHoverBackgroundColor;
   }
 
-  .ms-Nav-group.is-expanded .ms-Nav-chevronButton--group .ms-Nav-chevron  {
-    transform: rotate(-180deg);
+  &.chevronButtonIsGroup {
+    width: 100%;
+    height: $navnode-height;
+    border-bottom: 1px solid $dividerColor;
   }
+}
 
-  .ms-Nav-linkText {
-    vertical-align: middle;
-  }
+.chevronIcon {
+  position: absolute;
+  @include left(8px);
+  height: $navnode-height;
+  line-height: $navnode-height;
+  font-size: 12px;
+  transition: transform .1s linear;
+}
 
-  .ms-Nav-compositeLink {
-    display: block;
-    position: relative;
-
-    .ms-Nav-chevronButton.ms-Nav-chevronButton--link {
-      display: block;
-      width: $hasExpandButtonLinkLeftPadding;
-      height: $navnode-height;
-      position: absolute;
-      top: 0;
-      @include left(0);
-      z-index: 1;
-      padding: 0;
-      margin: 0;
-
-    .ms-Nav-chevron {
-        position: relative;
-      }
-    }
+.chevronIsExpanded {
+  transform: rotate(-180deg);
+}
 
-    & a {
-    color: $unselectedForegroundColor;
-    }
-    color: $unselectedForegroundColor;
-    background: $unselectedBackgroundColor;
+.linkText {
+  vertical-align: middle;
+}
 
-    &:hover {
+.compositeLink {
+  display: block;
+  position: relative;
 
-      & a,
-      & .ms-Nav-chevronButton {
-        background: $unselectedHoverBackgroundColor;
-        color: $unselectedHoverForegroundColor;
-      }
-    }
+  .chevronButton.chevronButtonLink {
+    display: block;
+    width: $hasExpandButtonLinkLeftPadding - 2;
+    height: $navnode-height - 2;
+    position: absolute;
+    top: 1px;
+    @include left(1px);
+    z-index: 1;
+    padding: 0;
+    margin: 0;
 
-    &.is-expanded {
-      .ms-Nav-chevron {
-        transform: rotate(-180deg);
-      }
+  .chevronIcon {
+      position: relative;
     }
+  }
 
-    &.is-selected {
-      & a,
-      & .ms-Nav-chevronButton {
-
-        color: $ms-color-themePrimary;
-        background: $selectedBackgroundColor;
+  & a {
+  color: $unselectedForegroundColor;
+  }
+  color: $unselectedForegroundColor;
+  background: $unselectedBackgroundColor;
 
-        &:after {
-          @include border-left(2px, solid, $ms-color-themePrimary);
+  &:hover {
 
-          content: '';
-          position: absolute;
-          top: 0;
-          @include right(0);
-          bottom: 0;
-          @include left(0);
-        }
-      }
+    & a,
+    & .chevronButton {
+      background: $unselectedHoverBackgroundColor;
+      color: $unselectedHoverForegroundColor;
     }
   }
 
-  .ms-Nav-link {
-    display: block;
-    position: relative;
-    height: $navnode-height;
-    line-height: $navnode-height;
-    text-decoration: none;
-    padding: 0 20px;
-    cursor: pointer;
-    text-overflow: ellipsis;
-    text-decoration: none;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .ms-Nav-groupHeaderFontSize {
-    @include ms-font-l;
+  &.compositeLinkIsExpanded {
+    .chevronIcon {
+      transform: rotate(-180deg);
+    }
   }
 
-  .ms-Nav-chevronButton,
-  .ms-Nav-chevronButton--group,
-  .ms-Nav-chevronButton--link,
-  .ms-Nav-link {
-    @include focus-border();
-  }
+  &.compositeLinkIsSelected {
+    & a,
+    & .chevronButton {
 
-  .ms-Nav-linkButton.ms-Button--command {
-    @include padding-left($noExpandButtonLinkLeftPadding);
-    .ms-Button-label {
-      @include ms-font-m;
       color: $ms-color-themePrimary;
-    }
+      background: $selectedBackgroundColor;
 
-    &.isOnExpanded {
-    @include padding-left($hasExpandButtonLinkLeftPadding);
+      &:after {
+        @include border-left(2px, solid, $ms-color-themePrimary);
+
+        content: '';
+        position: absolute;
+        top: 0;
+        @include right(0);
+        bottom: 0;
+        @include left(0);
+      }
     }
   }
-
-}
\ No newline at end of file
+}
+
+.link {
+  display: block;
+  position: relative;
+  height: $navnode-height;
+  line-height: $navnode-height;
+  text-decoration: none;
+  padding: 0 20px;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.groupHeaderFontSize {
+  @include ms-font-l;
+}
+
+.chevronButton,
+.chevronButtonGroup,
+.chevronButtonLink,
+.link {
+  @include focus-border();
+}
+
+.root .link {
+  @include padding-left($noExpandButtonLinkLeftPadding);
+  :global(.ms-Button-label) {
+    @include ms-font-m;
+    color: $ms-color-themePrimary;
+  }
+
+  &.linkIsOnExpanded {
+  @include padding-left($hasExpandButtonLinkLeftPadding);
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx
index d38d3c45c60b2c..82c01936152fa8 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx
@@ -4,8 +4,8 @@ import {
   getRTL
 } from '../../Utilities';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
-import { Button, ButtonType } from '../../Button';
-import './Nav.scss';
+import { CommandButton } from '../../Button';
+import styles from './Nav.scss';
 
 import {
   INav,
@@ -34,7 +34,7 @@ export class Nav extends React.Component<INavProps, INavState> implements INav {
 
   public static defaultProps: INavProps = {
     groups: null,
-    onRenderLink: (link: INavLink) => (<span className='ms-Nav-linkText'>{ link.name }</span>)
+    onRenderLink: (link: INavLink) => (<span className={ css('ms-Nav-linkText', styles.linkText) }>{ link.name }</span>)
   };
 
   private _hasExpandButton: boolean;
@@ -71,7 +71,10 @@ export class Nav extends React.Component<INavProps, INavState> implements INav {
     return (
       <FocusZone direction={ FocusZoneDirection.vertical }>
         <nav role='navigation'
-          className={ css('ms-Nav', className, { 'is-onTop ms-u-slideRightIn40': isOnTop }) }>
+          className={ css('ms-Nav', styles.root, className, {
+            'is-onTop ms-u-slideRightIn40': isOnTop,
+            [styles.rootIsOnTop]: isOnTop
+          }) }>
           { groupElements }
         </nav>
       </FocusZone>
@@ -91,15 +94,15 @@ export class Nav extends React.Component<INavProps, INavState> implements INav {
 
     return (
       <a
-        className={ css('ms-Nav-link') }
+        className={ css('ms-Nav-link', styles.link) }
         style={ { [isRtl ? 'paddingRight' : 'paddingLeft']: paddingBefore } }
         href={ link.url || 'javascript:' }
         onClick={ this._onNavAnchorLinkClicked.bind(this, link) }
         aria-label={ link.ariaLabel }
         title={ link.title || link.name }
         target={ link.target }
-        >
-        { link.iconClassName && <i className={ css('ms-Icon', 'ms-Nav-IconLink', link.iconClassName) }></i> }
+      >
+        { link.iconClassName && <i className={ css('ms-Icon', 'ms-Nav-IconLink', link.iconClassName, styles.iconLink) }></i> }
         { this.props.onRenderLink(link) }
       </a>
     );
@@ -107,15 +110,17 @@ export class Nav extends React.Component<INavProps, INavState> implements INav {
 
   private _renderButtonLink(link: INavLink, linkIndex: number) {
     return (
-      <Button
-        className={ css('ms-Nav-link ms-Nav-linkButton', { 'isOnExpanded': this._hasExpandButton }) }
-        buttonType={ ButtonType.command }
+      <CommandButton
+        className={ css('ms-Nav-link ms-Nav-linkButton', styles.link, {
+          'isOnExpanded': this._hasExpandButton,
+          [styles.linkIsOnExpanded]: this._hasExpandButton
+        }) }
         href={ link.url }
         icon={ link.icon }
         description={ link.title || link.name }
         onClick={ this._onNavButtonLinkClicked.bind(this, link) }>
         { link.name }
-      </Button>);
+      </CommandButton>);
   }
 
   private _renderCompositeLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> {
@@ -123,15 +128,20 @@ export class Nav extends React.Component<INavProps, INavState> implements INav {
 
     return (
       <div key={ link.key || linkIndex }
-        className={ css('ms-Nav-compositeLink', { ' is-expanded': link.isExpanded, 'is-selected': isLinkSelected }) }>
+        className={ css('ms-Nav-compositeLink', styles.compositeLink, {
+          ' is-expanded': link.isExpanded,
+          'is-selected': isLinkSelected,
+          [styles.compositeLinkIsExpanded]: link.isExpanded,
+          [styles.compositeLinkIsSelected]: isLinkSelected
+        }) }>
         { (nestingLevel === 0 && link.links && link.links.length > 0 ?
           <button
-            className='ms-Nav-chevronButton ms-Nav-chevronButton--link'
+            className={ css('ms-Nav-chevronButton ms-Nav-chevronButton--link', styles.chevronButton, styles.chevronButtonLink) }
             onClick={ this._onLinkExpandClicked.bind(this, link) }
             aria-label={ this.props.expandButtonAriaLabel }
             aria-expanded={ link.isExpanded ? 'true' : 'false' }
-            >
-            <i className='ms-Nav-chevron ms-Icon ms-Icon--ChevronDown'></i>
+          >
+            <i className={ css('ms-Nav-chevron ms-Icon ms-Icon--ChevronDown', styles.chevronIcon) }></i>
           </button> : null
         ) }
         { !!link.onClick ? this._renderButtonLink(link, linkIndex) : this._renderAnchorLink(link, linkIndex, nestingLevel) }
@@ -141,7 +151,7 @@ export class Nav extends React.Component<INavProps, INavState> implements INav {
 
   private _renderLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> {
     return (
-      <li key={ link.key || linkIndex } role='listitem'>
+      <li key={ link.key || linkIndex } role='listitem' className={ css(styles.navItem) }>
         { this._renderCompositeLink(link, linkIndex, nestingLevel) }
         { (link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null) }
       </li>
@@ -156,7 +166,7 @@ export class Nav extends React.Component<INavProps, INavState> implements INav {
       (link: INavLink, linkIndex: number) => this._renderLink(link, linkIndex, nestingLevel));
 
     return (
-      <ul role='list' aria-label={ this.props.ariaLabel }>
+      <ul role='list' aria-label={ this.props.ariaLabel } className={ css(styles.navItems) }>
         { linkElements }
       </ul>
     );
@@ -166,17 +176,25 @@ export class Nav extends React.Component<INavProps, INavState> implements INav {
     const isGroupExpanded: boolean = this.state.isGroupExpanded[groupIndex] !== false;
 
     return (
-      <div key={ groupIndex } className={ css('ms-Nav-group', { 'is-expanded': isGroupExpanded }) }>
+      <div key={ groupIndex } className={ css('ms-Nav-group', styles.group, {
+        'is-expanded': isGroupExpanded,
+        [styles.groupIsExpanded]: isGroupExpanded
+      }) }>
         { (group.name ?
           <button
-            className='ms-Nav-chevronButton ms-Nav-chevronButton--group ms-Nav-groupHeaderFontSize'
+            className={ css('ms-Nav-chevronButton ms-Nav-chevronButton--group ms-Nav-groupHeaderFontSize', styles.chevronButton, styles.chevronButtonIsGroup, styles.groupHeaderFontSize) }
             onClick={ this._onGroupHeaderClicked.bind(this, groupIndex) }
-            >
-            <i className={ css('ms-Nav-chevron', 'ms-Icon', 'ms-Icon--ChevronDown') }></i>
+          >
+            <i
+              className={ css(
+                'ms-Nav-chevron ms-Icon ms-Icon--ChevronDown',
+                styles.chevronIcon
+              ) }
+            />
             { group.name }
           </button> : null)
         }
-        <div className={ css('ms-Nav-groupContent', 'ms-u-slideDownIn20') }>
+        <div className={ css('ms-Nav-groupContent', 'ms-u-slideDownIn20', styles.groupContent) }>
           { this._renderLinks(group.links, 0 /* nestingLevel */) }
         </div>
       </div>
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss
index d517e90088353a..25b9b60049dac0 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss
+++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss
@@ -7,25 +7,23 @@
 // --------------------------------------------------
 // Modal overlay styles
 
-:global {
-  .ms-Overlay {
-    background-color: $ms-color-whiteTranslucent40;
-    position: absolute;
-    bottom: 0;
-    left:   0;
-    right:  0;
-    top:    0;
+.root {
+  background-color: $ms-color-whiteTranslucent40;
+  position: absolute;
+  bottom: 0;
+  left:   0;
+  right:  0;
+  top:    0;
 
-    //== Modifier: Hidden overlay
-    //
-    &.ms-Overlay--none {
-      visibility: hidden;
-    }
+//== Modifier: Hidden overlay
+  //
+  &.rootIsNone {
+    visibility: hidden;
+  }
 
-    //== Modifier: Dark overlay
-    //
-    &.ms-Overlay--dark {
-      background-color: $ms-color-blackTranslucent40;
-    }
+  //== Modifier: Dark overlay
+  //
+  &.rootIsDark {
+    background-color: $ms-color-blackTranslucent40;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx
index d8f5cbb1d912dd..964d6391504cd6 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx
@@ -6,7 +6,7 @@ import {
 } from '../../Utilities';
 import { IOverlayProps } from './Overlay.Props';
 
-import './Overlay.scss';
+import styles from './Overlay.scss';
 
 export class Overlay extends React.Component<IOverlayProps, {}> {
   public render() {
@@ -15,9 +15,10 @@ export class Overlay extends React.Component<IOverlayProps, {}> {
 
     let modifiedClassName = css(
       'ms-Overlay',
+      styles.root,
       className,
       {
-        'ms-Overlay--dark': isDarkThemed
+        ['ms-Overlay--dark ' + styles.rootIsDark]: isDarkThemed,
       });
 
     return (
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.Props.ts b/packages/office-ui-fabric-react/src/components/Panel/Panel.Props.ts
index ba9c3e935c392a..e011c07c8e447a 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.Props.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Panel } from './Panel';
+import { ILayerProps } from '../../Layer';
 
 export interface IPanelProps extends React.Props<Panel> {
   /**
@@ -85,6 +86,11 @@ export interface IPanelProps extends React.Props<Panel> {
   * Indicates the selector for first focusable item
   */
   firstFocusableSelector?: string;
+
+  /**
+   * Optional props to pass to the Layer component hosting the panel.
+   */
+  layerProps?: ILayerProps;
 }
 
 export enum PanelType {
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.scss b/packages/office-ui-fabric-react/src/components/Panel/Panel.scss
index f36dd87fd31b39..b330074011ba59 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.scss
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.scss
@@ -1,324 +1,243 @@
 @import '../../common/common';
 
-:global {
-  .ms-Panel {
-    /** bug: panel should not ignore pointer events. */
-    pointer-events: inherit;
-    overflow: hidden;
+// This implementation is RTL friendly, and divides the classes so that the panel types
+// and left/right animations are in different classes. It also separates out the design
+// rules/restrictions for Panel usage so that it becomes a generic Panel. It is up to the
+// user to use the Panels properly (smLeft panels are for left navs, smFixed panels are for
+// drop down menus on mobile, knowing when it's appropriate to have a command bar or not)
+//
+// Here is the OneNote design document for this implementation of the Panel:
+//
+// https://msft.spoppe.com/collab/OSS%20Design/pcp/_layouts/15/WopiFrame.aspx?sourcedoc={9a356b27-4138-491d-b2f6-6b3e442fc6a5}&action=edit&wd=target%28%2F%2FDesign%2FToolkit.one%7C61ef427b-c38f-4ee3-a215-67758011eb67%2FSurface%20Behavior%7C376ed8fd-33f0-4661-85aa-feec8a963fa0%2F%29
+//
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Panel styles
+
+$Panel-width-xs: 272px;
+$Panel-width-sm: 340px;
+$Panel-width-md: 643px;
+$Panel-width-lg: 940px;
+$Panel-margin-md: 48px;
+$Panel-margin-lg: 428px;
+$Panel-margin-xl: 176px;
+$CommandBarHeight: 40px;
+
+.root {
+  display: none;
+  pointer-events: none;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+
+  // Overlay used within panel
+  .overlay {
+    display: none;
+    pointer-events: none;
+    opacity: 1;
+    cursor: pointer;
+    transition: opacity $ms-duration3 $ms-ease1;
   }
+}
 
-  .ms-Panel .ms-Panel-main {
-    position: absolute;
+// The panel itself, where the content goes.
+.main {
+  background-color: $ms-color-white;
 
-    overflow-x: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
+  position: absolute;
+  @include right(0);
+  width: 100%;
+  bottom: 0;
+  top: 0;
 
-  // [thomas.oconnor] Instead of using the current Fabric CSS implementation for the Panel,
-  // we are recreating it here. The Fabic Panel will be undergoing some redesign work in the
-  // near future.
-  // This implementation is RTL friendly, and divides the classes so that the panel types
-  // and left/right animations are in different classes. It also separates out the design
-  // rules/restrictions for Panel usage so that it becomes a generic Panel. It is up to the
-  // user to use the Panels properly (smLeft panels are for left navs, smFixed panels are for
-  // drop down menus on mobile, knowing when it's appropriate to have a command bar or not)
-  //
-  // Here is the OneNote design document for this implementation of the Panel:
-  //
-  // https://msft.spoppe.com/collab/OSS%20Design/pcp/_layouts/15/WopiFrame.aspx?sourcedoc={9a356b27-4138-491d-b2f6-6b3e442fc6a5}&action=edit&wd=target%28%2F%2FDesign%2FToolkit.one%7C61ef427b-c38f-4ee3-a215-67758011eb67%2FSurface%20Behavior%7C376ed8fd-33f0-4661-85aa-feec8a963fa0%2F%29
-  //
-
-  //
-  // Office UI Fabric
-  // --------------------------------------------------
-  // Panel styles
-
-  $Panel-width-xs: 272px;
-  $Panel-width-sm: 340px;
-  $Panel-width-md: 643px;
-  $Panel-width-lg: 940px;
-  $Panel-margin-md: 48px;
-  $Panel-margin-lg: 428px;
-  $Panel-margin-xl: 176px;
-  $CommandBarHeight: 40px;
-
-  .ms-Panel {
-    display: none;
-    pointer-events: none;
+  display: none;
 
-    // Overlay used within panel
-    .ms-Overlay {
-      display: none;
-      pointer-events: none;
-      opacity: 1;
-      cursor: pointer;
-      transition: opacity $ms-duration3 $ms-ease1;
-    }
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  // Medium screens and up - (anchored right, fixed width)
+  @media (min-width: $ms-screen-md-min) {
+    border-left: 1px solid $ms-color-neutralLight;
+    border-right: 1px solid $ms-color-neutralLight;
+    pointer-events: auto;
+    width: $Panel-width-sm;
+    @include drop-shadow(-30px, 0px, 30px, -30px, .2);
+    @include left(auto);
   }
+}
 
-  // The panel itself, where the content goes.
-  .ms-Panel-main {
-    background-color: $ms-color-white;
-    bottom: 0;
-    position: fixed;
-    @include right(0);
-    top: 0;
-    display: none;
-    width: 100%;
+//== Modifier: Small panel (anchored right, fixed width)
+//
+.root.rootIsSmall {
+  .main {
+    width: $Panel-width-xs;
 
-    // Medium screens and up - (anchored right, fixed width)
     @media (min-width: $ms-screen-md-min) {
-      border-left: 1px solid $ms-color-neutralLight;
-      border-right: 1px solid $ms-color-neutralLight;
-      pointer-events: auto;
       width: $Panel-width-sm;
-      @include drop-shadow(-30px, 0px, 30px, -30px, .2);
-      @include left(auto);
     }
   }
+}
 
-  //== Modifier: Small panel (anchored right, fixed width)
-  //
-  .ms-Panel.ms-Panel--sm {
-    .ms-Panel-main {
-      width: $Panel-width-xs;
-
-      @media (min-width: $ms-screen-md-min) {
-        width: $Panel-width-sm;
-      }
-    }
+//== Modifier: Small panel (anchored left, fixed width)
+//
+.root.rootIsSmallLeft {
+  .main {
+    @include right(auto);
+    @include left(0);
+    width: $Panel-width-xs;
   }
+}
 
-  //== Modifier: Small panel (anchored left, fixed width)
-  //
-  .ms-Panel.ms-Panel--smLeft {
-    .ms-Panel-main {
-      @include right(auto);
-      @include left(0);
-      width: $Panel-width-xs;
-    }
+//== Modifier: Small panel, full screen (anchored left, fluid width)
+// Note: This panel should only be used for dropdown menus on small screens.
+//
+.root.rootIsSmallFluid {
+  .main {
+    width: 100%;
   }
+}
 
-  //== Modifier: Small panel, full screen (anchored left, fluid width)
-  // Note: This panel should only be used for dropdown menus on small screens.
-  //
-  .ms-Panel.ms-Panel--smFluid {
-    .ms-Panel-main {
-      width: 100%;
+//== Modifier: Medium, Large, Extra Large panels (anchored right, fluid width)
+//
+.root.rootIsMedium,
+.root.rootIsLarge,
+.root.rootIsXLarge {
+  .main {
+    @media (min-width: $ms-screen-lg-min) {
+      @include left($Panel-margin-md);
+      width: auto;
     }
   }
+}
 
-  //== Modifier: Medium, Large, Extra Largs panels (anchored right, fluid width)
-  //
-  .ms-Panel.ms-Panel--md,
-  .ms-Panel.ms-Panel--lg,
-  .ms-Panel.ms-Panel--xl {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-lg-min) {
-        @include left($Panel-margin-md);
-        width: auto;
-      }
+//== Modifier: Medium panel (anchored right, fixed width)
+//
+.root.rootIsMedium {
+  .main {
+    @media (min-width: $ms-screen-xl-min) {
+      @include left(auto);
+      width: $Panel-width-md;
     }
   }
+}
 
-  //== Modifier: Medium panel (anchored right, fixed width)
-  //
-  .ms-Panel.ms-Panel--md {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-xl-min) {
-        @include left(auto);
-        width: $Panel-width-md;
-      }
+//== Modifier: Large panel (anchored right, fluid width)
+//
+.root.rootIsLarge {
+  .main {
+    @media (min-width: $ms-screen-xxl-min) {
+      @include left($Panel-margin-lg);
     }
   }
+}
 
-  //== Modifier: Large panel (anchored right, fluid width)
-  //
-  .ms-Panel.ms-Panel--lg {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-xxl-min) {
-        @include left($Panel-margin-lg);
-      }
+//== Modifier: Large fixed panel (anchored right, fixed width)
+//
+.root.rootIsLarge.rootIsFixed {
+  .main {
+    @media (min-width: $ms-screen-xxl-min) {
+      @include left(auto);
+      width: $Panel-width-lg;
     }
   }
+}
 
-  //== Modifier: Large fixed panel (anchored right, fixed width)
-  //
-  .ms-Panel.ms-Panel--lg.ms-Panel--fixed {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-xxl-min) {
-        @include left(auto);
-        width: $Panel-width-lg;
-      }
+//== Modifier: XLarge panel (anchored right, fluid width)
+//
+.root.rootIsXLarge {
+  .main {
+    @media (min-width: $ms-screen-xxl-min) {
+      @include left($Panel-margin-xl);
     }
   }
+}
 
-  //== Modifier: XLarge panel (anchored right, fluid width)
-  //
-  .ms-Panel.ms-Panel--xl {
-    .ms-Panel-main {
-      @media (min-width: $ms-screen-xxl-min) {
-        @include left($Panel-margin-xl);
-      }
-    }
-  }
+//== State: When the panel is open.
+//
+.root.rootIsOpen {
+  display: block;
 
-  //== State: When the panel is open.
-  //
-  .ms-Panel.is-open {
+  .main {
+    opacity: 1;
+    pointer-events: auto;
     display: block;
+  }
 
-    .ms-Panel-main {
-      opacity: 1;
-      pointer-events: auto;
-      display: block;
-    }
-
-    .ms-Overlay {
-      display: block;
-      pointer-events: auto;
-
-      @media screen and (-ms-high-contrast: active) {
-        opacity: 0;
-      }
-    }
-
-    &.ms-Panel-animateIn {
-      .ms-Panel-main {
-        @include ms-u-fadeIn100;
-      }
-    }
-
-    &.ms-Panel-animateOut {
-      .ms-Panel-main {
-        @include ms-u-fadeOut100;
-      }
-
-      .ms-Overlay {
-        display: none;
-      }
-    }
+  .overlay {
+    cursor: pointer;
+    display: block;
+    pointer-events: auto;
 
-    // Medium screens and up
-    @media (min-width: $ms-screen-md-min) {
-      // Animations -- Default (anchored right)
-      &.ms-Panel--openRight.ms-Panel-animateIn {
-        .ms-Panel-main {
-          @include ms-u-slideLeftIn40;
-        }
-
-        .ms-Overlay {
-          @include ms-u-fadeIn200;
-        }
-      }
-
-      &.ms-Panel--openRight.ms-Panel-animateOut {
-        .ms-Panel-main {
-          @include ms-u-slideRightOut40;
-        }
-        .ms-Overlay {
-          @include ms-u-fadeOut200;
-        }
-      }
-
-      // Animations - Left panel (anchored left)
-      &.ms-Panel--openLeft.ms-Panel-animateIn {
-        .ms-Panel-main {
-          @include ms-u-slideRightIn40;
-        }
-
-        .ms-Overlay {
-          @include ms-u-fadeIn200;
-        }
-      }
-
-      &.ms-Panel--openLeft.ms-Panel-animateOut {
-        .ms-Panel-main {
-          @include ms-u-slideLeftOut40;
-        }
-        .ms-Overlay {
-          @include ms-u-fadeOut200;
-        }
-      }
-
-      // Animate overlay to full opacity, activate pointer events
-      .ms-Overlay {
-        cursor: pointer;
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      &.ms-Panel--openRight.ms-Panel-animateIn,
-      &.ms-Panel--openLeft.ms-Panel-animateIn {
-        .ms-Overlay {
-          @media screen and (-ms-high-contrast: active) {
-            opacity: 0;
-            animation-name: none;
-          }
-        }
-      }
+    @media screen and (-ms-high-contrast: active) {
+      opacity: 0;
     }
   }
+}
 
-  // The close button in the top right (x)
-  .ms-Panel-closeButton {
-    @include button-reset();
-    position: absolute;
-    @include right(8px);
-    top: 0;
-    height: $CommandBarHeight;
-    width: $CommandBarHeight;
-    line-height: $CommandBarHeight;
-    padding: 0;
-    color: $ms-color-neutralSecondary;
-    font-size: $ms-icon-size-m;
-
-    &:hover {
-      color: $ms-color-neutralPrimary;
-    }
+// The  button in the top right (x)
+.closeButton {
+  @include button-reset();
+  position: absolute;
+  @include right(8px);
+  top: 0;
+  height: $CommandBarHeight;
+  width: $CommandBarHeight;
+  line-height: $CommandBarHeight;
+  padding: 0;
+  color: $ms-color-neutralSecondary;
+  font-size: $ms-icon-size-m;
+
+  &:hover {
+    color: $ms-color-neutralPrimary;
   }
+}
 
+// Scrollable content area
+.contentInner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 16px 20px;
+  overflow-y: auto;
 
-  // Scrollable content area
-  .ms-Panel-contentInner {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 0 16px 20px;
-    overflow-y: auto;
-    :global(.ms-Panel--hasCloseButton) & {
-      top: $CommandBarHeight;
-    }
-
-    -webkit-overflow-scrolling: touch;
+  .rootHasCloseButton & {
+    top: $CommandBarHeight;
+  }
 
-    /* Force hw accelleration on scrollable region */
-    transform: translateZ(0);
+  -webkit-overflow-scrolling: touch;
 
-    @media (min-width: $ms-screen-lg-min) {
-      padding: 0 32px 20px;
-    }
+  /* Force hw accelleration on scrollable region */
+  transform: translateZ(0);
 
-    @media (min-width: $ms-screen-xxl-min) {
-      padding: 0 40px 20px;
-    }
+  @media (min-width: $ms-screen-lg-min) {
+    padding: 0 32px 20px;
   }
 
-  // Header text at the top of the panel.
-  .ms-Panel-headerText {
-    @include ms-font-xl;
-    color: $ms-color-neutralPrimary;
-    margin: 10px 0;
-    padding: 4px 0;
-    line-height: 1;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  @media (min-width: $ms-screen-xxl-min) {
+    padding: 0 40px 20px;
+  }
+}
 
-    @media (min-width: $ms-screen-xl-min) {
-      margin-top: 30px;
-    }
+// Header text at the top of the panel.
+.headerText {
+  @include ms-font-xl;
+  color: $ms-color-neutralPrimary;
+  margin: 10px 0;
+  padding: 4px 0;
+  line-height: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  @media (min-width: $ms-screen-xl-min) {
+    margin-top: 30px;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
index b6c1641c18a881..9e815610e2d855 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
@@ -12,8 +12,9 @@ import { FocusTrapZone } from '../FocusTrapZone/index';
 import { IPanelProps, PanelType } from './Panel.Props';
 import { Layer } from '../Layer/Layer';
 import { Overlay } from '../../Overlay';
-import { Popup } from '../Popup/index';
-import './Panel.scss';
+import { Popup } from '../../Popup';
+import { IconButton } from '../../Button';
+import styles from './Panel.scss';
 
 export interface IPanelState {
   isOpen?: boolean;
@@ -22,6 +23,14 @@ export interface IPanelState {
   id?: string;
 }
 
+// Animation class constants.
+const FADE_IN_200 = 'ms-u-fadeIn200';
+const FADE_OUT_200 = 'ms-u-fadeOut200';
+const SLIDE_LEFT_IN_40 = 'ms-u-slideLeftIn40';
+const SLIDE_LEFT_OUT_40 = 'ms-u-slideLeftOut40';
+const SLIDE_RIGHT_IN_40 = 'ms-u-slideRightIn40';
+const SLIDE_RIGHT_OUT_40 = 'ms-u-slideRightOut40';
+
 export class Panel extends BaseComponent<IPanelProps, IPanelState> {
 
   public static defaultProps: IPanelProps = {
@@ -69,17 +78,18 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> {
     let {
       children,
       className = '',
-      type,
-      hasCloseButton,
-      isLightDismiss,
-      isBlocking,
-      headerText,
       closeButtonAriaLabel,
-      headerClassName = '',
       elementToFocusOnDismiss,
-      ignoreExternalFocusing,
+      firstFocusableSelector,
       forceFocusInsideTrap,
-      firstFocusableSelector
+      hasCloseButton,
+      headerClassName = '',
+      headerText,
+      ignoreExternalFocusing,
+      isBlocking,
+      isLightDismiss,
+      layerProps,
+      type
     } = this.props;
     let { isOpen, isAnimatingOpen, isAnimatingClose, id } = this.state;
     let isLeft = type === PanelType.smallFixedNear ? true : false;
@@ -95,26 +105,39 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> {
 
     let header;
     if (headerText) {
-      header = <p className={ css('ms-Panel-headerText', headerClassName) } id={ headerTextId }>{ headerText }</p>;
+      header = <p className={ css('ms-Panel-headerText', styles.headerText, headerClassName) } id={ headerTextId }>{ headerText }</p>;
     }
 
     let closeButton;
     if (hasCloseButton) {
-      closeButton = <button className='ms-Panel-closeButton ms-PanelAction-close' onClick={ this._onPanelClick } aria-label={ closeButtonAriaLabel } data-is-visible={ true }>
-        <i className='ms-Panel-closeIcon ms-Icon ms-Icon--Cancel'></i>
-      </button>;
+      closeButton = (
+        <IconButton
+          className={ css('ms-Panel-closeButton ms-PanelAction-close', styles.closeButton) }
+          onClick={ this._onPanelClick }
+          aria-label={ closeButtonAriaLabel }
+          data-is-visible={ true } icon='Cancel'
+        />
+      );
     }
 
     let overlay;
     if (isBlocking) {
-      overlay = <Overlay
-        isDarkThemed={ false }
-        onClick={ isLightDismiss ? this._onPanelClick : null }
-      />;
+      overlay = (
+        <Overlay
+          className={ css(
+            styles.overlay,
+            {
+              [FADE_IN_200]: isAnimatingOpen,
+              [FADE_OUT_200]: isAnimatingClose
+            }) }
+          isDarkThemed={ false }
+          onClick={ isLightDismiss ? this._onPanelClick : null }
+        />
+      );
     }
 
     return (
-      <Layer>
+      <Layer { ...layerProps }>
         <Popup
           role='dialog'
           ariaLabelledBy={ headerText && headerTextId }
@@ -122,39 +145,45 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> {
           <div
             ref={ this._onPanelRef }
             className={
-              css('ms-Panel', className, {
-                'ms-Panel--openLeft': !isOnRightSide,  // because the RTL animations are not being used, we need to set a class
-                'ms-Panel--openRight': isOnRightSide,  // because the RTL animations are not being used, we need to set a class
-                'is-open': isOpen,
-                'ms-Panel-animateIn': isAnimatingOpen,
-                'ms-Panel-animateOut': isAnimatingClose,
-                'ms-Panel--smFluid': type === PanelType.smallFluid,
-                'ms-Panel--smLeft': type === PanelType.smallFixedNear,
-                'ms-Panel--sm': type === PanelType.smallFixedFar,
-                'ms-Panel--md': type === PanelType.medium,
-                'ms-Panel--lg': type === PanelType.large || type === PanelType.largeFixed,
-                'ms-Panel--fixed': type === PanelType.largeFixed,
-                'ms-Panel--xl': type === PanelType.extraLarge,
-                'ms-Panel--hasCloseButton': hasCloseButton
+              css('ms-Panel', styles.root, className, {
+                // because the RTL animations are not being used, we need to set a class
+                ['is-open ' + styles.rootIsOpen]: isOpen,
+                ['ms-Panel--smFluid ' + styles.rootIsSmallFluid]: type === PanelType.smallFluid,
+                ['ms-Panel--smLeft ' + styles.rootIsSmallLeft]: type === PanelType.smallFixedNear,
+                ['ms-Panel--sm ' + styles.rootIsSmall]: type === PanelType.smallFixedFar,
+                ['ms-Panel--md ' + styles.rootIsMedium]: type === PanelType.medium,
+                ['ms-Panel--lg ' + styles.rootIsLarge]: type === PanelType.large || type === PanelType.largeFixed,
+                ['ms-Panel--fixed ' + styles.rootIsFixed]: type === PanelType.largeFixed,
+                ['ms-Panel--xl ' + styles.rootIsXLarge]: type === PanelType.extraLarge,
+                ['ms-Panel--hasCloseButton ' + styles.rootHasCloseButton]: hasCloseButton
               })
             }
           >
             { overlay }
             <FocusTrapZone
-              className='ms-Panel-main'
+              className={ css(
+                'ms-Panel-main',
+                styles.main,
+                {
+                  [SLIDE_RIGHT_IN_40]: isAnimatingOpen && !isOnRightSide,
+                  [SLIDE_LEFT_IN_40]: isAnimatingOpen && isOnRightSide,
+                  [SLIDE_LEFT_OUT_40]: isAnimatingClose && !isOnRightSide,
+                  [SLIDE_RIGHT_OUT_40]: isAnimatingClose && isOnRightSide
+                }
+              ) }
               elementToFocusOnDismiss={ elementToFocusOnDismiss }
               isClickableOutsideFocusTrap={ isLightDismiss }
               ignoreExternalFocusing={ ignoreExternalFocusing }
               forceFocusInsideTrap={ forceFocusInsideTrap }
               firstFocusableSelector={ firstFocusableSelector }
             >
-              <div className='ms-Panel-commands' data-is-visible={ true } >
+              <div className={ css('ms-Panel-commands') } data-is-visible={ true } >
                 { pendingCommandBarContent }
                 { closeButton }
               </div>
-              <div className='ms-Panel-contentInner'>
+              <div className={ css('ms-Panel-contentInner', styles.contentInner) }>
                 { header }
-                <div className='ms-Panel-content'>
+                <div className={ css('ms-Panel-content') }>
                   { children }
                 </div>
               </div>
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.Props.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.Props.ts
index 2fe31004f71127..1645c4d7ed9be2 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.Props.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IRenderFunction } from '../../Utilities';
 import { Persona } from './Persona';
 
 export interface IPersonaProps extends React.HTMLProps<Persona> {
@@ -36,6 +37,11 @@ export interface IPersonaProps extends React.HTMLProps<Persona> {
    */
   imageInitials?: string;
 
+  /**
+   * Optional custom renderer for the initials
+   */
+  onRenderInitials?: IRenderFunction<IPersonaProps>;
+
   /**
    * The background color when the user's initials are displayed.
    * @defaultvalue [Derived from primaryText]
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.scss b/packages/office-ui-fabric-react/src/components/Persona/Persona.scss
index 51817f6166f016..0d22813a1c3b2c 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.scss
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.scss
@@ -61,713 +61,712 @@ $ms-Persona-presenceSizeMd: 12px;
 $ms-Persona-presenceSizeLg: 20px;
 $ms-Persona-presenceSizeXl: 28px;
 
-:global {
-  .ms-Persona {
-    @include ms-baseFont;
-    @include ms-u-normalize;
-    color: $ms-color-neutralPrimary;
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-    line-height: 1;
-    position: relative;
-    height: $ms-Persona-sizeMd;
-    display: flex;
-    align-items: center;
+.root {
+  @include ms-baseFont;
+  @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  line-height: 1;
+  position: relative;
+  height: $ms-Persona-sizeMd;
+  display: flex;
+  align-items: center;
+
+  .contextualHost {
+    display: none;
+  }
+}
 
-    .ms-ContextualHost {
-      display: none;
-    }
+.imageArea {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  flex: 0 0 $ms-Persona-sizeMd;
+  height: $ms-Persona-sizeMd;
+  width: $ms-Persona-sizeMd;
+  border-radius: 50%;
+
+  @media screen and (-ms-high-contrast: active) {
+    border: 1px solid $ms-color-white;
   }
 
-  .ms-Persona-imageArea {
-    position: relative;
-    overflow: hidden;
-    text-align: center;
-    flex: 0 0 $ms-Persona-sizeMd;
-    height: $ms-Persona-sizeMd;
-    width: $ms-Persona-sizeMd;
-    border-radius: 50%;
+  @media screen and (-ms-high-contrast: black-on-white) {
+    border: 1px solid $ms-color-black;
+  }
 
-    @media screen and (-ms-high-contrast: active) {
-      border: 1px solid $ms-color-white;
-    }
+  .image {
+    border: 0px;
+  }
+}
 
-    @media screen and (-ms-high-contrast: black-on-white) {
-      border: 1px solid $ms-color-black;
-    }
+//= Note: The doughboy placeholder is being deprecated.
+// The initials color block (.ms-Persona-initials) will be used going forward
+// as a fallback when the persona does not have an image.
+.placeholder {
+  color: $ms-color-white;
+  position: absolute;
+  right: 0;
+  left: 0;
+  font-size: 47px;
+  top: 9px;
+  z-index: $ms-zIndex-middle;
+}
 
-    .ms-Image {
-      border: 0px;
-    }
-  }
+.initials {
+  color: $ms-color-white;
+  font-size: $ms-font-size-l;
+  font-weight: $ms-font-weight-light;
+  line-height: 46px;
+  height: $ms-Persona-sizeMd;
 
-  //= Note: The doughboy placeholder is being deprecated.
-  // The initials color block (.ms-Persona-initials) will be used going forward
-  // as a fallback when the persona does not have an image.
-  .ms-Persona-placeholder {
-    color: $ms-color-white;
-    position: absolute;
-    right: 0;
-    left: 0;
-    font-size: 47px;
-    top: 9px;
-    z-index: $ms-zIndex-middle;
+  &.initialsIsLightBlue {
+    background-color: $ms-color-initials-lightBlue;
+  }
+  &.initialsIsBlue {
+    background-color: $ms-color-initials-blue;
+  }
+  &.initialsIsDarkBlue {
+    background-color: $ms-color-initials-darkBlue;
+  }
+  &.initialsIsTeal {
+    background-color: $ms-color-initials-teal;
+  }
+  &.initialsIsLightGreen {
+    background-color: $ms-color-initials-lightGreen;
+  }
+  &.initialsIsGreen {
+    background-color: $ms-color-initials-green;
+  }
+  &.initialsIsDarkGreen {
+    background-color: $ms-color-initials-darkGreen;
+  }
+  &.initialsIsLightPink {
+    background-color: $ms-color-initials-lightPink;
+  }
+  &.initialsIsPink {
+    background-color: $ms-color-initials-pink;
   }
+  &.initialsIsMagenta {
+    background-color: $ms-color-initials-magenta;
+  }
+  &.initialsIsPurple {
+    background-color: $ms-color-initials-purple;
+  }
+  &.initialsIsBlack {
+    background-color: $ms-color-initials-black;
+  }
+  &.initialsIsOrange {
+    background-color: $ms-color-initials-orange;
+  }
+  &.initialsIsRed {
+    background-color: $ms-color-initials-red;
+  }
+  &.initialsIsDarkRed {
+    background-color: $ms-color-initials-darkRed;
+  }
+}
 
-  .ms-Persona-initials {
-    color: $ms-color-white;
-    font-size: $ms-font-size-l;
-    font-weight: $ms-font-weight-light;
-    line-height: 46px;
-    height: $ms-Persona-sizeMd;
+.image {
+  @include margin-right(10px);
+  position: absolute;
+  top: 0;
+  @include left(0);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  perspective: 1px;
+}
 
-    &.ms-Persona-initials--lightBlue {
-      background-color: $ms-color-initials-lightBlue;
-    }
-    &.ms-Persona-initials--blue {
-      background-color: $ms-color-initials-blue;
-    }
-    &.ms-Persona-initials--darkBlue {
-      background-color: $ms-color-initials-darkBlue;
-    }
-    &.ms-Persona-initials--teal {
-      background-color: $ms-color-initials-teal;
-    }
-    &.ms-Persona-initials--lightGreen {
-      background-color: $ms-color-initials-lightGreen;
-    }
-    &.ms-Persona-initials--green {
-      background-color: $ms-color-initials-green;
-    }
-    &.ms-Persona-initials--darkGreen {
-      background-color: $ms-color-initials-darkGreen;
-    }
-    &.ms-Persona-initials--lightPink {
-      background-color: $ms-color-initials-lightPink;
-    }
-    &.ms-Persona-initials--pink {
-      background-color: $ms-color-initials-pink;
-    }
-    &.ms-Persona-initials--magenta {
-      background-color: $ms-color-initials-magenta;
-    }
-    &.ms-Persona-initials--purple {
-      background-color: $ms-color-initials-purple;
-    }
-    &.ms-Persona-initials--black {
-      background-color: $ms-color-initials-black;
-    }
-    &.ms-Persona-initials--orange {
-      background-color: $ms-color-initials-orange;
-    }
-    &.ms-Persona-initials--red {
-      background-color: $ms-color-initials-red;
-    }
-    &.ms-Persona-initials--darkRed {
-      background-color: $ms-color-initials-darkRed;
-    }
-  }
+.image[src=""] {
+  display: none;
+}
 
-  .ms-Persona-image {
-    @include margin-right(10px);
-    position: absolute;
-    top: 0;
-    @include left(0);
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    perspective: 1px;
+.presence {
+  background-color: $ms-color-presence-available;
+  position: absolute;
+  height: $ms-Persona-presenceSizeMd;
+  width: $ms-Persona-presenceSizeMd;
+  border-radius: 50%;
+  top: auto;
+  @include left(34px);
+  bottom: -1px;
+  border: 2px solid $ms-color-white;
+  text-align: center;
+  box-sizing: content-box;
+  // Setting -ms-high-contrast-adjust to none Overrides the default behaviors of high contrast more in the Edge browser.
+  -ms-high-contrast-adjust: none;
+  // This is a temporary local fix and should be removed once Fabric Core 6.0 is released.
+
+  @media screen and (-ms-high-contrast: active) {
+    border-color: $ms-color-black;
+    color: $ms-color-black;
+    background-color: $ms-color-white;
   }
 
-  .ms-Persona-image[src=""] {
-    display: none;
+  @media screen and (-ms-high-contrast: black-on-white) {
+    border-color: $ms-color-white;
+    color: $ms-color-white;
+    background-color: $ms-color-black;
   }
 
-  .ms-Persona-presence {
-    background-color: $ms-color-presence-available;
-    position: absolute;
-    height: $ms-Persona-presenceSizeMd;
-    width: $ms-Persona-presenceSizeMd;
-    border-radius: 50%;
-    top: auto;
-    @include left(34px);
-    bottom: -1px;
-    border: 2px solid $ms-color-white;
-    text-align: center;
-    box-sizing: content-box;
-    // Setting -ms-high-contrast-adjust to none Overrides the default behaviors of high contrast more in the Edge browser.
-    -ms-high-contrast-adjust: none;
-    // This is a temporary local fix and should be removed once Fabric Core 6.0 is released.
+  .presenceIcon {
+    color: $ms-color-white;
+    font-size: 8px;
+    line-height: $ms-Persona-presenceSizeMd;
+    vertical-align: top;
 
     @media screen and (-ms-high-contrast: active) {
-      border-color: $ms-color-black;
       color: $ms-color-black;
-      background-color: $ms-color-white;
     }
 
     @media screen and (-ms-high-contrast: black-on-white) {
-      border-color: $ms-color-white;
       color: $ms-color-white;
-      background-color: $ms-color-black;
     }
+  }
+}
 
-    .ms-Persona-presenceIcon {
-      color: $ms-color-white;
-      font-size: 8px;
-      line-height: $ms-Persona-presenceSizeMd;
-      vertical-align: top;
-
-      @media screen and (-ms-high-contrast: active) {
-        color: $ms-color-black;
-      }
+.details {
+  @include padding(0, 24px, 0, 12px);
+  min-width: 0;
+  width: 100%;
+  @include text-align(left);
+}
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        color: $ms-color-white;
-      }
-    }
-  }
+.primaryText,
+.secondaryText,
+.tertiaryText,
+.optionalText,
+.textContent {
+  @include noWrap();
+}
 
-  .ms-Persona-details {
-    @include padding(0, 24px, 0, 12px);
-    min-width: 0;
-    @include text-align(left);
-  }
+.primaryText {
+  color: $ms-color-neutralPrimary;
+  font-weight: $ms-font-weight-regular;
+  font-size: $ms-font-size-l;
+  margin-top: -3px;
+  line-height: 1.4;
+}
 
-  .ms-Persona-primaryText,
-  .ms-Persona-secondaryText,
-  .ms-Persona-tertiaryText,
-  .ms-Persona-optionalText,
-  .ms-Persona-primaryTextContent {
-    @include noWrap();
-  }
+.secondaryText,
+.tertiaryText,
+.optionalText {
+  color: $ms-color-neutralSecondary;
+  font-weight: $ms-font-weight-regular;
+  font-size: $ms-font-size-s;
+  white-space: nowrap;
+  line-height: 1.3;
+}
 
-  .ms-Persona-primaryText {
-    color: $ms-color-neutralPrimary;
-    font-weight: $ms-font-weight-regular;
-    font-size: $ms-font-size-l;
-    margin-top: -3px;
-    line-height: 1.4;
-  }
+.secondaryText {
+  padding-top: 3px;
+}
 
-  .ms-Persona-secondaryText,
-  .ms-Persona-tertiaryText,
-  .ms-Persona-optionalText {
-    color: $ms-color-neutralSecondary;
-    font-weight: $ms-font-weight-regular;
-    font-size: $ms-font-size-s;
-    white-space: nowrap;
-    line-height: 1.3;
-  }
+.tertiaryText,
+.optionalText {
+  padding-top: 5px;
+  display: none; // Hidden on default persona
+}
 
-  .ms-Persona-secondaryText {
-    padding-top: 3px;
-  }
 
-  .ms-Persona-tertiaryText,
-  .ms-Persona-optionalText {
-    padding-top: 5px;
-    display: none; // Hidden on default persona
+//== Modifier: Tiny Persona
+//
+.root.rootIsTiny {
+  height: $ms-Persona-sizeTiny;
+  min-width: $ms-Persona-sizeTiny;
+
+  .imageArea {
+    overflow: visible;
+    background: transparent;
+    height: 0;
+    width: 0;
   }
 
+  .presence {
+    @include right(auto);
+    top: 10px;
+    @include left(0);
+    border: 0;
 
-  //== Modifier: Tiny Persona
-  //
-  .ms-Persona.ms-Persona--tiny {
-    height: $ms-Persona-sizeTiny;
-    min-width: $ms-Persona-sizeTiny;
-
-    .ms-Persona-imageArea {
-      overflow: visible;
-      background: transparent;
-      height: 0;
-      width: 0;
+    @media screen and (-ms-high-contrast: active) {
+      top: 9px;
+      border: 1px solid $ms-color-white;
     }
 
-    .ms-Persona-presence {
-      @include right(auto);
-      top: 10px;
-      @include left(0);
-      border: 0;
-
-      @media screen and (-ms-high-contrast: active) {
-        top: 9px;
-        border: 1px solid $ms-color-white;
-      }
-
-      @media screen and (-ms-high-contrast: black-on-white) {
-        border: 1px solid $ms-color-black;
-      }
+    @media screen and (-ms-high-contrast: black-on-white) {
+      border: 1px solid $ms-color-black;
     }
+  }
 
-    .ms-Persona-details {
-      @include padding-left(20px);
-    }
+  .details {
+    @include padding-left(20px);
+  }
 
-    .ms-Persona-primaryText {
-      font-size: $ms-font-size-m;
-      padding-top: 4px;
-    }
+  .primaryText {
+    font-size: $ms-font-size-m;
+    padding-top: 4px;
+  }
 
-    .ms-Persona-secondaryText {
-      display: none;
-    }
+  .secondaryText {
+    display: none;
   }
+}
 
 
-  //== Modifier: Tiny Persona with read only state
-  //
-  // This variant includes a semicolon, and is
-  // most often presented within a People Picker.
-  .ms-Persona.ms-Persona--tiny.ms-Persona--readonly {
-    padding: 0;
-    background-color: transparent;
+//== Modifier: Tiny Persona with read only state
+//
+// This variant includes a semicolon, and is
+// most often presented within a People Picker.
+.root.rootIsTiny.rootIsReadonly {
+  padding: 0;
+  background-color: transparent;
+
+  .primaryText:after {
+    content: ';';
+  }
+}
 
-    .ms-Persona-primaryText:after {
-      content: ';';
-    }
+
+//== Modifier: Extra Small Persona
+//
+.root.rootIsExtraExtraSmall {
+  height: $ms-Persona-sizeXxs;
+  line-height: $ms-Persona-sizeXxs;
+  min-width: $ms-Persona-sizeXxs;
+  margin-right: 4px;
+
+  .imageArea,
+  .image {
+    flex: 0 0 $ms-Persona-sizeXxs;
+    height: $ms-Persona-sizeXxs;
+    width: $ms-Persona-sizeXxs;
   }
 
+  .placeholder {
+    font-size: 18px;
+    top: 4px;
+  }
 
-  //== Modifier: Extra Small Persona
-  //
-  .ms-Persona.ms-Persona--xxs {
+  .initials {
+    font-size: $ms-font-size-xs;
     height: $ms-Persona-sizeXxs;
     line-height: $ms-Persona-sizeXxs;
-    min-width: $ms-Persona-sizeXxs;
-    margin-right: 4px;
-
-    .ms-Persona-imageArea,
-    .ms-Persona-image {
-      flex: 0 0 $ms-Persona-sizeXxs;
-      height: $ms-Persona-sizeXxs;
-      width: $ms-Persona-sizeXxs;
-    }
+  }
 
-    .ms-Persona-placeholder {
-      font-size: 18px;
-      top: 4px;
-    }
+  .presence {
+    height: $ms-Persona-presenceSizeXxs;
+    width: $ms-Persona-presenceSizeXxs;
+    border: 1px solid #ffffff;
+    @include left(16px);
+  }
 
-    .ms-Persona-initials {
-      font-size: $ms-font-size-xs;
-      height: $ms-Persona-sizeXxs;
-      line-height: $ms-Persona-sizeXxs;
-    }
+  .presenceIcon {
+    font-size: 6px;
+    line-height: 9px;
+  }
 
-    .ms-Persona-presence {
-      height: $ms-Persona-presenceSizeXxs;
-      width: $ms-Persona-presenceSizeXxs;
-      border: 1px solid #ffffff;
-      @include left(16px);
-    }
+  .primaryText {
+    font-size: $ms-font-size-m;
+    padding-top: 3px;
+  }
 
-    .ms-Persona-presenceIcon {
-      font-size: 6px;
-      line-height: 9px;
-    }
+  .secondaryText {
+    display: none;
+  }
+}
 
-    .ms-Persona-primaryText {
-      font-size: $ms-font-size-m;
-      padding-top: 3px;
-    }
 
-    .ms-Persona-secondaryText {
-      display: none;
-    }
+//== Modifier: Extra Small Persona
+//
+.root.rootIsExtraSmall {
+  height: $ms-Persona-sizeXs;
+  line-height: $ms-Persona-sizeXs;
+  min-width: $ms-Persona-sizeXs;
+
+  .imageArea,
+  .image {
+    flex: 0 0 $ms-Persona-sizeXs;
+    height: $ms-Persona-sizeXs;
+    width: $ms-Persona-sizeXs;
   }
 
+  .placeholder {
+    font-size: 28px;
+    top: 6px;
+  }
 
-  //== Modifier: Extra Small Persona
-  //
-  .ms-Persona.ms-Persona--xs {
+  .initials {
+    font-size: $ms-font-size-s;
     height: $ms-Persona-sizeXs;
     line-height: $ms-Persona-sizeXs;
-    min-width: $ms-Persona-sizeXs;
-
-    .ms-Persona-imageArea,
-    .ms-Persona-image {
-      flex: 0 0 $ms-Persona-sizeXs;
-      height: $ms-Persona-sizeXs;
-      width: $ms-Persona-sizeXs;
-    }
+  }
 
-    .ms-Persona-placeholder {
-      font-size: 28px;
-      top: 6px;
-    }
+  .presence {
+    @include left(19px);
+  }
 
-    .ms-Persona-initials {
-      font-size: $ms-font-size-s;
-      height: $ms-Persona-sizeXs;
-      line-height: $ms-Persona-sizeXs;
-    }
+  .primaryText {
+    font-size: $ms-font-size-m;
+    padding-top: 3px;
+  }
 
-    .ms-Persona-presence {
-      @include left(19px);
-    }
+  .secondaryText {
+    display: none;
+  }
+}
 
-    .ms-Persona-primaryText {
-      font-size: $ms-font-size-m;
-      padding-top: 3px;
-    }
 
-    .ms-Persona-secondaryText {
-      display: none;
-    }
+//== Modifier: Small Persona
+//
+.root.rootIsSmall {
+  height: $ms-Persona-sizeSm;
+  line-height: $ms-Persona-sizeSm;
+  min-width: $ms-Persona-sizeSm;
+
+  .imageArea,
+  .image {
+    flex: 0 0 $ms-Persona-sizeSm;
+    height: $ms-Persona-sizeSm;
+    width: $ms-Persona-sizeSm;
   }
 
+  .placeholder {
+    font-size: 38px;
+    top: 5px;
+  }
 
-  //== Modifier: Small Persona
-  //
-  .ms-Persona.ms-Persona--sm {
+  .initials {
+    font-size: $ms-font-size-m;
     height: $ms-Persona-sizeSm;
     line-height: $ms-Persona-sizeSm;
-    min-width: $ms-Persona-sizeSm;
-
-    .ms-Persona-imageArea,
-    .ms-Persona-image {
-      flex: 0 0 $ms-Persona-sizeSm;
-      height: $ms-Persona-sizeSm;
-      width: $ms-Persona-sizeSm;
-    }
-
-    .ms-Persona-placeholder {
-      font-size: 38px;
-      top: 5px;
-    }
-
-    .ms-Persona-initials {
-      font-size: $ms-font-size-m;
-      height: $ms-Persona-sizeSm;
-      line-height: $ms-Persona-sizeSm;
-    }
+  }
 
-    .ms-Persona-presence {
-      @include left(27px);
-    }
+  .presence {
+    @include left(27px);
+  }
 
-    .ms-Persona-primaryText {
-      font-size: $ms-font-size-m;
-    }
+  .primaryText {
+    font-size: $ms-font-size-m;
+  }
 
-    .ms-Persona-primaryText,
-    .ms-Persona-secondaryText {
-      padding-top: 1px;
-    }
+  .primaryText,
+  .secondaryText {
+    padding-top: 1px;
   }
+}
 
 
-  //== Modifier: Large Persona
-  //
-  .ms-Persona.ms-Persona--lg {
+//== Modifier: Large Persona
+//
+.root.rootIsLarge {
+  height: $ms-Persona-sizeLg;
+  line-height: $ms-Persona-sizeLg;
+  min-width: $ms-Persona-sizeLg;
+
+  .imageArea,
+  .image {
+    flex: 0 0 $ms-Persona-sizeLg;
     height: $ms-Persona-sizeLg;
-    line-height: $ms-Persona-sizeLg;
-    min-width: $ms-Persona-sizeLg;
-
-    .ms-Persona-imageArea,
-    .ms-Persona-image {
-      flex: 0 0 $ms-Persona-sizeLg;
-      height: $ms-Persona-sizeLg;
-      width: $ms-Persona-sizeLg;
-    }
+    width: $ms-Persona-sizeLg;
+  }
 
-    .ms-Persona-placeholder {
-      font-size: 67px;
-      top: 10px;
-    }
+  .placeholder {
+    font-size: 67px;
+    top: 10px;
+  }
 
-    .ms-Persona-initials {
-      font-size: $ms-font-size-xxl;
-      height: $ms-Persona-sizeLg;
-      line-height: 70px;
-    }
+  .initials {
+    font-size: $ms-font-size-xxl;
+    height: $ms-Persona-sizeLg;
+    line-height: 70px;
+  }
 
-    .ms-Persona-presence {
-      @include left(49px);
-      height: $ms-Persona-presenceSizeLg;
-      width: $ms-Persona-presenceSizeLg;
-      border-width: 3px;
-    }
+  .presence {
+    @include left(49px);
+    height: $ms-Persona-presenceSizeLg;
+    width: $ms-Persona-presenceSizeLg;
+    border-width: 3px;
+  }
 
-    .ms-Persona-presenceIcon {
-      line-height: $ms-Persona-presenceSizeLg;
-      font-size: $ms-font-size-m;
-    }
+  .presenceIcon {
+    line-height: $ms-Persona-presenceSizeLg;
+    font-size: $ms-font-size-m;
+  }
 
-    .ms-Persona-secondaryText {
-      padding-top: 3px;
-    }
+  .secondaryText {
+    padding-top: 3px;
+  }
 
-    .ms-Persona-tertiaryText {
-      padding-top: 5px;
-      display: block;
-    }
+  .tertiaryText {
+    padding-top: 5px;
+    display: block;
   }
+}
 
 
-  //== Modifier: Extra Large Persona
-  //
-  .ms-Persona.ms-Persona--xl {
+//== Modifier: Extra Large Persona
+//
+.root.rootIsExtraLarge {
+  height: $ms-Persona-sizeXl;
+  line-height: $ms-Persona-sizeXl;
+  min-width: $ms-Persona-sizeXl;
+
+  .imageArea,
+  .image {
+    flex: 0 0 $ms-Persona-sizeXl;
     height: $ms-Persona-sizeXl;
-    line-height: $ms-Persona-sizeXl;
-    min-width: $ms-Persona-sizeXl;
-
-    .ms-Persona-imageArea,
-    .ms-Persona-image {
-      flex: 0 0 $ms-Persona-sizeXl;
-      height: $ms-Persona-sizeXl;
-      width: $ms-Persona-sizeXl;
-    }
+    width: $ms-Persona-sizeXl;
+  }
 
-    .ms-Persona-placeholder {
-      font-size: 95px;
-      top: 12px;
-    }
+  .placeholder {
+    font-size: 95px;
+    top: 12px;
+  }
 
-    .ms-Persona-initials {
-      font-size: $ms-font-size-su;
-      height: $ms-Persona-sizeXl;
-      line-height: 96px;
-    }
+  .initials {
+    font-size: $ms-font-size-su;
+    height: $ms-Persona-sizeXl;
+    line-height: 96px;
+  }
 
-    .ms-Persona-presence {
-      height: $ms-Persona-presenceSizeXl;
-      width: $ms-Persona-presenceSizeXl;
-      @include left(71px);
-      border-width: 4px;
-    }
+  .presence {
+    height: $ms-Persona-presenceSizeXl;
+    width: $ms-Persona-presenceSizeXl;
+    @include left(71px);
+    border-width: 4px;
+  }
 
-    .ms-Persona-presenceIcon {
-      line-height: $ms-Persona-presenceSizeXl;
-      font-size: $ms-font-size-xl;
-      position: relative;
-      top: 1px;
-    }
+  .presenceIcon {
+    line-height: $ms-Persona-presenceSizeXl;
+    font-size: $ms-font-size-xl;
+    position: relative;
+    top: 1px;
+  }
 
-    .ms-Persona-primaryText {
-      font-size: $ms-font-size-xl;
-      font-weight: $ms-font-weight-semilight;
-      margin-top: 0;
-    }
+  .primaryText {
+    font-size: $ms-font-size-xl;
+    font-weight: $ms-font-weight-semilight;
+    margin-top: 0;
+  }
 
-    .ms-Persona-secondaryText {
-      padding-top: 2px;
-    }
+  .secondaryText {
+    padding-top: 2px;
+  }
 
-    .ms-Persona-tertiaryText,
-    .ms-Persona-optionalText {
-      padding-top: 5px;
-      display: block; // Show tertiary and optional text
-    }
+  .tertiaryText,
+  .optionalText {
+    padding-top: 5px;
+    display: block; // Show tertiary and optional text
   }
+}
 
 
-  //== Modifier: Persona with darker text
-  //
-  // Note: Typically applied when the component has a colored background.
-  .ms-Persona.ms-Persona--darkText {
-    .ms-Persona-primaryText {
-      color: $ms-color-neutralDark;
-    }
+//== Modifier: Persona with darker text
+//
+// Note: Typically applied when the component has a colored background.
+.root.rootIsDarkText {
+  .primaryText {
+    color: $ms-color-neutralDark;
+  }
 
-    .ms-Persona-secondaryText,
-    .ms-Persona-tertiaryText,
-    .ms-Persona-optionalText {
-      color: $ms-color-neutralPrimary;
-    }
+  .secondaryText,
+  .tertiaryText,
+  .optionalText {
+    color: $ms-color-neutralPrimary;
   }
+}
 
 
-  //== Modifier: Selectable Persona
-  //
-  .ms-Persona.ms-Persona--selectable {
-    cursor: pointer;
-    padding: 0 10px;
+//== Modifier: Selectable Persona
+//
+.root.rootIsSelectable {
+  cursor: pointer;
+  padding: 0 10px;
 
-    &:not(.ms-Persona--xl) {
-      &:hover,
-      &:focus {
-        background-color: $ms-color-themeLighter;
-        outline: 1px solid transparent;
-      }
+  &:not(.rootExtraLarge) {
+    &:hover,
+    &:focus {
+      background-color: $ms-color-themeLighter;
+      outline: 1px solid transparent;
     }
   }
+}
 
 
-  //== Presence indicator variants.
+//== Presence indicator variants.
 
-  //== Modifier: Persona with available presence
-  //
-  .ms-Persona.ms-Persona--available {
-    .ms-Persona-presence {
-      background-color: $ms-color-presence-available;
+//== Modifier: Persona with available presence
+//
+.root.rootIsAvailable {
+  .presence {
+    background-color: $ms-color-presence-available;
 
-      @media screen and (-ms-high-contrast: active) {
-        background-color: $ms-color-white;
-      }
+    @media screen and (-ms-high-contrast: active) {
+      background-color: $ms-color-white;
+    }
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        background-color: $ms-color-contrastWhiteDisabled;
-      }
+    @media screen and (-ms-high-contrast: black-on-white) {
+      background-color: $ms-color-contrastWhiteDisabled;
     }
   }
+}
 
 
-  //== Modifier: Persona with away presence
-  //
-  .ms-Persona.ms-Persona--away {
-    .ms-Persona-presence {
-      background-color: $ms-color-presence-away;
-
-      @media screen and (-ms-high-contrast: active) {
-        background-color: $ms-color-white;
-      }
+//== Modifier: Persona with away presence
+//
+.root.rootIsAway {
+  .presence {
+    background-color: $ms-color-presence-away;
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        background-color: $ms-color-black;
-      }
+    @media screen and (-ms-high-contrast: active) {
+      background-color: $ms-color-white;
     }
 
-    .ms-Persona-presenceIcon {
-      position: relative;
-      @include left(1px);
+    @media screen and (-ms-high-contrast: black-on-white) {
+      background-color: $ms-color-black;
     }
   }
 
+  .presenceIcon {
+    position: relative;
+    @include left(1px);
+  }
+}
 
-  //== Modifier: Persona with blocked presence
-  //
-  .ms-Persona.ms-Persona--blocked {
-    .ms-Persona-presence {
-      background-color: $ms-color-white;
 
-      &::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        @include left(0);
-        box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset;
-        border-radius: 50%;
-      }
+//== Modifier: Persona with blocked presence
+//
+.root.rootIsBlocked {
+  .presence {
+    background-color: $ms-color-white;
+
+    &::before {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      @include left(0);
+      box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset;
+      border-radius: 50%;
+    }
 
-      &::after {
-        content: '';
-        width: 100%;
-        height: 2px;
-        background-color: $ms-color-presence-busy-average;
-        transform: rotate(-45deg);
-        position: absolute;
-        top: 5px;
-        @include left(0);
-      }
+    &::after {
+      content: '';
+      width: 100%;
+      height: 2px;
+      background-color: $ms-color-presence-busy-average;
+      transform: rotate(-45deg);
+      position: absolute;
+      top: 5px;
+      @include left(0);
+    }
 
 
 
-      @media screen and (-ms-high-contrast: active) {
-        color: $ms-color-contrastBlackDisabled;
-        background-color: $ms-color-black;
+    @media screen and (-ms-high-contrast: active) {
+      color: $ms-color-contrastBlackDisabled;
+      background-color: $ms-color-black;
 
-        &::before {
-          box-shadow: 0 0 0 2px $ms-color-contrastBlackDisabled inset;
-        }
+      &::before {
+        box-shadow: 0 0 0 2px $ms-color-contrastBlackDisabled inset;
+      }
 
-        &::after {
-          background-color: $ms-color-contrastBlackDisabled;
-        }
+      &::after {
+        background-color: $ms-color-contrastBlackDisabled;
       }
+    }
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        color: $ms-color-contrastWhiteDisabled;
-        background-color: $ms-color-white;
+    @media screen and (-ms-high-contrast: black-on-white) {
+      color: $ms-color-contrastWhiteDisabled;
+      background-color: $ms-color-white;
 
-        &::before {
-          box-shadow: 0 0 0 2px $ms-color-contrastWhiteDisabled inset;
-        }
+      &::before {
+        box-shadow: 0 0 0 2px $ms-color-contrastWhiteDisabled inset;
+      }
 
-        &::after {
-          background-color: $ms-color-contrastWhiteDisabled;
-        }
+      &::after {
+        background-color: $ms-color-contrastWhiteDisabled;
       }
     }
+  }
 
-    &.ms-Persona--lg {
-      .ms-Persona-presence {
-        &::after {
-          top: 9px;
-        }
+  &.rootIsLarge {
+    .presence {
+      &::after {
+        top: 9px;
       }
     }
+  }
 
-    &.ms-Persona--xl {
-      .ms-Persona-presence {
-        &::after {
-          top: 13px;
-        }
+  &.rootIsExtraLarge {
+    .presence {
+      &::after {
+        top: 13px;
       }
     }
   }
+}
 
 
-  //== Modifier: Persona with busy presence
-  //
-  .ms-Persona.ms-Persona--busy {
-    .ms-Persona-presence {
-      background-color: $ms-color-presence-busy-average;
+//== Modifier: Persona with busy presence
+//
+.root.rootIsBusy {
+  .presence {
+    background-color: $ms-color-presence-busy-average;
 
-      @media screen and (-ms-high-contrast: active) {
-        background-color: $ms-color-contrastBlackDisabled;
-      }
+    @media screen and (-ms-high-contrast: active) {
+      background-color: $ms-color-contrastBlackDisabled;
+    }
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        background-color: $ms-color-contrastWhiteDisabled;
-      }
+    @media screen and (-ms-high-contrast: black-on-white) {
+      background-color: $ms-color-contrastWhiteDisabled;
     }
   }
+}
 
 
-  //== Modifier: Persona with do not disturb presence
-  //
-  .ms-Persona.ms-Persona--dnd {
-    .ms-Persona-presence {
-      background-color: $ms-color-presence-dnd-background;
-
-      @media screen and (-ms-high-contrast: active) {
-        color: $ms-color-black;
-        background-color: $ms-color-contrastBlackDisabled;
+//== Modifier: Persona with do not disturb presence
+//
+.root.rootIsDoNotDisturb {
+  .presence {
+    background-color: $ms-color-presence-dnd-background;
 
-        &::before {
-          background-color: $ms-color-contrastBlackDisabled;
-        }
+    @media screen and (-ms-high-contrast: active) {
+      color: $ms-color-black;
+      background-color: $ms-color-contrastBlackDisabled;
 
-        &::after {
-          background-color: $ms-color-contrastBlackDisabled;
-        }
+      &::before {
+        background-color: $ms-color-contrastBlackDisabled;
       }
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        background-color: $ms-color-contrastWhiteDisabled;
+      &::after {
+        background-color: $ms-color-contrastBlackDisabled;
       }
     }
+
+    @media screen and (-ms-high-contrast: black-on-white) {
+      background-color: $ms-color-contrastWhiteDisabled;
+    }
   }
+}
 
 
-  //== Modifier: Persona with offline presence
-  //
-  .ms-Persona.ms-Persona--offline {
-    .ms-Persona-presence {
-      background-color: $ms-color-presence-offline;
+//== Modifier: Persona with offline presence
+//
+.root.rootIsOffline {
+  .presence {
+    background-color: $ms-color-presence-offline;
 
-      @media screen and (-ms-high-contrast: active) {
-        background-color: $ms-color-contrastBlackDisabled;
-        box-shadow: 0 0 0 1px $ms-color-white inset;
-      }
+    @media screen and (-ms-high-contrast: active) {
+      background-color: $ms-color-contrastBlackDisabled;
+      box-shadow: 0 0 0 1px $ms-color-white inset;
+    }
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        background-color: $ms-color-white;
-        box-shadow: 0 0 0 1px $ms-color-black inset;
-      }
+    @media screen and (-ms-high-contrast: black-on-white) {
+      background-color: $ms-color-white;
+      box-shadow: 0 0 0 1px $ms-color-black inset;
     }
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
index f1aa2646d2410d..0741b9dc15f426 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
@@ -5,6 +5,7 @@ import { Persona } from './Persona';
 import { PersonaInitialsColor } from './Persona.Props';
 import { shallow } from 'enzyme';
 import * as chai from 'chai';
+import styles from './Persona.scss';
 
 const { expect } = chai;
 
@@ -16,31 +17,46 @@ describe('Persona', () => {
 
     it('renders with expected initialsColor if none was provided', () => {
       const wrapper = shallow(<Persona primaryText='Kat Larrson' />);
-      let result = wrapper.find('.ms-Persona-initials--red');
+      let result = wrapper.find('.' + styles.initialsIsRed);
       expect(result).to.have.length(1);
 
       const wrapper2 = shallow(<Persona primaryText='Annie Lindqvist' />);
-      result = wrapper2.find('.ms-Persona-initials--darkRed');
+      result = wrapper2.find('.' + styles.initialsIsDarkRed);
       expect(result).to.have.length(1);
     });
 
     it('uses provided initialsColor if one was specified', () => {
       const wrapper = shallow(<Persona primaryText='Kat Larrson' initialsColor={ PersonaInitialsColor.lightBlue } />);
-      let result = wrapper.find('.ms-Persona-initials--lightBlue');
+      let result = wrapper.find('.' + styles.initialsIsLightBlue);
       expect(result).to.have.length(1);
     });
 
     it('calculates an expected initials in LTR if one was not specified', () => {
       let wrapper = shallow(<Persona primaryText='Kat Larrson' />);
-      let result = wrapper.find('.ms-Persona-initials');
+      let result = wrapper.find('.' + styles.initials);
       expect(result).to.have.length(1);
       expect(result.text()).to.equal('KL');
+
+      wrapper = shallow(<Persona primaryText='David Zearing-Goff' />);
+      result = wrapper.find('.' + styles.initials);
+      expect(result).to.have.length(1);
+      expect(result.text()).to.equal('DZ');
+
+      wrapper = shallow(<Persona primaryText='4lex 4loo' />);
+      result = wrapper.find('.' + styles.initials);
+      expect(result).to.have.length(1);
+      expect(result.text()).to.equal('44');
+
+      wrapper = shallow(<Persona primaryText='David (The man) Goff' />);
+      result = wrapper.find('.' + styles.initials);
+      expect(result).to.have.length(1);
+      expect(result.text()).to.equal('D');
     });
 
     it('calculates an expected initials in RTL if one was not specified', () => {
       setRTL(true);
       const wrapper = shallow(<Persona primaryText='Kat Larrson' />);
-      let result = wrapper.find('.ms-Persona-initials');
+      let result = wrapper.find('.' + styles.initials);
       expect(result).to.have.length(1);
       expect(result.text()).to.equal('LK');
 
@@ -50,7 +66,7 @@ describe('Persona', () => {
     it('uses provided initial', () => {
       setRTL(true);
       const wrapper = shallow(<Persona primaryText='Kat Larrson' imageInitials='AT' />);
-      let result = wrapper.find('.ms-Persona-initials');
+      let result = wrapper.find('.' + styles.initials);
       expect(result).to.have.length(1);
       expect(result.text()).to.equal('AT');
 
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
index 1fc92b1cd21cda..40c30edf3d6067 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
@@ -19,7 +19,7 @@ import {
   PERSONA_PRESENCE,
   PERSONA_SIZE
 } from './PersonaConsts';
-import './Persona.scss';
+import styles from './Persona.scss';
 
 // The RGB color swatches
 const COLOR_SWATCHES_LOOKUP: PersonaInitialsColor[] = [
@@ -66,7 +66,6 @@ export class Persona extends React.Component<IPersonaProps, IPersonaState> {
       className,
       size,
       imageUrl,
-      imageInitials,
       initialsColor,
       presence,
       primaryText,
@@ -75,12 +74,10 @@ export class Persona extends React.Component<IPersonaProps, IPersonaState> {
       optionalText,
       hidePersonaDetails,
       imageShouldFadeIn,
+      onRenderInitials = this._onRenderInitials,
       imageShouldStartVisible
     } = this.props;
 
-    let isRTL = getRTL();
-
-    imageInitials = imageInitials || getInitials(primaryText, isRTL);
     initialsColor = initialsColor !== undefined && initialsColor !== null ? initialsColor : this._getColorFromName(primaryText);
 
     let presenceElement = null;
@@ -101,36 +98,47 @@ export class Persona extends React.Component<IPersonaProps, IPersonaState> {
           userPresence = '';
       }
       if (userPresence) {
-        let iconClass = `ms-Persona-presenceIcon ms-Icon ms-Icon--${userPresence}`;
+        let iconClass = css(`ms-Persona-presenceIcon ms-Icon ms-Icon--${userPresence}`, styles.presenceIcon);
         statusIcon = <i className={ iconClass }></i>;
       }
-      presenceElement = <div className='ms-Persona-presence'>{ statusIcon }</div>;
+      presenceElement = <div className={ css('ms-Persona-presence', styles.presence) }>{ statusIcon }</div>;
     }
 
     let divProps = getNativeProps(this.props, divProperties);
-    let personaDetails = <div className='ms-Persona-details'>
-      <div className='ms-Persona-primaryText'>{ primaryText }</div>
+    let personaDetails = <div className={ css('ms-Persona-details', styles.details) }>
+      <div className={ css('ms-Persona-primaryText', styles.primaryText) }>{ primaryText }</div>
       { secondaryText ? (
-        <div className='ms-Persona-secondaryText'>{ secondaryText }</div>
+        <div className={ css('ms-Persona-secondaryText', styles.secondaryText) }>{ secondaryText }</div>
       ) : (null) }
-      <div className='ms-Persona-tertiaryText'>{ tertiaryText }</div>
-      <div className='ms-Persona-optionalText'>{ optionalText }</div>
+      <div className={ css('ms-Persona-tertiaryText', styles.tertiaryText) }>{ tertiaryText }</div>
+      <div className={ css('ms-Persona-optionalText', styles.optionalText) }>{ optionalText }</div>
       { this.props.children }
     </div>;
 
     return (
       <div
         { ...divProps }
-        className={ css('ms-Persona', className, PERSONA_SIZE[size], PERSONA_PRESENCE[presence]) }
-        >
+        className={ css('ms-Persona', styles.root, className, PERSONA_SIZE[size], PERSONA_PRESENCE[presence]) }
+      >
         { size !== PersonaSize.tiny && (
-          <div className='ms-Persona-imageArea'>
+          <div className={ css('ms-Persona-imageArea', styles.imageArea) }>
             {
               !this.state.isImageLoaded &&
-              (<div className={ css('ms-Persona-initials', PERSONA_INITIALS_COLOR[initialsColor]) } aria-hidden='true'>{ imageInitials }</div>)
+              (
+                <div
+                  className={ css(
+                    'ms-Persona-initials',
+                    styles.initials,
+                    PERSONA_INITIALS_COLOR[initialsColor]
+                  ) }
+                  aria-hidden='true'
+                >
+                  { onRenderInitials(this.props, this._onRenderInitials) }
+                </div>
+              )
             }
             <Image
-              className='ms-Persona-image'
+              className={ css('ms-Persona-image', styles.image) }
               imageFit={ ImageFit.cover }
               src={ imageUrl }
               shouldFadeIn={ imageShouldFadeIn }
@@ -144,6 +152,22 @@ export class Persona extends React.Component<IPersonaProps, IPersonaState> {
     );
   }
 
+  @autobind
+  private _onRenderInitials(props: IPersonaProps): JSX.Element {
+    let {
+      imageInitials,
+      primaryText
+    } = props;
+
+    let isRTL = getRTL();
+
+    imageInitials = imageInitials || getInitials(primaryText, isRTL);
+
+    return (
+      <span>{ imageInitials }</span>
+    );
+  }
+
   private _getColorFromName(displayName: string): PersonaInitialsColor {
     let color = PersonaInitialsColor.blue;
     if (!displayName) {
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts
index af50b479ac8192..2db83099f801e7 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts
@@ -3,40 +3,41 @@ import {
   PersonaPresence,
   PersonaSize
 } from './Persona.Props';
+import styles from './Persona.scss';
 
 export const PERSONA_SIZE = {
-  [PersonaSize.tiny]: 'ms-Persona--tiny',
-  [PersonaSize.extraExtraSmall]: 'ms-Persona--xxs',
-  [PersonaSize.extraSmall]: 'ms-Persona--xs',
-  [PersonaSize.small]: 'ms-Persona--sm',
+  [PersonaSize.tiny]: 'ms-Persona--tiny ' + styles.rootIsTiny,
+  [PersonaSize.extraExtraSmall]: 'ms-Persona--xxs ' + styles.rootIsExtraExtraSmall,
+  [PersonaSize.extraSmall]: 'ms-Persona--xs ' + styles.rootIsExtraSmall,
+  [PersonaSize.small]: 'ms-Persona--sm ' + styles.rootIsSmall,
   [PersonaSize.regular]: '',
-  [PersonaSize.large]: 'ms-Persona--lg',
-  [PersonaSize.extraLarge]: 'ms-Persona--xl'
+  [PersonaSize.large]: 'ms-Persona--lg ' + styles.rootIsLarge,
+  [PersonaSize.extraLarge]: 'ms-Persona--xl ' + styles.rootIsExtraLarge
 };
 
 export const PERSONA_PRESENCE = {
-  [PersonaPresence.offline]: 'ms-Persona--offline',
-  [PersonaPresence.online]: 'ms-Persona--online',
-  [PersonaPresence.away]: 'ms-Persona--away',
-  [PersonaPresence.dnd]: 'ms-Persona--dnd',
-  [PersonaPresence.blocked]: 'ms-Persona--blocked',
-  [PersonaPresence.busy]: 'ms-Persona--busy'
+  [PersonaPresence.offline]: 'ms-Persona--offline ' + styles.rootIsOffline,
+  [PersonaPresence.online]: 'ms-Persona--online ',
+  [PersonaPresence.away]: 'ms-Persona--away ' + styles.rootIsAway,
+  [PersonaPresence.dnd]: 'ms-Persona--dnd ' + styles.rootIsDoNotDisturb,
+  [PersonaPresence.blocked]: 'ms-Persona--blocked ' + styles.rootIsBlocked,
+  [PersonaPresence.busy]: 'ms-Persona--busy ' + styles.rootIsBusy
 };
 
 export const PERSONA_INITIALS_COLOR = {
-  [PersonaInitialsColor.lightBlue]: 'ms-Persona-initials--lightBlue',
-  [PersonaInitialsColor.blue]: 'ms-Persona-initials--blue',
-  [PersonaInitialsColor.darkBlue]: 'ms-Persona-initials--darkBlue',
-  [PersonaInitialsColor.teal]: 'ms-Persona-initials--teal',
-  [PersonaInitialsColor.lightGreen]: 'ms-Persona-initials--lightGreen',
-  [PersonaInitialsColor.green]: 'ms-Persona-initials--green',
-  [PersonaInitialsColor.darkGreen]: 'ms-Persona-initials--darkGreen',
-  [PersonaInitialsColor.lightPink]: 'ms-Persona-initials--lightPink',
-  [PersonaInitialsColor.pink]: 'ms-Persona-initials--pink',
-  [PersonaInitialsColor.magenta]: 'ms-Persona-initials--magenta',
-  [PersonaInitialsColor.purple]: 'ms-Persona-initials--purple',
-  [PersonaInitialsColor.black]: 'ms-Persona-initials--black',
-  [PersonaInitialsColor.orange]: 'ms-Persona-initials--orange',
-  [PersonaInitialsColor.red]: 'ms-Persona-initials--red',
-  [PersonaInitialsColor.darkRed]: 'ms-Persona-initials--darkRed'
+  [PersonaInitialsColor.lightBlue]: 'ms-Persona-initials--lightBlue ' + styles.initialsIsLightBlue,
+  [PersonaInitialsColor.blue]: 'ms-Persona-initials--blue ' + styles.initialsIsBlue,
+  [PersonaInitialsColor.darkBlue]: 'ms-Persona-initials--darkBlue ' + styles.initialsIsDarkBlue,
+  [PersonaInitialsColor.teal]: 'ms-Persona-initials--teal ' + styles.initialsIsTeal,
+  [PersonaInitialsColor.lightGreen]: 'ms-Persona-initials--lightGreen ' + styles.initialsIsLightGreen,
+  [PersonaInitialsColor.green]: 'ms-Persona-initials--green ' + styles.initialsIsGreen,
+  [PersonaInitialsColor.darkGreen]: 'ms-Persona-initials--darkGreen ' + styles.initialsIsDarkGreen,
+  [PersonaInitialsColor.lightPink]: 'ms-Persona-initials--lightPink ' + styles.initialsIsLightPink,
+  [PersonaInitialsColor.pink]: 'ms-Persona-initials--pink ' + styles.initialsIsPink,
+  [PersonaInitialsColor.magenta]: 'ms-Persona-initials--magenta ' + styles.initialsIsMagenta,
+  [PersonaInitialsColor.purple]: 'ms-Persona-initials--purple ' + styles.initialsIsPurple,
+  [PersonaInitialsColor.black]: 'ms-Persona-initials--black ' + styles.initialsIsBlack,
+  [PersonaInitialsColor.orange]: 'ms-Persona-initials--orange ' + styles.initialsIsGreen,
+  [PersonaInitialsColor.red]: 'ms-Persona-initials--red ' + styles.initialsIsRed,
+  [PersonaInitialsColor.darkRed]: 'ms-Persona-initials--darkRed ' + styles.initialsIsDarkRed
 };
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss
index 30caabd72e3c24..cf98d4a6831e8d 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss
@@ -7,233 +7,223 @@
 // --------------------------------------------------
 // Pivot and tab styles
 
-:global {
-  .ms-Pivot {
-    @include ms-baseFont;
-    @include ms-u-normalize;
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-    position: relative;
-    color: $ms-color-themePrimary;
-    white-space: nowrap;
+.root {
+  @include ms-baseFont;
+  @include ms-u-normalize;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  position: relative;
+  color: $ms-color-themePrimary;
+  white-space: nowrap;
+}
+
+.links {
+  font-size: 0; // Bring inline-block children together
+  height: 40px;
+  list-style-type: none;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.link {
+  color: $ms-color-neutralPrimary;
+  display: inline-block;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  line-height: 40px;
+  @include margin-right(8px);
+  padding: 0 8px;
+  text-align: center;
+  position: relative;
+  background-color: transparent;
+  border: 0;
+
+  &:hover {
+    cursor: pointer;
   }
 
-  .ms-Pivot-links {
-    font-size: 0; // Bring inline-block children together
-    height: 40px;
-    list-style-type: none;
-    padding: 0;
-    white-space: nowrap;
+  &:focus {
+    outline: none;
   }
 
-  .ms-Pivot-link {
-    color: $ms-color-neutralPrimary;
-    display: inline-block;
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-    line-height: 40px;
-    @include margin-right(8px);
-    padding: 0 8px;
-    text-align: center;
-    position: relative;
+  // Underline, not yet visible
+  &::before {
     background-color: transparent;
-    border: 0;
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    // Underline, not yet visible
-    &::before {
-      background-color: transparent;
-      bottom: 0;
-      content: '';
-      height: 2px;
-      left: 8px;
-      position: absolute;
-      right: 8px;
-      transition: background-color $ms-duration2 $ms-ease2;
-    }
-
-    // Make room for the heavier text of the selected state
-    &::after {
-      color: transparent;
-      content: attr(title);
-      display: block;
-      font-weight: bold;
-      height: 1px;
-      overflow: hidden;
-      visibility: hidden;
-    }
+    bottom: 0;
+    content: '';
+    height: 2px;
+    left: 8px;
+    position: absolute;
+    right: 8px;
+    transition: background-color $ms-duration2 $ms-ease2;
+  }
 
-    .ms-Pivot-text,
-    .ms-Pivot-count {
-      display: inline-block;
+  // Make room for the heavier text of the selected state
+  &::after {
+    color: transparent;
+    content: attr(title);
+    display: block;
+    font-weight: bold;
+    height: 1px;
+    overflow: hidden;
+    visibility: hidden;
+  }
 
-      vertical-align: top;
-    }
+  .text,
+  .count {
+    display: inline-block;
 
-    // Spacing between icon and text/count
-    .ms-Pivot-icon + .ms-Pivot-text {
-      @include margin-left(4px);
-    }
+    vertical-align: top;
+  }
 
-    // Spacing between text and count
-    .ms-Pivot-count {
-      @include margin-left(4px);
-    }
+  // Spacing between icon and text/count
+  .icon + .text {
+    @include margin-left(4px);
+  }
 
-    //== State: Selected
-    &.is-selected {
-      font-weight: $ms-font-weight-semibold;
+  // Spacing between text and count
+  .count {
+    @include margin-left(4px);
+  }
 
-      // Show the underline
-      &::before {
-        background-color: $ms-color-themePrimary;
-      }
-    }
+  //== State: Selected
+  &.linkIsSelected {
+    font-weight: $ms-font-weight-semibold;
 
-    //== State: Disabled
-    &.is-disabled {
-      color: $ms-color-neutralTertiary;
+    // Show the underline
+    &::before {
+      background-color: $ms-color-themePrimary;
     }
   }
 
-  .ms-Fabric.is-focusVisible .ms-Pivot-link {
-    &:focus {
-      outline: 1px solid $ms-color-neutralSecondaryAlt;
-    }
+  //== State: Disabled
+  &.linkIsDisabled {
+    color: $ms-color-neutralTertiary;
   }
+}
 
-  // @TODO: Determine if any of the styles below this are necessary anymore.
+:global(.ms-Fabric.is-focusVisible) .link {
+  &:focus {
+    outline: 1px solid $ms-color-neutralSecondaryAlt;
+  }
+}
 
-  // Overflow (ellipsis)
-  .ms-Pivot-link.ms-Pivot-link--overflow {
-    color: $ms-color-neutralSecondary;
+// @TODO: Determine if any of the styles below this are necessary anymore.
 
-    &.is-selected {
-      color: $ms-color-themePrimary;
-    }
+// Overflow (ellipsis)
+.link.linkIsOverflow {
+  color: $ms-color-neutralSecondary;
 
-    &:hover:not(.is-selected),
-    &:focus:not(.is-selected) {
-      color: $ms-color-neutralDark;
-    }
-
-    &:active {
-      color: $ms-color-themePrimary;
-    }
+  &.linkIsSelected {
+    color: $ms-color-themePrimary;
   }
 
-  // Ellipsis icon
-  .ms-Pivot-ellipsis {
-    font-size: $ms-font-size-m-plus;
-    position: relative;
-    top: 0;
+  &:hover:not(.linkIsSelected),
+  &:focus:not(.linkIsSelected) {
+    color: $ms-color-neutralDark;
   }
 
-  // Pivot content, hidden by default
-  .ms-Pivot-content {
-    display: none;
-    margin-top: 20px;
+  &:active {
+    color: $ms-color-themePrimary;
   }
+}
 
+// Ellipsis icon
+.ellipsis {
+  font-size: $ms-font-size-m-plus;
+  position: relative;
+  top: 0;
+}
 
-  //== Modifier: Large Pivots
-  //
-  .ms-Pivot.ms-Pivot--large {
-    .ms-Pivot-link {
-      font-size: $ms-font-size-l;
-    }
+//== Modifier: Large Pivots
+//
+.root.rootIsLarge {
+  .link {
+    font-size: $ms-font-size-l;
+  }
 
-    .ms-Pivot-link.ms-Pivot-link--overflow {
-      &::after {
-        font-size: $ms-font-size-l;
-      }
+  .link.linkIsOverflow {
+    &::after {
+      font-size: $ms-font-size-l;
     }
   }
+}
 
-  //== Modifier: Tabs
-  //
-  .ms-Pivot.ms-Pivot--tabs {
-
-    .ms-Pivot-link {
-      @include focus-border();
-      @include margin-right(0px);
-      height: 40px;
-      line-height: 40px;
-      background-color: $ms-color-neutralLighter;
-      padding: 0 10px;
-      vertical-align: top;
+//== Modifier: Tabs
+//
+.root.rootIsTabs {
+  .link {
+    @include focus-border();
+    @include margin-right(0px);
+    height: 40px;
+    line-height: 40px;
+    background-color: $ms-color-neutralLighter;
+    padding: 0 10px;
+    vertical-align: top;
 
-      &:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
-      &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) {
-        color: $ms-color-black;
-      }
+    &:hover:not(.linkIsSelected):not(.linkIsOverflow),
+    &:focus:not(.linkIsSelected):not(.linkIsOverflow) {
+      color: $ms-color-black;
+    }
 
-      &:active {
-        color: $ms-color-white;
-        background-color: $ms-color-themePrimary;
-      }
+    &:active {
+      color: $ms-color-white;
+      background-color: $ms-color-themePrimary;
+    }
 
-      //== State: Selected
-      &.is-selected {
-        background-color: $ms-color-themePrimary;
-        color: $ms-color-white;
-        font-weight: $ms-font-weight-semilight;
+    //== State: Selected
+    &.linkIsSelected {
+      background-color: $ms-color-themePrimary;
+      color: $ms-color-white;
+      font-weight: $ms-font-weight-semilight;
 
-        &::before {
-          background-color: transparent;
-          transition: none;
-        }
+      &::before {
+        background-color: transparent;
+        transition: none;
       }
     }
+  }
 
-    .ms-Pivot-link.ms-Pivot-link--overflow {
-      &:hover:not(.is-selected),
-      &:focus:not(.is-selected) {
-        background-color: $ms-color-white;
-      }
+  .link.linkIsOverflow {
+    &:hover:not(.linkIsSelected),
+    &:focus:not(.linkIsSelected) {
+      background-color: $ms-color-white;
+    }
 
-      &:active {
-        background-color: $ms-color-themePrimary;
-      }
+    &:active {
+      background-color: $ms-color-themePrimary;
     }
   }
+}
 
-  .ms-Fabric.is-focusVisible .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus {
-    &:before {
-      height: auto;
-      background: transparent;
-      transition: none;
-    }
+:global(.ms-Fabric.is-focusVisible) .root.rootIsTabs .link:focus {
+  &:before {
+    height: auto;
+    background: transparent;
+    transition: none;
   }
+}
 
-  // @TODO: Confirm that this component is not responsive.
-  //
-  // @media (min-width: $ms-screen-lg-min) {
-  //   .ms-Pivot-link {
-  //     font-size: $ms-font-size-m;
-  //   }
-
-  //   .ms-Pivot-link.ms-Pivot-link--overflow {
-  //     &:after {
-  //       font-size: $ms-font-size-m;
-  //     }
-  //   }
-  // }
-
-  // All high contrast styling rules
-  @media screen and (-ms-high-contrast: active) {
-    .ms-Pivot.ms-Pivot--tabs {
-      .ms-Pivot-link {
-        &.is-selected {
-          font-weight: $ms-font-weight-semibold;
-        }
+// @TODO: Confirm that this component is not responsive.
+//
+// @media (min-width: $ms-screen-lg-min) {
+//   .link {
+//     font-size: $ms-font-size-m;
+//   }
+
+//   .link.linkIsOverflow {
+//     &:after {
+//       font-size: $ms-font-size-m;
+//     }
+//   }
+// }
+
+// All high contrast styling rules
+@media screen and (-ms-high-contrast: active) {
+  .root.rootIsTabs {
+    .link {
+      &.linkIsSelected {
+        font-weight: $ms-font-weight-semibold;
       }
     }
   }
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
index 93cb8a3bb29f63..17f63118a47924 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
@@ -5,13 +5,14 @@ import {
   getId,
   autobind
 } from '../../Utilities';
+import { CommandButton } from '../../Button';
 import { IPivotProps } from './Pivot.Props';
 import { IPivotItemProps } from './PivotItem.Props';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { PivotItem } from './PivotItem';
 import { PivotLinkFormat } from './Pivot.Props';
 import { PivotLinkSize } from './Pivot.Props';
-import './Pivot.scss';
+import styles from './Pivot.scss';
 
 /**
  *  Usage:
@@ -101,9 +102,9 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
   private _renderPivotLinks() {
     return (
       <FocusZone direction={ FocusZoneDirection.horizontal }>
-        <ul className={ css('ms-Pivot',
-          { 'ms-Pivot--large': this.props.linkSize === PivotLinkSize.large },
-          { 'ms-Pivot--tabs': this.props.linkFormat === PivotLinkFormat.tabs }) }
+        <ul className={ css('ms-Pivot', styles.root,
+          { ['ms-Pivot--large ' + styles.rootIsLarge]: this.props.linkSize === PivotLinkSize.large },
+          { ['ms-Pivot--tabs ' + styles.rootIsTabs]: this.props.linkFormat === PivotLinkFormat.tabs }) }
           role='tablist'>
           { this.state.links.map(this._renderLink) }
         </ul>
@@ -118,9 +119,9 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
   private _renderLink(link: IPivotItemProps) {
     const { itemKey } = link;
     const tabId = this._keyToTabIds[itemKey];
-
     const { onRenderItemLink } = link;
     let linkContent: JSX.Element;
+
     if (onRenderItemLink) {
       linkContent = onRenderItemLink(link, this._renderLinkContent);
     } else {
@@ -128,17 +129,23 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
     }
 
     return (
-      <button
+      <CommandButton
         id={ tabId }
         key={ itemKey }
-        className={ css('ms-Pivot-link', { 'is-selected': this.state.selectedKey === itemKey }) }
+        className={ css(
+          'ms-Pivot-link',
+          styles.link,
+          {
+            ['is-selected ' + styles.linkIsSelected]: this.state.selectedKey === itemKey
+          }
+        ) }
         onClick={ this._onLinkClick.bind(this, itemKey) }
         onKeyPress={ this._onKeyPress.bind(this, itemKey) }
         aria-label={ link.ariaLabel }
         role='tab'
         aria-selected={ this.state.selectedKey === itemKey }>
         { linkContent }
-      </button>
+      </CommandButton>
     );
   }
 
@@ -146,10 +153,14 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
   private _renderLinkContent(link: IPivotItemProps): JSX.Element {
     const { itemCount, itemIcon, linkText } = link;
 
-    return <span className='ms-Pivot-link-content'>
-      { itemIcon !== undefined && <span className='ms-Pivot-icon'><i className={ `ms-Icon ms-Icon--${itemIcon}` }></i></span> }
-      { linkText !== undefined && <span className='ms-Pivot-text'>{ link.linkText }</span> }
-      { itemCount !== undefined && <span className='ms-Pivot-count'>({ itemCount })</span> }
+    return <span className={ css('ms-Pivot-link-content') }>
+      { itemIcon !== undefined && (
+        <span className={ css('ms-Pivot-icon', styles.icon) }>
+          <i className={ `ms-Icon ms-Icon--${itemIcon}` }></i>
+        </span>
+      ) }
+      { linkText !== undefined && <span className={ css('ms-Pivot-text', styles.text) }> { link.linkText }</span> }
+      { itemCount !== undefined && <span className={ css('ms-Pivot-count', styles.count) } > ({ itemCount })</span> }
     </span>;
   }
 
@@ -162,7 +173,7 @@ export class Pivot extends React.Component<IPivotProps, IPivotState> {
     let { selectedTabId } = this.state;
 
     return (
-      <div className='pivotItem'
+      <div
         role='tabpanel'
         aria-labelledby={ selectedTabId }>
         { React.Children.toArray(this.props.children)[index] }
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss
index df014a15a66f2f..c1ce8b8b58ec5b 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss
@@ -12,61 +12,59 @@ $ProgressIndicatorMarginBetweenText: 8px;
 $ProgressIndicatorButtonsWidth: 218px;
 $ProgressIndicatorTextHeight: 18px;
 
-:global {
-  .ms-ProgressIndicator {
-    @include ms-baseFont;
-    font-weight: $ms-font-weight-regular;
-  }
-
-  .ms-ProgressIndicator-itemName {
-    color: $ms-color-neutralPrimary;
-    font-size: $ms-font-size-m;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    padding-top: $ProgressIndicatorMarginBetweenText / 2;
-    line-height: $ProgressIndicatorTextHeight + 2;
-  }
+.root {
+  @include ms-baseFont;
+  font-weight: $ms-font-weight-regular;
+}
 
-  .ms-ProgressIndicator-itemDescription {
-    color: $ms-color-neutralSecondaryAlt;
-    font-size: $ms-font-size-xs;
-    line-height: $ProgressIndicatorTextHeight;
-  }
+.itemName {
+  color: $ms-color-neutralPrimary;
+  font-size: $ms-font-size-m;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-top: $ProgressIndicatorMarginBetweenText / 2;
+  line-height: $ProgressIndicatorTextHeight + 2;
+}
 
-  .ms-ProgressIndicator-itemProgress {
-    position: relative;
-    height: 2px;
-    padding: $ProgressIndicatorMarginBetweenText 0;
-  }
+.itemDescription {
+  color: $ms-color-neutralSecondaryAlt;
+  font-size: $ms-font-size-xs;
+  line-height: $ProgressIndicatorTextHeight;
+}
 
-  .ms-ProgressIndicator-progressTrack {
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background-color: $ms-color-neutralLight;
-    outline: 1px solid transparent;
-  }
+.itemProgress {
+  position: relative;
+  height: 2px;
+  padding: $ProgressIndicatorMarginBetweenText 0;
+}
 
-  .ms-ProgressIndicator-progressBar {
-    background-color: $ms-color-themePrimary;
-    height: 2px;
-    position: absolute;
-    transition: width .3s ease;
-    width: 0;
+.progressTrack {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background-color: $ms-color-neutralLight;
+  outline: 1px solid transparent;
+}
 
-    @media screen and (-ms-high-contrast: active) {
-      background-color: $ms-color-white;
-    }
+.progressBar {
+  background-color: $ms-color-themePrimary;
+  height: 2px;
+  position: absolute;
+  transition: width .3s ease;
+  width: 0;
 
-    @media screen and (-ms-high-contrast: black-on-white) {
-      background-color: $ms-color-black;
-    }
+  @media screen and (-ms-high-contrast: active) {
+    background-color: $ms-color-white;
   }
 
-  .ms-ProgressIndicator-progressBar.smoothTransition {
-    transition-property: width;
-    transition-timing-function: linear;
-    transition-duration: 150ms;
+  @media screen and (-ms-high-contrast: black-on-white) {
+    background-color: $ms-color-black;
   }
 }
+
+.smoothTransition {
+  transition-property: width;
+  transition-timing-function: linear;
+  transition-duration: 150ms;
+}
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
index 5ee15eaa842210..30c6ce99dfe1eb 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
@@ -7,7 +7,7 @@ import {
   css
 } from '../../Utilities';
 import { IProgressIndicatorProps } from './ProgressIndicator.Props';
-import './ProgressIndicator.scss';
+import styles from './ProgressIndicator.scss';
 
 // if the percentComplete is near 0, don't animate it.
 // This prevents animations on reset to 0 scenarios
@@ -38,11 +38,11 @@ export class ProgressIndicator extends BaseComponent<IProgressIndicatorProps, {}
     percentComplete = Math.min(100, Math.max(0, percentComplete * 100));
 
     return (
-      <div className={ css('ms-ProgressIndicator', className) }>
-        <div className='ms-ProgressIndicator-itemName'>{ label }</div>
-        <div className='ms-ProgressIndicator-itemProgress'>
-          <div className='ms-ProgressIndicator-progressTrack'></div>
-          <div className={ css('ms-ProgressIndicator-progressBar', {
+      <div className={ css('ms-ProgressIndicator', styles.root, className) }>
+        <div className={ css('ms-ProgressIndicator-itemName', styles.itemName) }>{ label }</div>
+        <div className={ css('ms-ProgressIndicator-itemProgress', styles.itemProgress) }>
+          <div className={ css('ms-ProgressIndicator-progressTrack', styles.progressTrack) }></div>
+          <div className={ css('ms-ProgressIndicator-progressBar', styles.progressBar, {
             'smoothTransition': percentComplete > ZERO_THRESHOLD
           }) }
             style={ { width: percentComplete + '%' } }
@@ -52,7 +52,7 @@ export class ProgressIndicator extends BaseComponent<IProgressIndicatorProps, {}
             aria-valuenow={ percentComplete.toFixed().toString() }>
           </div>
         </div>
-        <div className='ms-ProgressIndicator-itemDescription'>{ description }</div>
+        <div className={ css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }>{ description }</div>
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.scss b/packages/office-ui-fabric-react/src/components/Rating/Rating.scss
index cadd32dcbd7e59..31e721f56d3462 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.scss
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.scss
@@ -8,79 +8,76 @@ $Rating-disabledColor: $ms-color-neutralTertiaryAlt;
 $Rating-smallIconSize: 16px;
 $Rating-largeIconSize: 20px;
 
-:global {
+// Hide input field
+.input {
+  position: absolute;
+  opacity: 0;
+  top: 0px;
+}
 
-  // Hide input field
-  .ms-Rating-input {
-    position: absolute;
-    opacity: 0;
-    top: 0px;
-  }
+.container {
+  position: relative;
+  display: inline-block;
 
-  .ms-Rating-container {
-    position: relative;
-    display: inline-block;
+  &:hover {
+    .star:not(.starIsDisabled) {
+      color: $Rating-selectedColor;
 
-    &:hover {
-      .ms-Rating-star:not(.is-disabled) {
-        color: $Rating-selectedColor;
+      &.star:hover {
+        color: $Rating-hoverColor;
 
-        &.ms-Rating-star:hover {
-          color: $Rating-hoverColor;
-
-          & ~ .ms-Rating-star {
-            // Set default color for any star after hovered one
-            color: $Rating-defaultColor;
-          }
+        & ~ .star {
+          // Set default color for any star after hovered one
+          color: $Rating-defaultColor;
         }
       }
     }
+  }
 
-    .ms-Rating-star {
-      display: inline-block;
+  .star {
+    display: inline-block;
 
-      text-align: center;
+    text-align: center;
 
-      color: $Rating-defaultColor;
+    color: $Rating-defaultColor;
 
-      &.is-selected {
-        color: $Rating-selectedColor;
-      }
+    &.starIsSelected {
+      color: $Rating-selectedColor;
+    }
 
-      &.is-disabled {
-        color: $Rating-disabledColor;
+    &.starIsDisabled {
+      color: $Rating-disabledColor;
 
-        .ms-Rating-label {
-          cursor: default;
-        }
+      .label {
+        cursor: default;
       }
+    }
 
-      .ms-Rating-label {
-        display: inline-block;
-        cursor: pointer;
+    .label {
+      display: inline-block;
+      cursor: pointer;
 
-        font-size: $Rating-smallIconSize;
-        padding: 12px 0px;
+      font-size: $Rating-smallIconSize;
+      padding: 12px 0px;
 
-        // Reserve space for focus styling
-        border: 1px solid transparent;
-      }
+      // Reserve space for focus styling
+      border: 1px solid transparent;
     }
+  }
 
-    :global(.ms-Rating--large) & {
-      .ms-Rating-label {
-        font-size: $Rating-largeIconSize;
-        padding: 6px 2px 9px 2px;
-      }
+  .rootIsLarge & {
+    .label {
+      font-size: $Rating-largeIconSize;
+      padding: 6px 2px 9px 2px;
     }
   }
+}
 
-  .ms-Rating-labelText {
-    @include ms-u-screenReaderOnly();
-  }
+.labelText {
+  @include ms-u-screenReaderOnly();
+}
 
-  // Highlight focused star
-  .is-focusVisible .is-inFocus .ms-Rating-label {
-    border: 1px solid $focusedBorderColor;
-  }
+// Highlight focused star
+:global(.ms-Fabric.is-focusVisible) .starIsInFocus .label {
+  border: 1px solid $focusedBorderColor;
 }
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
index dfd193a970711a..63d49b6b3e208b 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
@@ -5,7 +5,7 @@ import {
   getId
 } from '../../Utilities';
 import { IRatingProps, RatingSize } from './Rating.Props';
-import './Rating.scss';
+import styles from './Rating.scss';
 
 export interface IRatingState {
   rating: number;
@@ -48,9 +48,9 @@ export class Rating extends BaseComponent<IRatingProps, IRatingState> {
     }
 
     return <div className={ css('ms-Rating', this.props.className, {
-      'ms-Rating--large': this.props.size === RatingSize.Large
+      ['ms-Rating--large ' + styles.rootIsLarge]: this.props.size === RatingSize.Large
     }) } role='application'>
-      <div className={ 'ms-Rating-container' } role='radiogroup' aria-labelledby={ this.props.ariaLabelId }>
+      <div className={ css('ms-Rating-container', styles.container) } role='radiogroup' aria-labelledby={ this.props.ariaLabelId }>
         { stars }
       </div>
     </div>;
@@ -59,13 +59,13 @@ export class Rating extends BaseComponent<IRatingProps, IRatingState> {
   private _renderStar(rating: number): JSX.Element {
     const inputId = `${this._id}-${rating}`;
 
-    return <div className={ css('ms-Rating-star', {
-      'is-selected': rating <= this.state.rating,
-      'is-inFocus': rating === this.state.focusedRating,
-      'is-disabled': this.props.disabled
+    return <div className={ css('ms-Rating-star', styles.star, {
+      ['is-selected ' + styles.starIsSelected]: rating <= this.state.rating,
+      ['is-inFocus ' + styles.starIsInFocus]: rating === this.state.focusedRating,
+      ['is-disabled ' + styles.starIsDisabled]: this.props.disabled
     }) } key={ rating }>
       <input
-        className='ms-Rating-input'
+        className={ css('ms-Rating-input', styles.input) }
         type='radio'
         name={ this._id }
         id={ inputId }
@@ -76,8 +76,8 @@ export class Rating extends BaseComponent<IRatingProps, IRatingState> {
         onChange={ this._onChange.bind(this, rating) }
         onFocus={ this._onFocus.bind(this, rating) }
         onBlur={ this._onBlur.bind(this, rating) }
-        />
-      <label className='ms-Rating-label' htmlFor={ inputId }>
+      />
+      <label className={ css('ms-Rating-label', styles.label) } htmlFor={ inputId }>
         { this._getLabel(rating) }
         { this._getIcon() }
       </label>
@@ -110,7 +110,14 @@ export class Rating extends BaseComponent<IRatingProps, IRatingState> {
   private _getLabel(rating: number): JSX.Element {
     const text = this.props.ariaLabelIcon || 'Star';
 
-    return <span id={ `${this._labelId}-${rating}` } className='ms-Rating-labelText'>{ `${rating} ${text}` }</span>;
+    return (
+      <span
+        id={ `${this._labelId}-${rating}` }
+        className={ css('ms-Rating-labelText', styles.labelText) }
+      >
+        { `${rating} ${text}` }
+      </span>
+    );
   }
 
   private _getIcon(): JSX.Element {
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss
index 4acddfb5356e9f..78ee8780decabd 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss
@@ -11,121 +11,116 @@
 $SearchBox-field-padding-left: 10px;
 $SearchBox-height: 36px;
 
-:global {
-
-  .ms-SearchBox {
-    @include ms-font-m;
-    @include ms-u-normalize;
-    color: $ms-color-neutralPrimary;
-    position: relative;
-    margin-bottom: 10px;
-    border: 1px solid $ms-color-themeTertiary;
-
-    &.is-active {
-      border-color: $ms-color-themeDarker;
-
-      .ms-SearchBox-field {
-        @include padding-left(8px);
-      }
-
-      .ms-SearchBox-icon {
-        display: none;
-      }
-    }
+.root {
+  @include ms-font-m;
+  @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
+  position: relative;
+  margin-bottom: 10px;
+  border: 1px solid $ms-color-themeTertiary;
+}
 
-    // State: Disabled searchbox
-    &.is-disabled {
-      border-color: $ms-color-neutralLighter;
+.root:hover {
+  .field {
+    border-color: $ms-color-themeDarker;
+  }
 
-      .ms-SearchBox-icon {
-        color: $ms-color-neutralTertiaryAlt;
-      }
+  .label {
+    color: $ms-color-black;
 
-      .ms-SearchBox-field {
-        background-color: $ms-color-neutralLighter;
-        pointer-events: none;
-        cursor: default;
-      }
+    .icon {
+      color:$ms-color-themeDarker;
     }
+  }
+}
 
-    // State: Active searchbox
-    &.can-clear .ms-SearchBox-clearButton {
-      display: block;
-    }
+// State: Active searchbox
+.rootIsActive {
+  border-color: $ms-color-themeDarker;
 
-    &:hover {
+  .field {
+    @include padding-left(8px);
+  }
 
-      .ms-SearchBox-field {
-        border-color: $ms-color-themeDarker;
-      }
+  .icon {
+    display: none;
+  }
+}
 
-      .ms-SearchBox-label {
-        color: $ms-color-black;
+ // State: Disabled searchbox
+.rootIsDisabled {
+  border-color: $ms-color-neutralLighter;
 
-        .ms-SearchBox-icon {
-          color:$ms-color-themeDarker;
-        }
-      }
-    }
+  .icon {
+    color: $ms-color-neutralTertiaryAlt;
   }
 
-  input.ms-SearchBox-field {
-    position: relative;
-    @include ms-u-normalize;
-    border: none;
-    outline: transparent 1px solid;
-    font-weight: inherit;
-    font-family: inherit;
-    font-size: inherit;
-    color: $ms-color-black;
-    height: $SearchBox-height - 2;
-    @include padding(6px, 38px, 7px, 31px);
-    width: 100%;
-    background-color: transparent;
-    transition: padding-left $ms-duration1;
-
-    &:focus {
-      @include padding-right(32px);
-    }
+  .field {
+    background-color: $ms-color-neutralLighter;
+    pointer-events: none;
+    cursor: default;
+  }
+}
 
-    &::-ms-clear {
-      display: none;
-    }
+.rootCanClear .clearButton {
+  display: block;
+}
+
+.field {
+  position: relative;
+  @include ms-u-normalize;
+  border: none;
+  outline: transparent 1px solid;
+  font-weight: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  color: $ms-color-black;
+  height: $SearchBox-height - 2;
+  @include padding(6px, 38px, 7px, 31px);
+  width: 100%;
+  background-color: transparent;
+  transition: padding-left $ms-duration1;
+
+  &:focus {
+    @include padding-right(32px);
   }
 
-  .ms-SearchBox-clearButton {
+  &::-ms-clear {
     display: none;
-    border: none;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    @include right(0);
+  }
+}
 
-    width: 40px;
-    height: $SearchBox-height;
-    line-height: $SearchBox-height;
+.clearButton {
+  display: none;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  @include right(0);
 
-    vertical-align: top;
+  width: 40px;
+  height: $SearchBox-height;
+  line-height: $SearchBox-height;
 
-    color: $ms-color-themePrimary;
+  vertical-align: top;
 
-    text-align: center;
-    font-size: 16px;
-  }
+  color: $ms-color-themePrimary;
 
-  .ms-SearchBox-icon {
-    font-size: $ms-font-size-l;
-    color: $ms-color-neutralSecondaryAlt;
-    position: absolute;
-    @include left(8px);
-    top: 0;
-    height: $SearchBox-height;
-    line-height: $SearchBox-height;
-    vertical-align: top;
-    font-size: 16px;
-    width: 16px;
-    color: #0078d7;
-    @include margin-right(6px);
-  }
+  text-align: center;
+  font-size: 16px;
+}
 
+.icon {
+  font-size: $ms-font-size-l;
+  color: $ms-color-neutralSecondaryAlt;
+  position: absolute;
+  @include left(8px);
+  top: 0;
+  height: $SearchBox-height;
+  line-height: $SearchBox-height;
+  vertical-align: top;
+  font-size: 16px;
+  width: 16px;
+  color: #0078d7;
+  @include margin-right(6px);
 }
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
index 925d26cb39d15f..b94b09f09238cb 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
@@ -10,6 +10,7 @@ import {
   KeyCodes
 } from '../../Utilities';
 import './SearchBox.scss';
+import styles from './SearchBox.scss';
 
 export interface ISearchBoxState {
   value?: string;
@@ -51,31 +52,30 @@ export class SearchBox extends BaseComponent<ISearchBoxProps, ISearchBoxState> {
   public render() {
     let { labelText, className } = this.props;
     let { value, hasFocus, id } = this.state;
-
     return (
       <div
         ref={ this._resolveRef('_rootElement') }
-        className={ css('ms-SearchBox', className, {
-          'is-active': hasFocus,
-          'can-clear': value.length > 0
+        className={ css('ms-SearchBox', className, styles.root, {
+          ['is-active ' + styles.rootIsActive]: hasFocus,
+          ['can-clear ' + styles.rootCanClear]: value.length > 0,
         }) }
         { ...{ onFocusCapture: this._onFocusCapture } }
-        >
-        <i className='ms-SearchBox-icon ms-Icon ms-Icon--Search'></i>
+      >
+        <i className={ css('ms-SearchBox-icon', 'ms-Icon', 'ms-Icon--Search', styles.icon) }></i>
         <input
           id={ id }
-          className='ms-SearchBox-field'
+          className={ css('ms-SearchBox-field', styles.field) }
           placeholder={ labelText }
           onChange={ this._onInputChange }
           onKeyDown={ this._onKeyDown }
           value={ value }
           ref={ this._resolveRef('_inputElement') }
-          />
+        />
         <div
-          className='ms-SearchBox-clearButton'
+          className={ css('ms-SearchBox-clearButton', styles.clearButton) }
           onClick={ this._onClearClick }
-          >
-          <i className='ms-Icon ms-Icon--Clear' />
+        >
+          <i className={ css('ms-Icon', 'ms-Icon--Clear') } />
         </div>
       </div>
     );
diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.scss b/packages/office-ui-fabric-react/src/components/Slider/Slider.scss
index 56bc63acf6484f..ad9967420580f6 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/Slider.scss
+++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.scss
@@ -1,122 +1,121 @@
 @import '../../common/common';
 
-:global {
-
-  .ms-Slider {
-
-    > .ms-Label {
-      padding: 0;
-    }
-
-    user-select: none;
-    margin-bottom: 8px;
-  }
+.root {
+  user-select: none;
+  margin-bottom: 8px;
+}
 
-  .ms-Slider-line {
-    position: relative;
-    width: 100%;
-  }
+.titleLabel {
+  padding: 0;
+}
 
-  .ms-Slider-line span {
-    height: 4px;
-    @include float(left);
-    border-radius: 4px;
-  }
+.line {
+  position: relative;
+  width: 100%;
+}
 
-  .ms-Slider-active {
-    background: $ms-color-neutralSecondary;
-  }
+.line span {
+  height: 4px;
+  @include float(left);
+  border-radius: 4px;
+}
 
-  .ms-Slider-inactive {
-    background: $ms-color-neutralTertiaryAlt;
-  }
+.activeSection {
+  background: $ms-color-neutralSecondary;
+}
 
-  .ms-Slider-showTransitions {
-    .ms-Slider-thumb {
-      transition: left $ms-duration3 $ms-ease1;
-    }
+.inactiveSection {
+  background: $ms-color-neutralTertiaryAlt;
+}
 
-    .ms-Slider-active,
-    .ms-Slider-inactive {
-      transition: width $ms-duration3 $ms-ease1;
-    }
-  }
-  .ms-Slider-slideBox {
-    background: transparent;
-    border: none;
-    padding: 0;
-    margin: 0;
+.showTransitions {
+  .thumb {
+    transition: left $ms-duration3 $ms-ease1;
   }
 
-  .ms-Slider-slideBox .ms-Slider-thumb {
-    border: 2px solid $ms-color-neutralSecondary;
-    box-sizing: border-box;
-    background: $ms-color-white;
-    display: block;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    top: -6px;
-    border-radius: 10px;
-    @include transform-translateX(-50%);
+  .activeSection,
+  .inactiveSection {
+    transition: width $ms-duration3 $ms-ease1;
   }
+}
+.slideBox {
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
 
-  .ms-Slider-container {
-    display: flex;
-
-    .ms-Slider-slideBox {
-      flex-grow: 1;
-      height: 28px;
-      line-height: 28px;
-      @include focus-border();
-      padding: 0 8px; // Make room for thumb at ends of line
-    }
+.slideBox .thumb {
+  border: 2px solid $ms-color-neutralSecondary;
+  box-sizing: border-box;
+  background: $ms-color-white;
+  display: block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: -6px;
+  border-radius: 10px;
+  @include transform-translateX(-50%);
+}
 
-    .ms-Label {
-      flex-shrink: 1;
-      width: 30px;
-      @include margin-left(8px);
-    }
-  }
+.container {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
 
-  .ms-Slider-enabled {
 
-    .ms-Slider-slideBox:hover,
-    .ms-Slider-slideBox:active {
+.slideBox {
+  @include focus-border();
+  flex-grow: 1;
+  height: 28px;
+  line-height: 28px;
+  padding: 0 8px; // Make room for thumb at ends of line
+}
 
-      .ms-Slider-thumb {
-        border: 2px solid $ms-color-themePrimary;
-      }
+.valueLabel {
+  flex-shrink: 1;
+  width: 30px;
+  margin: 0 8px;
+  line-height: 1;
+}
 
-      .ms-Slider-active {
-        background-color: $ms-color-themePrimary;
-      }
+.rootIsEnabled {
 
-      .ms-Slider-inactive {
-        background-color: $ms-color-themeLight;
-      }
+  .slideBox:hover,
+  .slideBox:active {
 
+    .thumb {
+      border: 2px solid $ms-color-themePrimary;
+    }
+    .activeSection {
+      background-color: $ms-color-themePrimary;
     }
 
-    .ms-Slider-slideBox:active {
-      .ms-Slider-thumb {
-        border: 2px solid $ms-color-themeDarkAlt;
-      }
-      .ms-Slider-active {
-        background-color: $ms-color-themeDarkAlt;
-      }
+    .inactiveSection {
+      background-color: $ms-color-themeLight;
     }
+
   }
 
-  .ms-Slider-disabled {
-    .ms-Slider-thumb {
-      border-color: $ms-color-neutralTertiaryAlt;
-    }
-    .ms-Slider-active {
-      background: $ms-color-neutralTertiaryAlt;
+  .slideBox:active {
+    .thumb {
+      border: 2px solid $ms-color-themeDarkAlt;
     }
-    .ms-Slider-inactive {
-      background: $ms-color-neutralLight;
+    .activeSection {
+      background-color: $ms-color-themeDarkAlt;
     }
   }
 }
+
+.rootIsDisabled {
+  .thumb {
+    border-color: $ms-color-neutralTertiaryAlt;
+  }
+  .activeSection {
+    background: $ms-color-neutralTertiaryAlt;
+  }
+  .inactiveSection {
+    background: $ms-color-neutralLight;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
index 03ee52c1b2fe95..cb6040a1c2504b 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
@@ -8,9 +8,9 @@ import {
   getRTL,
   getRTLSafeKeyCode
 } from '../../Utilities';
-import './Slider.scss';
 import { ISliderProps, ISlider } from './Slider.Props';
 import { Label } from '../../Label';
+import styles from './Slider.scss';
 
 export interface ISliderState {
   value?: number;
@@ -89,17 +89,17 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
 
     return (
       <div
-        className={ css('ms-Slider', className, {
-          'ms-Slider-enabled': !disabled,
-          'ms-Slider-disabled': disabled
+        className={ css('ms-Slider', styles.root, className, {
+          ['ms-Slider-enabled ' + styles.rootIsEnabled]: !disabled,
+          ['ms-Slider-disabled ' + styles.rootIsDisabled]: disabled
         }) }
         ref='root'>
         { label && (
-          <Label { ...ariaLabel ? {} : { 'htmlFor': this._id } }>
+          <Label className={ styles.titleLabel } { ...ariaLabel ? {} : { 'htmlFor': this._id } }>
             { label }
           </Label>
         ) }
-        <div className='ms-Slider-container'>
+        <div className={ css('ms-Slider-container', styles.container) }>
           <button
             aria-valuenow={ value }
             aria-valuemin={ min }
@@ -108,32 +108,32 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
             { ...onTouchStartProp }
             { ...onKeyDownProp }
             { ...buttonProps }
-            className={ css('ms-Slider-slideBox', buttonProps.className, {
+            className={ css('ms-Slider-slideBox', styles.slideBox, buttonProps.className, {
               'ms-Slider-showValue': showValue,
-              'ms-Slider-showTransitions': (renderedValue === value)
+              ['ms-Slider-showTransitions ' + styles.showTransitions]: (renderedValue === value)
             }) }
             id={ this._id }
             disabled={ disabled }
             type='button'
             role='slider'
-            >
+          >
             <div
               ref='sliderLine'
-              className='ms-Slider-line'
-              >
+              className={ css('ms-Slider-line', styles.line) }
+            >
               <span
                 ref='thumb'
-                className='ms-Slider-thumb'
+                className={ css('ms-Slider-thumb', styles.thumb) }
                 { ...ariaLabel ? { 'aria-label': ariaLabel } : {} }
                 style={ getRTL() ?
                   { 'right': thumbOffsetPercent + '%' } :
                   { 'left': thumbOffsetPercent + '%' } }
-                />
-              <span className='ms-Slider-active' style={ { 'width': thumbOffsetPercent + '%' } }></span>
-              <span className='ms-Slider-inactive' style={ { 'width': (100 - thumbOffsetPercent) + '%' } }></span>
+              />
+              <span className={ css('ms-Slider-active', styles.activeSection) } style={ { 'width': thumbOffsetPercent + '%' } }></span>
+              <span className={ css('ms-Slider-inactive', styles.inactiveSection) } style={ { 'width': (100 - thumbOffsetPercent) + '%' } }></span>
             </div>
           </button>
-          { showValue && <label className='ms-Label ms-Slider-value'>{ value }</label> }
+          { showValue && <Label className={ css('ms-Slider-value', styles.valueLabel) }>{ value }</Label> }
         </div>
       </div>
     ) as React.ReactElement<{}>;
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss
index 1acfd86764b963..adacbd5ef7ee48 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss
+++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss
@@ -10,58 +10,55 @@
 $spin-duration: 1.3s;
 $borderSize: 1.5px;
 
-:global {
+@keyframes spinAnimation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
-  @keyframes :global(ms-Spinner-spin) {
-    0% {
-      transform: rotate(0deg);
+.root {
+  > .circle {
+    margin: auto;
+    box-sizing: border-box;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    border: 1.5px solid $ms-color-themeLight;
+    border-top-color: $ms-color-themePrimary;
+    animation: spinAnimation $spin-duration infinite cubic-bezier(.53,.21,.29,.67);
+    &.circleIsXSmall {
+      width: 12px;
+      height: 12px;
     }
-    100% {
-      transform: rotate(360deg);
+    &.circleIsSmall {
+      width: 16px;
+      height: 16px;
     }
-  }
-
-  .ms-Spinner {
-    > .ms-Spinner-circle {
-      margin: auto;
-      box-sizing: border-box;
-      border-radius: 50%;
-      width: 100%;
-      height: 100%;
-      border: 1.5px solid $ms-color-themeLight;
-      border-top-color: $ms-color-themePrimary;
-      animation: ms-Spinner-spin $spin-duration infinite cubic-bezier(.53,.21,.29,.67);
-      &.ms-Spinner--xSmall {
-        width: 12px;
-        height: 12px;
-      }
-      &.ms-Spinner--small {
-        width: 16px;
-        height: 16px;
-      }
-      //= Note: ms-Spinner--normal is deprecated and will be removed at >= 2.0.0
-      &.ms-Spinner--normal,
-      &.ms-Spinner--medium {
-        width: 20px;
-        height: 20px;
-      }
-      &.ms-Spinner--large {
-        width: 28px;
-        height: 28px;
-      }
+    &.circleIsTypeMedium,
+    &.circleIsMedium {
+      width: 20px;
+      height: 20px;
     }
-    > .ms-Spinner-label {
-        color: $ms-color-themePrimary;
-        margin-top: 10px;
-        text-align: center;
+    &.circleIsTypeLarge,
+    &.circleIsLarge {
+      width: 28px;
+      height: 28px;
     }
   }
+  > .label {
+      color: $ms-color-themePrimary;
+      margin-top: 10px;
+      text-align: center;
+  }
+}
 
-  @media screen and (-ms-high-contrast: active) {
-    .ms-Spinner {
-      > .ms-Spinner-circle {
-          border-top-style: none;
-      }
+@media screen and (-ms-high-contrast: active) {
+  .root {
+    > .circle {
+        border-top-style: none;
     }
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
index 35ed16dd5a4d56..9115023febcac2 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react';
 import { css } from '../../Utilities';
-import {
-  ISpinnerProps,
-  SpinnerType, // Deprecated and will be removed at >= 2.0.0. Use SpinnerSize instead.
-  SpinnerSize
-} from './Spinner.Props';
-import './Spinner.scss';
+import { ISpinnerProps, SpinnerType, SpinnerSize } from './Spinner.Props';
+import styles from './Spinner.scss';
 
 export class Spinner extends React.Component<ISpinnerProps, any> {
   public static defaultProps: ISpinnerProps = {
@@ -16,18 +12,20 @@ export class Spinner extends React.Component<ISpinnerProps, any> {
     let { type, size, label, className } = this.props; // TODO remove deprecated type property at >= 2.0.0
 
     return (
-      <div className={ css('ms-Spinner', className) }>
-        <div className={ css('ms-Spinner-circle',
-          { 'ms-Spinner--xSmall': size === SpinnerSize.xSmall },
-          { 'ms-Spinner--small': size === SpinnerSize.small },
-          { 'ms-Spinner--medium': size === SpinnerSize.medium },
-          { 'ms-Spinner--large': size === SpinnerSize.large },
-          { 'ms-Spinner--normal': type === SpinnerType.normal }, // TODO remove deprecated value at >= 2.0.0
-          { 'ms-Spinner--large': type === SpinnerType.large }) // TODO remove deprecated value at >= 2.0.0
+      <div className={ css('ms-Spinner', styles.root, className) }>
+        <div className={ css('ms-Spinner-circle', styles.circle,
+          {
+            ['ms-Spinner--xSmall ' + styles.circleIsXSmall]: size === SpinnerSize.xSmall,
+            ['ms-Spinner--small ' + styles.circleIsSmall]: size === SpinnerSize.small,
+            ['ms-Spinner--medium ' + styles.circleIsMedium]: size === SpinnerSize.medium,
+            ['ms-Spinner--large ' + styles.circleIsLarge]: size === SpinnerSize.large,
+            ['ms-Spinner--normal ' + styles.circleIsTypeMedium]: type === SpinnerType.normal, // TODO remove deprecated value at >= 2.0.0
+            ['ms-Spinner--large ' + styles.circleIsTypeLarge]: type === SpinnerType.large // TODO remove deprecated value at >= 2.0.0
+          })
         }>
         </div>
         { label && (
-          <div className='ms-Spinner-label'>{ label }</div>
+          <div className={ css('ms-Spinner-label', styles.label) }>{ label }</div>
         ) }
       </div >
     );
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
index 07b42ed35986e2..60c86dfd5c0844 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
@@ -7,121 +7,117 @@
 // --------------------------------------------------
 // Teaching Bubble styles
 
-:global {
+.root {
+  display: block;
+  max-width: 364px;
+}
 
-  .ms-TeachingBubble {
-    display: block;
-    max-width: 364px;
-  }
+.bodyContent {
+  padding: 20px;
+}
 
-  .ms-TeachingBubble-bodycontent {
-    padding: 20px;
+.headerIsLarge:not(:last-child) {
+  margin-bottom: 14px;
+}
+
+.headline {
+  margin: 0;
+  color: $ms-color-white;
+
+  .headerIsLarge & {
+    @include ms-font-xxl;
+    font-weight: $ms-font-weight-light;
   }
 
-  .ms-TeachingBubble-header--large:not(:last-child) {
-    margin-bottom: 14px;
+  .headerIsSmall & {
+    @include ms-font-m;
+    @include margin-right(10px);
+    font-weight: $ms-font-weight-semibold;
   }
+}
 
-  .ms-TeachingBubble-headline {
-    margin: 0;
-    color: $ms-color-white;
+.body:not(:last-child) {
+  margin-bottom: 20px;
+}
 
-    :global(.ms-TeachingBubble-header--large) & {
-      @include ms-font-xxl;
-      font-weight: $ms-font-weight-light;
-    }
-    :global(.ms-TeachingBubble-header--small) & {
-      @include ms-font-m;
-      @include margin-right(10px);
-      font-weight: $ms-font-weight-semibold;
-    }
-  }
+.subText {
+  margin: 0;
+  font-size: $ms-font-size-m;
+  color: $ms-color-white;
+  font-weight: $ms-font-weight-semilight;
+}
 
-  .ms-TeachingBubble-body:not(:last-child) {
-    margin-bottom: 20px;
+.root .closeButton {
+  position: absolute;
+  @include right(0);
+  top: 0;
+  color: $ms-color-white;
+  font-size: $ms-icon-size-s;
+}
+
+.footer {
+  :global(.ms-Button):not(:first-child) {
+    @include margin-left(20px);
   }
+}
 
-  .ms-TeachingBubble-subText {
-    margin: 0;
-    font-size: $ms-font-size-m;
-    color: $ms-color-white;
-    font-weight: $ms-font-weight-semilight;
+// Callout Overrides
+.root {
+  :global(.ms-Callout-main),
+  :global(.ms-Callout-beak),
+  :global(.ms-Callout-smallbeak) {
+    background: $ms-color-themePrimary;
   }
+}
 
-  .ms-Button.ms-TeachingBubble-closebutton {
-    position: absolute;
-    @include right(0);
-    top: 0;
+//Primary button style override
+.root .primaryButton {
+  background-color: $ms-color-white;
+  border-color: $ms-color-white;
 
-    &.ms-Button--icon .ms-Icon {
-      color: $ms-color-white;
-      font-size: $ms-icon-size-s;
-    }
+  :global(.ms-Button-label) {
+    @include ms-font-m;
+    color: $ms-color-themePrimary;
   }
 
-  .ms-TeachingBubble-footer {
-    .ms-Button:not(:first-child) {
-      @include margin-left(20px);
-    }
+  &:hover {
+    background-color: $ms-color-themeLighter;
+    border-color: $ms-color-themeLighter;
   }
 
-  // Callout Overrides
-  .ms-TeachingBubble {
-    .ms-Callout-main, .ms-Callout-beak, .ms-Callout-smallbeak {
-      background: $ms-color-themePrimary;
-    }
+  &:focus {
+    background-color:  $ms-color-themeLighter;
+    border-color: $ms-color-white;
   }
 
-  //Primary button style override
-  .ms-Button.ms-TeachingBubble-primaryButton {
+  &:active {
     background-color: $ms-color-white;
     border-color: $ms-color-white;
+  }
+}
+
+//Secondary button style override
+.root .secondaryButton {
+  background-color: $ms-color-themePrimary;
+  border-color: $ms-color-white;
 
-    .ms-Button-label {
-      @include ms-font-m;
-      color: $ms-color-themePrimary;
-    }
-
-    &:hover {
-      background-color: $ms-color-themeLighter;
-      border-color: $ms-color-themeLighter;
-    }
-
-    &:focus {
-      background-color:  $ms-color-themeLighter;
-      border-color: $ms-color-white;
-    }
-
-    &:active {
-      background-color: $ms-color-white;
-      border-color: $ms-color-white;
-    }
+  :global(.ms-Button-label) {
+    @include ms-font-m;
+    color: $ms-color-white;
   }
 
-  //Secondary button style override
-  .ms-Button.ms-TeachingBubble-secondaryButton {
-    background-color: $ms-color-themePrimary;
+  &:hover {
+    background-color: $ms-color-themeDarkAlt;
     border-color: $ms-color-white;
+  }
 
-    .ms-Button-label {
-      @include ms-font-m;
-      color: $ms-color-white;
-    }
-
-    &:hover {
-      background-color: $ms-color-themeDarkAlt;
-      border-color: $ms-color-white;
-    }
-
-    &:focus {
-      background-color: $ms-color-themeDarkAlt;
-      border-color: $ms-color-white;
-    }
-
-    &:active {
-      background-color: $ms-color-themePrimary;
-      border-color: $ms-color-white;
-    }
+  &:focus {
+    background-color: $ms-color-themeDarkAlt;
+    border-color: $ms-color-white;
   }
 
+  &:active {
+    background-color: $ms-color-themePrimary;
+    border-color: $ms-color-white;
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
index 56ae8565535cee..7985e7b236b5c1 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -1,12 +1,12 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-import { BaseComponent } from '../../Utilities';
+import { BaseComponent, css } from '../../Utilities';
 import { TeachingBubbleContent } from './TeachingBubbleContent';
 import { ITeachingBubbleProps } from './TeachingBubble.Props';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import './TeachingBubble.scss';
+import styles from './TeachingBubble.scss';
 
 export interface ITeachingBubbleState {
   isTeachingBubbleVisible?: boolean;
@@ -38,11 +38,11 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
 
     return (
       <Callout
-        className='ms-TeachingBubble'
+        className={ css('ms-TeachingBubble', styles.root) }
         ref={ this._resolveRef('_callout') }
         targetElement={ targetElement }
         {...calloutProps}
-        >
+      >
         <TeachingBubbleContent { ...this.props } />
       </Callout>
     );
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
index 449e69e83501ae..9a4d7252d26ee8 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
@@ -10,7 +10,7 @@ import { ITeachingBubbleProps } from './TeachingBubble.Props';
 import { ITeachingBubbleState } from './TeachingBubble';
 import { Button, ButtonType } from '../../Button';
 import { Image, ImageFit } from '../../Image';
-import './TeachingBubble.scss';
+import styles from './TeachingBubble.scss';
 
 export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, ITeachingBubbleState> {
 
@@ -47,7 +47,7 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
 
     if (illustrationImage && illustrationImage.src) {
       imageContent = (
-        <div className='ms-TeachingBubble-header'>
+        <div className={ 'ms-TeachingBubble-header' }>
           <Image { ...illustrationImage as any } />
         </div>
       );
@@ -57,9 +57,11 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
       headerContent = (
         <div className={ css(
           'ms-TeachingBubble-header',
-          hasCondensedHeadline ? 'ms-TeachingBubble-header--small' : 'ms-TeachingBubble-header--large'
+          hasCondensedHeadline ?
+            'ms-TeachingBubble-header--small ' + styles.headerIsSmall :
+            'ms-TeachingBubble-header--large ' + styles.headerIsLarge
         ) }>
-          <p className='ms-TeachingBubble-headline' >
+          <p className={ css('ms-TeachingBubble-headline', styles.headline) } >
             { headline }
           </p>
         </div>
@@ -68,8 +70,8 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
 
     if (this.props.children) {
       bodyContent = (
-        <div className='ms-TeachingBubble-body'>
-          <p className='ms-TeachingBubble-subText'>
+        <div className={ css('ms-TeachingBubble-body', styles.body) }>
+          <p className={ css('ms-TeachingBubble-subText', styles.subText) }>
             { this.props.children }
           </p>
         </div>
@@ -78,9 +80,19 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
 
     if (primaryButtonProps || secondaryButtonProps) {
       footerContent = (
-        <div className='ms-TeachingBubble-footer'>
-          { primaryButtonProps ? <Button className='ms-TeachingBubble-primaryButton' { ...primaryButtonProps } /> : null }
-          { secondaryButtonProps ? <Button className='ms-TeachingBubble-secondaryButton' { ...secondaryButtonProps } /> : null }
+        <div className={ css('ms-TeachingBubble-footer', styles.footer) }>
+          { primaryButtonProps && (
+            <Button
+              { ...primaryButtonProps }
+              className={ css('ms-TeachingBubble-primaryButton', styles.primaryButton, primaryButtonProps.className) }
+            />
+          ) }
+          { secondaryButtonProps && (
+            <Button
+              { ...secondaryButtonProps }
+              className={ css('ms-TeachingBubble-secondaryButton', styles.secondaryButton, secondaryButtonProps.className) }
+            />
+          ) }
         </div>
       );
     }
@@ -88,21 +100,21 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
     if (hasCloseIcon) {
       closeButton = (
         <Button
-          className='ms-TeachingBubble-closebutton'
+          className={ css('ms-TeachingBubble-closebutton', styles.closeButton) }
           buttonType={ ButtonType.icon }
           icon='Cancel'
           title={ closeButtonAriaLabel }
           ariaLabel={ closeButtonAriaLabel }
           onClick={ onDismiss }
-          />
+        />
       );
     }
 
     return (
-      <div className='ms-TeachingBubble-content'>
+      <div className={ css('ms-TeachingBubble-content') }>
         { imageContent }
         { closeButton }
-        <div className='ms-TeachingBubble-bodycontent'>
+        <div className={ css('ms-TeachingBubble-bodycontent', styles.bodyContent) }>
           { headerContent }
           { bodyContent }
           { footerContent }
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss
index ab536a5974483a..9845c9a496fb80 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss
@@ -8,241 +8,241 @@
 // Single line (input) and multiline (textarea) form field styles
 @import '../Label/LabelMixins.scss';
 
-:global {
-  .ms-TextField {
-    @include ms-baseFont;
-    @include ms-u-normalize;
-    color: $ms-color-neutralPrimary;
+.root {
+  @include ms-baseFont;
+  @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  margin-bottom: 8px;
+
+  :global(.ms-Label) {
     font-size: $ms-font-size-m;
     font-weight: $ms-font-weight-regular;
-    margin-bottom: 8px;
+  }
+}
 
-    .ms-Label {
-      font-size: $ms-font-size-m;
-      font-weight: $ms-font-weight-regular;
-    }
+//= State: A disabled textfield
+.root.rootIsDisabled {
+  :global(.field) {
+    background-color: $ms-color-neutralLighter;
+    border-color: $ms-color-neutralLighter;
+    pointer-events: none;
+    cursor: default;
   }
 
-  //= State: A disabled textfield
-  .ms-TextField.is-disabled {
-    .ms-TextField-field {
-      background-color: $ms-color-neutralLighter;
-      border-color: $ms-color-neutralLighter;
-      pointer-events: none;
-      cursor: default;
-    }
+  @include input-placeholder {
+    color: $ms-color-neutralTertiary;
+  }
+}
 
-    @include input-placeholder {
-      color: $ms-color-neutralTertiary;
-    }
+//= State: A required textfield
+.root.rootIsRequired {
+  :global(.ms-Label) {
+    @include ms-Label-is-required
   }
 
-  //= State: A required textfield
-  .ms-TextField.is-required {
-    .ms-Label {
-      @include ms-Label-is-required
-    }
+  @include input-placeholder {
+    @include ms-Label-is-required
+  }
+}
 
-    @include input-placeholder {
-      @include ms-Label-is-required
-    }
+//= State: An active textfield
+.root.rootIsActive {
+  border-color: $ms-color-themePrimary;
+}
+
+.field {
+  @include ms-u-normalize;
+  @include ms-baseFont;
+  border: 1px solid $ms-color-neutralTertiaryAlt;
+  border-radius: 0;
+  font-weight: $ms-font-weight-regular;
+  font-size: $ms-font-size-m;
+  color: $ms-color-neutralPrimary;
+  height: 32px;
+  @include padding(0, 12px, 0, 12px);
+  width: 100%;
+  outline: 0;
+  text-overflow: ellipsis;
+
+  &:hover {
+    border-color: $ms-color-neutralSecondaryAlt;
   }
 
-  //= State: An active textfield
-  .ms-TextField.is-active {
+  &:focus {
     border-color: $ms-color-themePrimary;
   }
 
-  .ms-TextField-field {
-    @include ms-u-normalize;
-    @include ms-baseFont;
-    border: 1px solid $ms-color-neutralTertiaryAlt;
-    border-radius: 0;
-    font-weight: $ms-font-weight-regular;
-    font-size: $ms-font-size-m;
-    color: $ms-color-neutralPrimary;
-    height: 32px;
-    @include padding(0, 12px, 0, 12px);
-    width: 100%;
-    outline: 0;
-    text-overflow: ellipsis;
-
-    &:hover {
-      border-color: $ms-color-neutralSecondaryAlt;
+  &:hover,
+  &:focus {
+    @media screen and (-ms-high-contrast: active) {
+      border-color: $ms-color-contrastBlackSelected;
     }
 
-    &:focus {
-      border-color: $ms-color-themePrimary;
+    @media screen and (-ms-high-contrast: black-on-white) {
+      border-color: $ms-color-contrastWhiteSelected;
     }
+  }
+
+  &[disabled] {
+    background-color: $ms-color-neutralLighter;
+    border-color: $ms-color-neutralLighter;
+    pointer-events: none;
+    cursor: default;
+  }
 
-    &:hover,
-    &:focus {
-      @media screen and (-ms-high-contrast: active) {
-        border-color: $ms-color-contrastBlackSelected;
-      }
+  @include input-placeholder {
+    color: $ms-color-neutralSecondary;
+  }
+}
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        border-color: $ms-color-contrastWhiteSelected;
-      }
-    }
+.description {
+  color: $ms-color-neutralSecondaryAlt;
+  font-size: $ms-font-size-xs;
+}
+
+
+//== Modifier: Single line (default), underlined
+//
+.root.rootIsUnderlined {
+  border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
+  display: table;
+  width: 100%;
 
-    &[disabled] {
-      background-color: $ms-color-neutralLighter;
-      border-color: $ms-color-neutralLighter;
-      pointer-events: none;
-      cursor: default;
+  &:hover {
+    border-color: $ms-color-neutralSecondaryAlt;
+
+    @media screen and (-ms-high-contrast: active) {
+      border-color: $ms-color-contrastBlackSelected;
     }
 
-    @include input-placeholder {
-      color: $ms-color-neutralSecondary;
+    @media screen and (-ms-high-contrast: black-on-white) {
+      border-color: $ms-color-contrastWhiteSelected;
     }
   }
 
-  .ms-TextField-description {
-    color: $ms-color-neutralSecondaryAlt;
-    font-size: $ms-font-size-xs;
+  &:active,
+  &:focus {
+    border-color: $ms-color-themePrimary;
   }
 
+  :global(.ms-Label) {
+    font-size: $ms-font-size-m;
+    @include margin-right(8px);
+    display: table-cell;
+    vertical-align: top;
+    @include padding-left(12px);
+    padding-top: 9px;
+    height: 32px;
+    width: 1%;
+    white-space: nowrap;
+  }
 
-  //== Modifier: Single line (default), underlined
-  //
-  .ms-TextField.ms-TextField--underlined {
-    border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
-    display: table;
-    width: 100%;
+  .field {
+    border: 0;
+    @include float(left);
+    display: table-cell;
+    @include text-align(left);
+    padding-top: 8px;
+    padding-bottom: 3px;
 
+    &:active,
+    &:focus,
     &:hover {
-      border-color: $ms-color-neutralSecondaryAlt;
-
-      @media screen and (-ms-high-contrast: active) {
-        border-color: $ms-color-contrastBlackSelected;
-      }
-
-      @media screen and (-ms-high-contrast: black-on-white) {
-        border-color: $ms-color-contrastWhiteSelected;
-      }
+      outline: 0;
     }
+  }
 
-    &:active,
-    &:focus {
-      border-color: $ms-color-themePrimary;
-    }
+  &.rootIsDisabled {
+    border-bottom-color: $ms-color-neutralLight;
 
-    .ms-Label {
-      font-size: $ms-font-size-m;
-      @include margin-right(8px);
-      display: table-cell;
-      vertical-align: top;
-      @include padding-left(12px);
-      padding-top: 9px;
-      height: 32px;
-      width: 1%;
-      white-space: nowrap;
+    :global(.ms-Label) {
+      @include ms-Label-is-disabled;
     }
 
-    .ms-TextField-field {
-      border: 0;
-      @include float(left);
-      display: table-cell;
-      @include text-align(left);
-      padding-top: 8px;
-      padding-bottom: 3px;
-
-      &:active,
-      &:focus,
-      &:hover {
-        outline: 0;
-      }
+    .field {
+      background-color: transparent;
+      color: $ms-color-neutralTertiary;
     }
+  }
 
-    &.is-disabled {
-      border-bottom-color: $ms-color-neutralLight;
-
-      .ms-Label {
-        @include ms-Label-is-disabled;
-      }
+  &.rootIsActive {
+    border-color: $ms-color-themePrimary;
 
-      .ms-TextField-field {
-        background-color: transparent;
-        color: $ms-color-neutralTertiary;
-      }
+    @media screen and (-ms-high-contrast: active) {
+      border-color: $ms-color-contrastBlackSelected;
     }
 
-    &.is-active {
-      border-color: $ms-color-themePrimary;
-
-      @media screen and (-ms-high-contrast: active) {
-        border-color: $ms-color-contrastBlackSelected;
-      }
-
-      @media screen and (-ms-high-contrast: black-on-white) {
-        border-color: $ms-color-contrastWhiteSelected;
-      }
+    @media screen and (-ms-high-contrast: black-on-white) {
+      border-color: $ms-color-contrastWhiteSelected;
     }
   }
+}
 
 
-  //== Modifier: Multiline textfield
-  //
-  .ms-TextField.ms-TextField--multiline .ms-TextField-field {
-    @include ms-baseFont;
-    color: $ms-color-neutralPrimary;
-    font-family: $ms-font-family-base;
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-    line-height: 17px;
-    min-height: 60px;
-    height: auto;
-    padding-top: 6px;
-    overflow: auto;
-  }
-
-  // @todo: https://github.com/OfficeDev/Office-UI-Fabric/issues/359
-  .ms-TextField-errorMessage {
-    @include ms-font-s;
-    @include ms-fontColor-redDark;
-    @include resetMargins;
-    padding-top: 5px;
-  }
-
-  .ms-TextField-invalid,
-  .ms-TextField-invalid:focus,
-  .ms-TextField-invalid:hover {
-    @include ms-borderColor-redDark;
-  }
-
-  .ms-u-screenReaderOnly {
-    position: absolute;
-    text-indent: -9999px;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    border: 0;
-  }
+//== Modifier: Multiline textfield
+//
+.root.rootIsMultiline .field {
+  @include ms-baseFont;
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-base;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  line-height: 17px;
+  min-height: 60px;
+  height: auto;
+  padding-top: 6px;
+  overflow: auto;
+}
 
-  .ms-TextField.ms-TextField--underlined {
+// @todo: https://github.com/OfficeDev/Office-UI-Fabric/issues/359
+.errorMessage {
+  @include ms-font-s;
+  @include ms-fontColor-redDark;
+  @include resetMargins;
+  padding-top: 5px;
+}
 
-    .ms-Label {
-      @include padding-left(12px);
-      @include padding-right(0);
-    }
+.invalid,
+.invalid:focus,
+.invalid:hover {
+  @include ms-borderColor-redDark;
+}
 
-    .ms-TextField-field {
-      @include text-align(left);
-    }
-  }
+// What is this doing here?
+/*
+.ms-u-screenReaderOnly {
+  position: absolute;
+  text-indent: -9999px;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  border: 0;
+}
+*/
 
-  .ms-TextField.ms-TextField--multiline {
+.root.rootIsUnderlined {
 
-    .ms-TextField-field.ms-TextField-field--unresizable {
-      resize: none;
-    }
+  :global(.ms-Label) {
+    @include padding-left(12px);
+    @include padding-right(0);
+  }
+
+  .field {
+    @include text-align(left);
   }
+}
 
-  .ms-TextField-hidden {
-    display: none;
+.root.rootIsMultiline {
+
+  .field.fieldIsUnresizable {
+    resize: none;
   }
+}
 
+.hidden {
+  display: none;
 }
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
index 3d0a8f0497fb09..3c28900afc5485 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
@@ -292,7 +292,7 @@ describe('TextField', () => {
         return '';
       };
 
-      const renderedDOM: HTMLElement = renderIntoDocument(
+      renderIntoDocument(
         <TextField
           value='initial value'
           onGetErrorMessage={ validatorSpy }
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
index 783fdc47a9cc12..e6e1d4c1308e9f 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
@@ -9,7 +9,7 @@ import {
   inputProperties,
   textAreaProperties
 } from '../../Utilities';
-import './TextField.scss';
+import styles from './TextField.scss';
 
 export interface ITextFieldState {
   value?: string;
@@ -125,12 +125,12 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     const errorMessage: string = this._errorMessage;
     this._isDescriptionAvailable = Boolean(description || errorMessage);
 
-    const textFieldClassName = css('ms-TextField', className, {
-      'is-required': required,
-      'is-disabled': disabled,
-      'is-active': isFocused,
-      'ms-TextField--multiline': multiline,
-      'ms-TextField--underlined': underlined
+    const textFieldClassName = css('ms-TextField', styles.root, className, {
+      ['is-required ' + styles.rootIsRequired]: required,
+      ['is-disabled ' + styles.rootIsDisabled]: disabled,
+      ['is-active ' + styles.rootIsActive]: isFocused,
+      ['ms-TextField--multiline ' + styles.rootIsMultiline]: multiline,
+      ['ms-TextField--underlined ' + styles.rootIsUnderlined]: underlined
     });
 
     return (
@@ -141,8 +141,13 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
         { errorMessage && <div aria-live='assertive' className='ms-u-screenReaderOnly' data-automation-id='error-message'>{ errorMessage }</div> }
         { this._isDescriptionAvailable &&
           <span id={ this._descriptionId }>
-            { description && <span className='ms-TextField-description'>{ description }</span> }
-            { errorMessage && <p className='ms-TextField-errorMessage ms-u-slideDownIn20'>{ errorMessage }</p> }
+            { description && <span className={ css('ms-TextField-description', styles.description) }>{ description }</span> }
+            { errorMessage && (
+              <p
+                className={ css('ms-TextField-errorMessage ms-u-slideDownIn20', styles.errorMessage) }
+              >
+                { errorMessage }
+              </p>) }
           </span>
         }
       </div>
@@ -207,18 +212,18 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     }
   }
 
-  private get _textElementClassName(): string {
+  private _getTextElementClassName(): string {
     const errorMessage: string = this._errorMessage;
     let textFieldClassName: string;
 
     if (this.props.multiline && !this.props.resizable) {
-      textFieldClassName = 'ms-TextField-field ms-TextField-field--unresizable';
+      textFieldClassName = css('ms-TextField-field ms-TextField-field--unresizable', styles.field, styles.fieldIsUnresizable);
     } else {
-      textFieldClassName = 'ms-TextField-field';
+      textFieldClassName = css('ms-TextField-field', styles.field);
     }
 
     return css(textFieldClassName, this.props.inputClassName, {
-      'ms-TextField-invalid': !!errorMessage
+      ['ms-TextField-invalid ' + styles.invalid]: !!errorMessage
     });
   }
 
@@ -237,15 +242,15 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     return (
       <textarea
         id={ this._id }
-        aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : undefined }
-        aria-invalid={ !!this.state.errorMessage }
-        aria-label={ this.props.ariaLabel }
         { ...textAreaProps }
         ref={ this._resolveRef('_textElement') }
         value={ this.state.value }
         onInput={ this._onInputChange }
         onChange={ this._onInputChange }
-        className={ this._textElementClassName }
+        className={ this._getTextElementClassName() }
+        aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : undefined }
+        aria-invalid={ !!this.state.errorMessage }
+        aria-label={ this.props.ariaLabel }
         onFocus={ this._onFocus }
         onBlur={ this._onBlur }
       />
@@ -259,15 +264,15 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       <input
         type={ 'text' }
         id={ this._id }
-        aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : undefined }
-        aria-label={ this.props.ariaLabel }
-        aria-invalid={ !!this.state.errorMessage }
         { ...inputProps }
         ref={ this._resolveRef('_textElement') }
         value={ this.state.value }
         onInput={ this._onInputChange }
         onChange={ this._onInputChange }
-        className={ this._textElementClassName }
+        className={ this._getTextElementClassName() }
+        aria-label={ this.props.ariaLabel }
+        aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : undefined }
+        aria-invalid={ !!this.state.errorMessage }
         onFocus={ this._onFocus }
         onBlur={ this._onBlur }
       />
@@ -287,6 +292,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     } as ITextFieldState,
       () => {
         this._adjustInputHeight();
+
         if (this.props.onChanged) {
           this.props.onChanged(value);
         }
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss
index 3baf0ec8bd5abc..5b2db943841c5e 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss
@@ -5,26 +5,24 @@
 // --------------------------------------------------
 // Tooltip styles
 
-:global {
+.root {
+  max-width: 364px;
+  background: $ms-color-white;
+  padding: 8px;
+  pointer-events: none;
 
-  .ms-Tooltip {
-      @include ms-u-fadeIn200;
-      max-width: 364px;
-      background: $ms-color-white;
-      padding: 8px;
-      pointer-events: none;
-      &.has-mediumDelay {
-          animation-delay: 300ms;
-      }
-      &-subText {
-          margin: 0;
-          font-size: $ms-font-size-s;
-          color: $ms-color-neutralPrimary;
-      }
+  &.hasMediumDelay {
+    animation-delay: 300ms;
   }
+}
 
-  .ms-TooltipHost {
-      display: inline;
-  }
+.subText {
+  margin: 0;
+  font-size: $ms-font-size-s;
+  color: $ms-color-neutralPrimary;
+}
 
+.host {
+  display: inline;
 }
+
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
index 461df9eedd79e7..53460d098667e4 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
@@ -10,7 +10,7 @@ import {
 import { ITooltipProps, TooltipDelay } from './Tooltip.Props';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import './Tooltip.scss';
+import styles from './Tooltip.scss';
 
 export class Tooltip extends BaseComponent<ITooltipProps, any> {
 
@@ -32,18 +32,20 @@ export class Tooltip extends BaseComponent<ITooltipProps, any> {
 
     return (
       <Callout
-        className={ css('ms-Tooltip', `has-${TooltipDelay[delay]}Delay`) }
+        className={ css('ms-Tooltip ms-u-fadeIn200', styles.root, {
+          [styles.hasMediumDelay]: delay === TooltipDelay.medium
+        }) }
         targetElement={ targetElement }
         directionalHint={ directionalHint }
         {...calloutProps}
         { ...getNativeProps(this.props, divProperties) }
-        >
-        <div className='ms-Tooltip-content'>
-          <p className='ms-Tooltip-subText' id={ id } role='tooltip'>
+      >
+        <div className={ css('ms-Tooltip-content') }>
+          <p className={ css('ms-Tooltip-subText', styles.subText) } id={ id } role='tooltip'>
             { content }
           </p>
         </div>
-      </Callout>
+      </Callout >
     );
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
index 548a304017600f..5259a2b38963d6 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
@@ -4,12 +4,14 @@ import * as React from 'react';
 import {
   BaseComponent,
   autobind,
+  css,
   divProperties,
   getNativeProps
 } from '../../Utilities';
 import { ITooltipHostProps } from './TooltipHost.Props';
 import { Tooltip } from './Tooltip';
 import { TooltipDelay } from './Tooltip.Props';
+import styles from './Tooltip.scss';
 
 export class TooltipHost extends BaseComponent<ITooltipHostProps, any> {
 
@@ -35,7 +37,7 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, any> {
     let { isTooltipVisible } = this.state;
     return (
       <div
-        className='ms-TooltipHost'
+        className={ css('ms-TooltipHost', styles.host) }
         ref={ this._resolveRef('_tooltipHost') }
         { ...{ onFocusCapture: this._onTooltipMouseEnter } }
         { ...{ onBlurCapture: this._onTooltipMouseLeave } }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.scss b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.scss
index ab26e97396e033..efaf4f14931926 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.scss
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.scss
@@ -1,29 +1,27 @@
 @import '../../common/common';
 
-:global {
-  .ms-BasePicker-text {
-    display: flex;
-    flex-wrap: wrap;
-    box-sizing: border-box;
-    border: 1px solid $ms-color-neutralLight;
-    min-width: 180px;
-    padding: 1px;
+.pickerText {
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  border: 1px solid $ms-color-neutralLight;
+  min-width: 180px;
+  padding: 1px;
 
-    &:hover {
-      border-color: $ms-color-themeLight;
-    }
-
-    &.inputFocused {
-      border-color: $ms-color-themePrimary;
-    }
+  &:hover {
+    border-color: $ms-color-themeLight;
   }
 
-  .ms-BasePicker-input {
-    border: none;
-    min-height: 28px;
-    flex-grow: 1;
-    outline: none;
-    padding: 0 6px;
-    margin: 1px;
+  &.inputFocused {
+    border-color: $ms-color-themePrimary;
   }
 }
+
+.pickerInput {
+  border: none;
+  min-height: 32px;
+  flex-grow: 1;
+  outline: none;
+  padding: 0 6px;
+  margin: 1px;
+}
diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
index b5377e2b7ee43f..2179fa8967ac03 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
@@ -15,7 +15,7 @@ import { SuggestionsController } from './Suggestions/SuggestionsController';
 import { IBasePickerProps } from './BasePicker.Props';
 import { BaseAutoFill } from './AutoFill/BaseAutoFill';
 import { IPickerItemProps } from './PickerItem.Props';
-import './BasePicker.scss';
+import styles from './BasePicker.scss';
 
 export interface IBasePickerState {
   items?: any;
@@ -94,14 +94,18 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     return (
       <div
         ref={ this._resolveRef('root') }
-        className={ css('ms-BasePicker', className ? className : '') }
+        className={ css(
+          'ms-BasePicker',
+          className ? className : '') }
         onKeyDown={ this.onKeyDown }>
         <SelectionZone selection={ this.selection } selectionMode={ SelectionMode.multiple }>
-          <FocusZone ref={ this._resolveRef('focusZone') } className='ms-BasePicker-text'>
+          <FocusZone
+            ref={ this._resolveRef('focusZone') }
+            className={ css('ms-BasePicker-text', styles.pickerText) }>
             { this.renderItems() }
             <BaseAutoFill
               { ...inputProps }
-              className='ms-BasePicker-input'
+              className={ css('ms-BasePicker-input', styles.pickerInput) }
               ref={ this._resolveRef('input') }
               onFocus={ this.onInputFocus }
               onInputValueChange={ this.onInputChange }
@@ -411,10 +415,10 @@ export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BaseP
           onKeyDown={ this.onKeyDown }>
           <SelectionZone selection={ this.selection }
             selectionMode={ SelectionMode.multiple }>
-            <div className='ms-BasePicker-text'>
+            <div className={ css('ms-BasePicker-text', styles.pickerText) }>
               <BaseAutoFill
                 { ...inputProps }
-                className='ms-BasePicker-input'
+                className={ css('ms-BasePicker-input', styles.pickerInput) }
                 ref={ this._resolveRef('input') }
                 onFocus={ this.onInputFocus }
                 onInputValueChange={ this.onInputChange }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.scss b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.scss
index e124c0684e9d65..611d06831b1cc4 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.scss
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.scss
@@ -1,30 +1,22 @@
 @import '../../../common/common';
 
-:global {
-
-  .ms-PickerPersona-Container {
-    display: inline-block;
-  }
-
-  .ms-Picker-MenuItem.ms-result-content{
-    display: table-row;
-    .ms-result-item {
-      display: table-cell;
-      vertical-align: bottom;
-    }
+.resultContent {
+  display: table-row;
+  .resultItem {
+    display: table-cell;
+    vertical-align: bottom;
   }
+}
 
-  .ms-PeoplePicker-Persona {
-    width: 180px;
-
-    .ms-Persona-details {
-      width: 100%;
-    }
+.peoplePickerPersona {
+  width: 180px;
+   :global(.ms-Persona-details) {
+    width: 100%;
   }
+}
 
-  .ms-PeoplePicker {
-    .ms-BasePicker-text {
-      min-height: 40px;
-    }
+.peoplePicker {
+   :global(.ms-BasePicker-text) {
+    min-height: 40px;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss
index 2d75324382bbf5..44c50d1f686fd5 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss
@@ -1,42 +1,43 @@
 @import '../../../../common/common';
 
-:global {
-  .ms-PickerPersona-container {
-    @include focus-border();
-
-    display: inline-flex;
-    align-items: center;
-    background: $ms-color-neutralLighter;
-    margin: 2px;
-    cursor: default;
-    user-select: none;
-    max-width: 100%;
+.personaContainer {
+  @include focus-border();
+  display: inline-flex;
+  align-items: center;
+  background: $ms-color-neutralLighter;
+  margin: 2px;
+  cursor: default;
+  user-select: none;
+  max-width: 100%;
+  
+  &:hover {
+    background: $ms-color-neutralLight;
+  }
+  
+  &.personaContainerIsSelected {
+    background: $ms-color-neutralQuaternary;
 
     &:hover {
-      background: $ms-color-neutralLight;
-    }
-
-    &.is-selected {
-      background: $ms-color-neutralQuaternary;
-      &:hover {
-        background: $ms-color-neutralQuaternaryAlt;
-      }
+      background: $ms-color-neutralQuaternaryAlt;
     }
+  }
 
-    .ms-PickerItem-content {
-      flex: 0 1 auto;
-      min-width: 0px;
-      &.ms-Button {
-        flex: 0 0 auto;
-      }
-    }
+  .itemContent {
+    flex: 0 1 auto;
+    min-width: 0px;
+  }
 
-    .ms-Persona-details {
-      flex: 0 1 auto;
-    }
+  .removeButton {
+    flex: 0 0 auto;
+    width: 32px;
+    height: 32px;
   }
 
-  .ms-PickerItem-container {
-    display: inline-block;
+  .personaDetails {
+    flex: 0 1 auto;
   }
 }
+
+.itemContainer {
+  display: inline-block;
+}
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
index 7e3faafdfe652f..4342d845beae79 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
@@ -4,8 +4,8 @@ import * as React from 'react';
 import { css } from '../../../../Utilities';
 import { Persona, PersonaSize, PersonaPresence } from '../../../../Persona';
 import { IPeoplePickerItemProps } from './PeoplePickerItem.Props';
-import { Button, ButtonType } from '../../../../Button';
-import './PickerItemsDefault.scss';
+import { IconButton } from '../../../../Button';
+import styles from './PickerItemsDefault.scss';
 
 export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element = (peoplePickerItemProps: IPeoplePickerItemProps) => {
   let {
@@ -16,26 +16,25 @@ export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element
   } = peoplePickerItemProps;
   return (
     <div
-      className={ css('ms-PickerPersona-container', {
-        'is-selected': selected
+      className={ css('ms-PickerPersona-container', styles.personaContainer, {
+        ['is-selected ' + styles.personaContainerIsSelected]: selected
       }) }
       data-is-focusable={ true }
       data-selection-index={ index } >
-      <div className='ms-PickerItem-content'>
+      <div className={ css('ms-PickerItem-content', styles.itemContent) } >
         <Persona
           { ...item }
           presence={ item.presence !== undefined ? item.presence : PersonaPresence.none }
           size={ PersonaSize.extraSmall }
         />
       </div>
-      <Button
+      <IconButton
         onClick={ () => { if (onRemoveItem) { onRemoveItem(); } } }
         icon={ 'Cancel' }
-        buttonType={ ButtonType.icon }
-        className='ms-PickerItem-content'
+        className={ css('ms-PickerItem-content', styles.removeButton, styles.itemContent) }
         data-is-focusable={ false }
       >
-      </Button>
+      </IconButton>
     </div >
   );
-};
\ No newline at end of file
+};
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
index 4f69f230de63aa..3da8a1267b61ca 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
@@ -1,11 +1,13 @@
 /* tslint:disable */
 import * as React from 'react';
 /* tslint:enable */
+import { css } from '../../../../Utilities';
 import { IPeoplePickerItemWithMenuProps } from './PeoplePickerItem.Props';
 import { Persona, PersonaPresence } from '../../../../Persona';
 import { ContextualMenu, DirectionalHint } from '../../../../ContextualMenu';
-import { Button, ButtonType } from '../../../../Button';
+import { IconButton } from '../../../../Button';
 import { FocusZone } from '../../../../FocusZone';
+import styles from './PickerItemsDefault.scss';
 
 export interface IPeoplePickerItemState {
   contextualMenuVisible: boolean;
@@ -30,24 +32,23 @@ export class SelectedItemWithMenu extends React.Component<IPeoplePickerItemWithM
       onRemoveItem
     } = this.props;
     return (
-      <div data-is-focusable={ true } className='ms-PickerItem-container'>
-        <FocusZone className='ms-PickerPersona-container' >
-          <div className='ms-PickerItem-content'>
+      <div data-is-focusable={ true } className={ css('ms-PickerItem-container', styles.itemContainer) }>
+        <FocusZone className={ css('ms-PickerPersona-container', styles.personaContainer) } >
+          <div className={ css('ms-PickerItem-content', styles.itemContent) }>
             <Persona
               { ...item }
               presence={ item.presence !== undefined ? item.presence : PersonaPresence.none }
             />
           </div>
-          <div ref='ellipsisRef' className='ms-PickerItem-content'>
-            <Button
+          <div ref='ellipsisRef' className={ css('ms-PickerItem-content', styles.itemContent) }>
+            <IconButton
               icon={ 'More' }
-              buttonType={ ButtonType.icon } onClick={ this.onContextualMenu }
+              onClick={ this.onContextualMenu }
             />
           </div>
-          <div className='ms-PickerItem-content'>
-            <Button
+          <div className={ css('ms-PickerItem-content', styles.itemContent) }>
+            <IconButton
               icon={ 'Cancel' }
-              buttonType={ ButtonType.icon }
               onClick={ onRemoveItem }
             />
           </div>
@@ -71,4 +72,4 @@ export class SelectedItemWithMenu extends React.Component<IPeoplePickerItemWithM
   private _onCloseContextualMenu(ev: Event) {
     this.setState({ contextualMenuVisible: false });
   }
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx
index fc0864b2178e40..e43ee2446ddfbf 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx
@@ -1,7 +1,10 @@
 /* tslint:disable */
 import * as React from 'react';
 /* tslint:enable */
+import { css } from '../../../../Utilities';
 import { Persona, PersonaSize, IPersonaProps, PersonaPresence } from '../../../../Persona';
+import styles from '../PeoplePicker.scss';
+
 export const SuggestionItemNormal: (persona: IPersonaProps) => JSX.Element = (personaProps: IPersonaProps) => {
   return (
     <div className='ms-PeoplePicker-personaContent'>
@@ -9,8 +12,8 @@ export const SuggestionItemNormal: (persona: IPersonaProps) => JSX.Element = (pe
         { ...personaProps }
         presence={ personaProps.presence !== undefined ? personaProps.presence : PersonaPresence.none }
         size={ PersonaSize.small }
-        className={ 'ms-PeoplePicker-Persona' }
-        />
+        className={ css('ms-PeoplePicker-Persona', styles.peoplePickerPersona) }
+      />
     </div>
   );
 };
@@ -22,8 +25,8 @@ export const SuggestionItemSmall: (persona: IPersonaProps) => JSX.Element = (per
         { ...personaProps }
         presence={ personaProps.presence !== undefined ? personaProps.presence : PersonaPresence.none }
         size={ PersonaSize.extraSmall }
-        className={ 'ms-PeoplePicker-Persona' }
-        />
+        className={ css('ms-PeoplePicker-Persona', styles.peoplePickerPersona) }
+      />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss
index 33c7bcfb25dd90..a9cf990ea024b2 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss
@@ -1,79 +1,85 @@
 @import '../../../common/common';
 
-:global {
+.root {
+  min-width: 180px;
+}
 
-  .ms-SearchMore-button {
-    @include button-reset();
-    height: auto;
-    text-align: center;
-    margin: 0;
-    width: 100%;
-    &:hover {
-        background-color: $ms-color-neutralLight;
-        cursor: pointer;
-    }
-    // TODO: Works in Chrome, but not working in IE
-    &:focus,
-    &:active {
-        background-color: $ms-color-themeLight;
-    }
+.suggestionsItem {
+  width: 100%;
+  height: auto;
+  
+  @include text-align(left);
+  padding: 4px 20px 6px;
+
+  display: block;
+  border: none;
+  background: $ms-color-white;
+
+  &:hover {
+    background: $ms-color-neutralLight;
   }
-  .ms-Suggestions {
-    min-width: 180px;
-    .ms-Suggestions-item {
-      height: auto;
-      width: 100%;
-      @include text-align(left);
-      padding: 4px 20px 6px;
-      display: block;
-      border: none;
-      background: $ms-color-white;
-      &:hover {
-        background: $ms-color-neutralLight;
-      }
 
-      &.is-suggested {
-        background: $ms-color-neutralQuaternary;
-        &:hover {
-          background: $ms-color-neutralQuaternaryAlt;
-        }
-      }
-    }
-    .ms-Suggestions-title {
-      color: $ms-color-themePrimary;
-      font-size: $ms-font-size-s;
-      text-align: center;
-      text-transform: uppercase;
-      line-height: 40px;
-      border-bottom: 1px solid $ms-color-neutralLight;
-    }
-    .ms-Suggestions-container {
-      overflow-y: auto;
-      overflow-x: hidden;
-      max-height: 300px;
-      border-bottom: 1px solid $ms-color-neutralLight;
-    }
-    .ms-Suggestions-none {
-      text-align: center;
-      color: $ms-color-info;
-      font-size: $ms-font-size-s;
-      line-height: 30px;
+  &.suggestionsItemIsSuggested {
+    background: $ms-color-neutralQuaternary;
+    &:hover {
+      background: $ms-color-neutralQuaternaryAlt;
     }
   }
+}
 
-  .ms-Suggestions-spinner {
-    margin: 5px;
-    text-align: center;
-    white-space: nowrap;
-    line-height: 20px;
-    .ms-Spinner-circle {
-      display: inline-block;
-      vertical-align: middle;
-    }
-    .ms-Spinner-label {
-      display: inline-block;
-      margin: 0px 10px;
-      vertical-align: middle;
-    }
+.searchMoreButton {
+  @include button-reset();
+  height: auto;
+  text-align: center;
+  margin: 0;
+  width: 100%;
+  &:hover {
+      background-color: $ms-color-neutralLight;
+      cursor: pointer;
+  }
+  // TODO: Works in Chrome, but not working in IE
+  &:focus,
+  &:active {
+      background-color: $ms-color-themeLight;
   }
 }
+
+.suggestionsTitle {
+  color: $ms-color-themePrimary;
+  font-size: $ms-font-size-s;
+  text-align: center;
+  text-transform: uppercase;
+  line-height: 40px;
+  border-bottom: 1px solid $ms-color-neutralLight;
+}
+
+.suggestionsContainer {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 300px;
+  border-bottom: 1px solid $ms-color-neutralLight;
+}
+
+.suggestionsNone {
+  text-align: center;
+  color: $ms-color-info;
+  font-size: $ms-font-size-s;
+  line-height: 30px;
+}
+
+.suggestionsSpinner {
+  margin: 5px;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 20px;
+
+  :global(.ms-Spinner-circle) {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  :global(.ms-Spinner-label) {
+    display: inline-block;
+    margin: 0px 10px;
+    vertical-align: middle;
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
index 3e2260b6f98f52..84ee93832e5c5d 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
@@ -3,10 +3,10 @@ import {
   BaseComponent,
   css
 } from '../../../Utilities';
-import { DefaultButton, ButtonType } from '../../../Button';
+import { CommandButton } from '../../../Button';
 import { Spinner } from '../../../Spinner';
 import { ISuggestionItemProps, ISuggestionsProps } from './Suggestions.Props';
-import './Suggestions.scss';
+import styles from './Suggestions.scss';
 
 export class SuggestionsItem<T> extends React.Component<ISuggestionItemProps<T>, {}> {
   public render() {
@@ -17,19 +17,26 @@ export class SuggestionsItem<T> extends React.Component<ISuggestionItemProps<T>,
       className
     } = this.props;
     return (
-      <DefaultButton
+      <CommandButton
         onClick={ onClick }
-        className={ css('ms-Suggestions-item', { 'is-suggested': suggestionModel.selected }, className) }
+        className={ css(
+          'ms-Suggestions-item',
+          styles.suggestionsItem,
+          {
+            ['is-suggested ' + styles.suggestionsItemIsSuggested]: suggestionModel.selected
+          },
+          className
+        ) }
       >
         <RenderSuggestion { ...suggestionModel.item } />
-      </DefaultButton>
+      </CommandButton>
     );
   }
 }
 
 export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
 
-  protected _searchForMoreButton: DefaultButton;
+  protected _searchForMoreButton: CommandButton;
   protected _selectedElement: HTMLDivElement;
   private SuggestionsItemOfProperType = SuggestionsItem as new (props: ISuggestionItemProps<T>) => SuggestionsItem<T>;
 
@@ -57,20 +64,23 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
 
     let noResults: () => JSX.Element = () => {
       return noResultsFoundText ?
-        <div className='ms-Suggestions-none'>
+        <div className={ css('ms-Suggestions-none', styles.suggestionsNone) }>
           { noResultsFoundText }
         </div> : null;
     };
 
     return (
-      <div className={ css('ms-Suggestions', className ? className : '') }>
+      <div className={ css(
+        'ms-Suggestions',
+        className ? className : '',
+        styles.root) }>
         { suggestionsHeaderText ?
-          (<div className='ms-Suggestions-title'>
+          (<div className={ css('ms-Suggestions-title', styles.suggestionsTitle) }>
             { suggestionsHeaderText }
           </div>) : (null) }
         { isLoading && (
           <Spinner
-            className='ms-Suggestions-spinner'
+            className={ css('ms-Suggestions-spinner', styles.suggestionsSpinner) }
             label={ loadingText }
           />) }
         { (!suggestions || !suggestions.length) && !isLoading ?
@@ -78,14 +88,13 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
           this._renderSuggestions()
         }
         { searchForMoreText && moreSuggestionsAvailable ?
-          (<DefaultButton
+          (<CommandButton
             onClick={ this._getMoreResults.bind(this) }
-            className={ 'ms-SearchMore-button' }
-            buttonType={ ButtonType.icon }
+            className={ css('ms-SearchMore-button', styles.searchMoreButton) }
             icon={ 'Search' }
             ref={ this._resolveRef('_searchForMoreButton') } >
             { searchForMoreText }
-          </DefaultButton>) : (null)
+          </CommandButton>) : (null)
         }
       </div>
     );
@@ -112,7 +121,10 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
     let TypedSuggestionsItem = this.SuggestionsItemOfProperType;
 
     return (
-      <div className='ms-Suggestions-container' id='suggestion-list' role='menu'>
+      <div
+        className={ css('ms-Suggestions-container', styles.suggestionsContainer) }
+        id='suggestion-list'
+        role='menu'>
         { suggestions.map((suggestion, index) =>
           <div ref={ this._resolveRef(suggestion.selected ? '_selectedElement' : '') }
             key={ index }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.scss b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.scss
index 8337a142bbf994..6a604840668765 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.scss
+++ b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.scss
@@ -1,52 +1,51 @@
 @import '../../../common/common';
 
-:global {
-  .ms-TagItem {
-    @include focus-border();
-
-    flex-shrink: 0;
-    vertical-align: top;
-    background: $ms-color-neutralLighter;
-    margin: 1px;
-    height: 28px;
-    line-height: 28px;
-    vertical-align: top;
-    white-space: nowrap;
-    cursor: default;
-    user-select: none;
+.root {
+  @include focus-border();
+
+  flex-shrink: 0;
+  vertical-align: top;
+  background: $ms-color-neutralLighter;
+  margin: 1px;
+  height: 32px;
+  line-height: 32px;
+  vertical-align: top;
+  white-space: nowrap;
+  cursor: default;
+  user-select: none;
+
+  &:hover {
+    background: $ms-color-neutralLight;
+  }
 
+  &.isSelected {
+    background: $ms-color-neutralQuaternary;
     &:hover {
-      background: $ms-color-neutralLight;
-    }
-
-    &.is-selected {
-      background: $ms-color-neutralQuaternary;
-      &:hover {
-        background: $ms-color-neutralQuaternaryAlt;
-      }
+      background: $ms-color-neutralQuaternaryAlt;
     }
   }
+}
 
-  .ms-TagItem-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.tagItemText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
-    display: inline-block;
-    min-width: 100px;
-    margin: 0 8px;
-  }
+  display: inline-block;
+  min-width: 100px;
+  margin: 0 8px;
+}
 
-  .ms-TagItem-close {
-    cursor: pointer;
+.tagItemClose {
+  cursor: pointer;
 
-    color: $ms-color-neutralSecondary;
+  color: $ms-color-neutralSecondary;
 
-    font-size: $ms-font-size-s;
-    display: inline-block;
-    text-align: center;
-    vertical-align: top;
-    width: 30px;
-    height: 100%;
-  }
+  font-size: $ms-font-size-s;
+  display: inline-block;
+  text-align: center;
+  vertical-align: top;
+  width: 30px;
+  height: 100%;
 }
+
diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx
index a9ede972dedd9a..9a22924332702b 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx
@@ -4,17 +4,20 @@ import * as React from 'react';
 import { css } from '../../../Utilities';
 import { IPickerItemProps } from '../PickerItem.Props';
 import { ITag } from './TagPicker';
-import './TagItem.scss';
+import styles from './TagItem.scss';
 
 export const TagItem = (props: IPickerItemProps<ITag>) => (
   <div
-    className={ css('ms-TagItem', {
-      'is-selected': props.selected
-    }) }
+    className={ css('ms-TagItem',
+      styles.root,
+      { 'is-selected': props.selected },
+      props.selected && styles.isSelected) }
     key={ props.index }
     data-selection-index={ props.index }
     data-is-focusable={ true }>
-    <span className='ms-TagItem-text'>{ props.children }</span>
-    <span className='ms-TagItem-close' onClick={ props.onRemoveItem }><i className=' ms-Icon ms-Icon--Cancel' /></span>
+    <span className={ css('ms-TagItem-text', styles.tagItemText) }>{ props.children }</span>
+    <span className={ css('ms-TagItem-close', styles.tagItemClose) } onClick={ props.onRemoveItem }>
+      <i className=' ms-Icon ms-Icon--Cancel' />
+    </span>
   </div>
 );
diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagSuggestions.scss b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagSuggestions.scss
deleted file mode 100644
index bbd1939b9b1689..00000000000000
--- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagSuggestions.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import '../../../common/common';
-
-:global {
-  .ms-TagSuggestions {
-    min-width: 200px;
-    box-sizing: border-box;
-  }
-
-  .ms-TagSuggestions-title,
-  .ms-TagSuggestions-none,
-  .ms-TagSuggestions-item {
-    height: 36px;
-    line-height: 36px;
-    padding: 0 16px;
-  }
-
-  .ms-TagSuggestions-title {
-    border-bottom: 1px solid $ms-color-neutralLighter;
-  }
-
-  .ms-TagSuggestions-item {
-    &:hover {
-      background: $ms-color-neutralLight;
-    }
-
-    &.is-suggested {
-      background: $ms-color-neutralQuaternary;
-      &:hover {
-        background: $ms-color-neutralQuaternaryAlt;
-      }
-    }
-  }
-
-  .ms-TagSuggestions-none {
-    text-align: center;
-    color: $ms-color-neutralTertiary;
-  }
-}
\ No newline at end of file