From 85f04db62a29fbfa05fee400f791f677547ad82c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 15 Oct 2018 19:35:35 +0300
Subject: [PATCH] build: set up tooling to ensure consistent prefixes for CSS
 classes (#13563)

Enables the `selector-class-pattern` Stylelint rule and fixes everything that wasn't consistent.

Fixes #13545.
---
 .../creating-a-custom-form-field-control.md   | 14 ++++++------
 src/demo-app/demo-app/demo-app.ts             |  2 +-
 src/demo-app/drag-drop/drag-drop-demo.html    | 10 ++++-----
 src/demo-app/drag-drop/drag-drop-demo.scss    | 22 ++++++++-----------
 .../screen-type/screen-type-demo.html         | 10 ++++-----
 .../screen-type/screen-type-demo.scss         |  6 ++---
 src/demo-app/theme.scss                       |  5 +++--
 .../block-scroll-strategy-e2e.css             | 10 ++++-----
 .../block-scroll-strategy-e2e.html            |  8 +++----
 .../button-types/button-types-example.css     |  4 ++--
 .../button-types/button-types-example.html    | 16 +++++++-------
 .../cdk-drag-drop-axis-lock-example.css       |  4 ++--
 .../cdk-drag-drop-axis-lock-example.html      |  4 ++--
 ...dk-drag-drop-connected-sorting-example.css | 10 ++++-----
 ...k-drag-drop-connected-sorting-example.html | 12 +++++-----
 .../cdk-drag-drop-custom-preview-example.css  |  8 +++----
 .../cdk-drag-drop-custom-preview-example.html |  4 ++--
 .../cdk-drag-drop-handle-example.css          |  6 ++---
 .../cdk-drag-drop-handle-example.html         |  4 ++--
 ...k-drag-drop-horizontal-sorting-example.css |  8 +++----
 ...-drag-drop-horizontal-sorting-example.html |  4 ++--
 .../cdk-drag-drop-overview-example.css        |  4 ++--
 .../cdk-drag-drop-overview-example.html       |  2 +-
 .../cdk-drag-drop-root-element-example.css    |  4 ++--
 .../cdk-drag-drop-root-element-example.html   |  2 +-
 .../cdk-drag-drop-sorting-example.css         |  8 +++----
 .../cdk-drag-drop-sorting-example.html        |  4 ++--
 ...mple.css => example-tel-input-example.css} |  8 +++----
 .../example-tel-input-example.html            |  7 ++++++
 .../form-field-custom-control-example.html    |  2 +-
 .../form-field-custom-control-example.ts      | 12 +++++-----
 .../my-tel-input-example.html                 |  7 ------
 .../kitchen-sink/kitchen-sink.css             |  3 ---
 .../kitchen-sink/kitchen-sink.ts              |  1 -
 stylelint-config.json                         |  5 ++++-
 .../app/coverage-chart/coverage-chart.html    |  2 +-
 .../src/app/payload-chart/payload-chart.html  |  2 +-
 tools/dashboard/src/styles.scss               |  2 +-
 38 files changed, 121 insertions(+), 125 deletions(-)
 rename src/material-examples/form-field-custom-control/{my-tel-input-example.css => example-tel-input-example.css} (57%)
 create mode 100644 src/material-examples/form-field-custom-control/example-tel-input-example.html
 delete mode 100644 src/material-examples/form-field-custom-control/my-tel-input-example.html
 delete mode 100644 src/universal-app/kitchen-sink/kitchen-sink.css

diff --git a/guides/creating-a-custom-form-field-control.md b/guides/creating-a-custom-form-field-control.md
index 84a6d1cf0c0..c2d52f1947d 100644
--- a/guides/creating-a-custom-form-field-control.md
+++ b/guides/creating-a-custom-form-field-control.md
@@ -21,7 +21,7 @@ class MyTel {
 }
 
 @Component({
-  selector: 'my-tel-input',
+  selector: 'example-tel-input',
   template: `
     <div [formGroup]="parts">
       <input class="area" formControlName="area" size="3">
@@ -134,7 +134,7 @@ element and just generate a unique ID for it.
 ```ts
 static nextId = 0;
 
-@HostBinding() id = `my-tel-input-${MyTelInput.nextId++}`;
+@HostBinding() id = `example-tel-input-${MyTelInput.nextId++}`;
 ```
 
 #### `placeholder`
@@ -313,11 +313,11 @@ errorState = false;
 This property allows us to specify a unique string for the type of control in form field. The
 `<mat-form-field>` will add an additional class based on this type that can be used to easily apply
 special styles to a `<mat-form-field>` that contains a specific type of control. In this example
-we'll use `my-tel-input` as our control type which will result in the form field adding the class
-`mat-form-field-my-tel-input`.
+we'll use `example-tel-input` as our control type which will result in the form field adding the
+class `mat-form-field-example-tel-input`.
 
 ```ts
-controlType = 'my-tel-input';
+controlType = 'example-tel-input';
 ```
 
 #### `setDescribedByIds(ids: string[])`
@@ -356,7 +356,7 @@ do is place it inside of a `<mat-form-field>`
 
 ```html
 <mat-form-field>
-  <my-tel-input></my-tel-input>
+  <example-tel-input></example-tel-input>
 </mat-form-field>
 ```
 
@@ -366,7 +366,7 @@ the error state).
 
 ```html
 <mat-form-field>
-  <my-tel-input placeholder="Phone number" required></my-tel-input>
+  <example-tel-input placeholder="Phone number" required></example-tel-input>
   <mat-icon matPrefix>phone</mat-icon>
   <mat-hint>Include area code</mat-hint>
 </mat-form-field>
diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
index 2f406e41fcd..9274d42fe95 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app/demo-app.ts
@@ -114,7 +114,7 @@ export class DemoApp {
   }
 
   toggleTheme() {
-    const darkThemeClass = 'unicorn-dark-theme';
+    const darkThemeClass = 'demo-unicorn-dark-theme';
 
     this.dark = !this.dark;
 
diff --git a/src/demo-app/drag-drop/drag-drop-demo.html b/src/demo-app/drag-drop/drag-drop-demo.html
index ecfe44a9298..39ae618d888 100644
--- a/src/demo-app/drag-drop/drag-drop-demo.html
+++ b/src/demo-app/drag-drop/drag-drop-demo.html
@@ -1,5 +1,5 @@
 <div>
-  <div class="list">
+  <div class="demo-list">
     <h2>To do</h2>
     <div
       cdkDrop
@@ -15,7 +15,7 @@
     </div>
   </div>
 
-  <div class="list">
+  <div class="demo-list">
     <h2>Done</h2>
     <div
       cdkDrop
@@ -33,7 +33,7 @@
 </div>
 
 <div>
-  <div class="list horizontal">
+  <div class="demo-list demo-list-horizontal">
     <h2>Horizontal list</h2>
     <div
       cdkDrop
@@ -49,9 +49,9 @@
   </div>
 </div>
 
-<div class="list">
+<div class="demo-list">
   <h2>Free dragging</h2>
-  <div cdkDrag class="free-draggable" [cdkDragLockAxis]="axisLock">Drag me around</div>
+  <div cdkDrag class="demo-free-draggable" [cdkDragLockAxis]="axisLock">Drag me around</div>
 </div>
 
 <div>
diff --git a/src/demo-app/drag-drop/drag-drop-demo.scss b/src/demo-app/drag-drop/drag-drop-demo.scss
index b1ed17ef480..557cb0a49b9 100644
--- a/src/demo-app/drag-drop/drag-drop-demo.scss
+++ b/src/demo-app/drag-drop/drag-drop-demo.scss
@@ -1,4 +1,4 @@
-.list {
+.demo-list {
   width: 500px;
   max-width: 100%;
   margin-bottom: 25px;
@@ -10,12 +10,12 @@
     margin-right: 0;
     margin-left: 25px;
   }
+}
 
-  &.horizontal {
-    width: 1000px;
-    margin-right: 0;
-    margin-left: 0;
-  }
+.demo-list-horizontal {
+  width: 1000px;
+  margin-right: 0;
+  margin-left: 0;
 }
 
 .cdk-drop {
@@ -23,7 +23,7 @@
   min-height: 60px;
   display: block;
 
-  .horizontal & {
+  .demo-list-horizontal & {
     display: flex;
     flex-direction: row;
   }
@@ -42,7 +42,7 @@
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
 
-  .horizontal & {
+  .demo-list-horizontal & {
     border: none;
     border-right: solid 1px #ccc;
     flex-grow: 1;
@@ -72,10 +72,6 @@
   opacity: 0;
 }
 
-.wrapper {
-  border: solid 1px red;
-}
-
 .cdk-drag-handle {
   cursor: move;
 
@@ -88,7 +84,7 @@ pre {
   white-space: normal;
 }
 
-.free-draggable {
+.demo-free-draggable {
   width: 200px;
   height: 200px;
   border: solid 1px #ccc;
diff --git a/src/demo-app/screen-type/screen-type-demo.html b/src/demo-app/screen-type/screen-type-demo.html
index 738a872f939..b2843e0f2e9 100644
--- a/src/demo-app/screen-type/screen-type-demo.html
+++ b/src/demo-app/screen-type/screen-type-demo.html
@@ -1,27 +1,27 @@
 <h2>Screen Type</h2>
 
 <mat-grid-list cols="6" rowHeight="1:2">
-  <mat-grid-tile [class.active]="(isHandset | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isHandset | async)?.matches"
                 colspan="2">
     <mat-icon>smartphone</mat-icon>
     <p>Handset</p>
   </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isTablet | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isTablet | async)?.matches"
                 colspan="2">
     <mat-icon>tablet_android</mat-icon>
     <p>Tablet</p>
   </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isWeb | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isWeb | async)?.matches"
                 colspan="2">
     <mat-icon>laptop</mat-icon>
     <p>Web</p>
   </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isPortrait | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isPortrait | async)?.matches"
                 colspan="3">
     <mat-icon>stay_current_portrait</mat-icon>
     <p>Portrait</p>
   </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isLandscape | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isLandscape | async)?.matches"
                 colspan="3">
     <mat-icon>stay_current_landscape</mat-icon>
     <p>Landscape</p>
diff --git a/src/demo-app/screen-type/screen-type-demo.scss b/src/demo-app/screen-type/screen-type-demo.scss
index e206b7d99ff..055048e12d8 100644
--- a/src/demo-app/screen-type/screen-type-demo.scss
+++ b/src/demo-app/screen-type/screen-type-demo.scss
@@ -10,10 +10,10 @@
   .mat-figure {
     flex-direction: column;
   }
+}
 
-  &.active {
-    background: rgba(0, 0, 0, 0.12);
-  }
+.demo-tile-active {
+  background: rgba(0, 0, 0, 0.12);
 }
 
 h2 {
diff --git a/src/demo-app/theme.scss b/src/demo-app/theme.scss
index 7ac9474e574..425af8f6a1c 100644
--- a/src/demo-app/theme.scss
+++ b/src/demo-app/theme.scss
@@ -24,7 +24,8 @@ $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
 // Include the alternative theme styles inside of a block with a CSS class. You can make this
 // CSS class whatever you want. In this example, any component inside of an element with
-// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
-.unicorn-dark-theme {
+// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
+// default theme.
+.demo-unicorn-dark-theme {
   @include angular-material-theme($dark-theme);
 }
diff --git a/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.css b/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.css
index d43c1c92ae1..b1a4f82cafd 100644
--- a/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.css
+++ b/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.css
@@ -1,19 +1,19 @@
-.spacer {
+.demo-spacer {
   background: #3f51b5;
   margin-bottom: 10px;
 }
 
-.spacer.vertical {
+.demo-spacer-vertical {
   width: 100px;
   height: 3000px;
 }
 
-.spacer.horizontal {
+.demo-spacer-horizontal {
   width: 3000px;
   height: 100px;
 }
 
-.scroller {
+.demo-scroller {
   width: 100px;
   height: 100px;
   overflow: auto;
@@ -22,7 +22,7 @@
   left: 200px;
 }
 
-.scroller-spacer {
+.demo-scroller-spacer {
   width: 200px;
   height: 200px;
   background: #ff4081;
diff --git a/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.html b/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.html
index 294c7f16357..cabcda15e99 100644
--- a/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.html
+++ b/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.html
@@ -2,9 +2,9 @@
   <button id="enable" (click)="scrollStrategy.enable()">Enable scroll blocking</button>
   <button id="disable" (click)="scrollStrategy.disable()">Disable scroll blocking</button>
 </p>
-<div class="spacer vertical"></div>
+<div class="demo-spacer demo-spacer-vertical"></div>
 <!-- this one needs a tabindex so protractor can trigger key presses inside it -->
-<div class="scroller" id="scroller" tabindex="-1">
-  <div class="scroller-spacer"></div>
+<div class="demo-scroller" id="scroller" tabindex="-1">
+  <div class="demo-scroller-spacer"></div>
 </div>
-<div class="spacer horizontal"></div>
+<div class="demo-spacer demo-spacer-horizontal"></div>
diff --git a/src/material-examples/button-types/button-types-example.css b/src/material-examples/button-types/button-types-example.css
index d9ce5779bcc..34087886392 100644
--- a/src/material-examples/button-types/button-types-example.css
+++ b/src/material-examples/button-types/button-types-example.css
@@ -1,4 +1,4 @@
-.button-row button,
-.button-row a {
+.example-button-row button,
+.example-button-row a {
   margin-right: 8px;
 }
diff --git a/src/material-examples/button-types/button-types-example.html b/src/material-examples/button-types/button-types-example.html
index 710c1415831..829fd13f94d 100644
--- a/src/material-examples/button-types/button-types-example.html
+++ b/src/material-examples/button-types/button-types-example.html
@@ -1,5 +1,5 @@
 <h3>Basic Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-button>Basic</button>
   <button mat-button color="primary">Primary</button>
   <button mat-button color="accent">Accent</button>
@@ -9,7 +9,7 @@
 </div>
 
 <h3>Raised Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-raised-button>Basic</button>
   <button mat-raised-button color="primary">Primary</button>
   <button mat-raised-button color="accent">Accent</button>
@@ -19,7 +19,7 @@
 </div>
 
 <h3>Stroked Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-stroked-button>Basic</button>
   <button mat-stroked-button color="primary">Primary</button>
   <button mat-stroked-button color="accent">Accent</button>
@@ -29,7 +29,7 @@
 </div>
 
 <h3>Flat Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-flat-button>Basic</button>
   <button mat-flat-button color="primary">Primary</button>
   <button mat-flat-button color="accent">Accent</button>
@@ -39,7 +39,7 @@
 </div>
 
 <h3>Icon Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-icon-button>
     <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
@@ -58,7 +58,7 @@
 </div>
 
 <h3>Fab Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-fab>Basic</button>
   <button mat-fab color="primary">Primary</button>
   <button mat-fab color="accent">Accent</button>
@@ -71,7 +71,7 @@
 </div>
 
 <h3>Mini Fab Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-mini-fab>Basic</button>
   <button mat-mini-fab color="primary">Primary</button>
   <button mat-mini-fab color="accent">Accent</button>
@@ -81,4 +81,4 @@
     <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <a mat-mini-fab routerLink=".">Link</a>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css b/src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css
index d093b60602e..7123ff1f868 100644
--- a/src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css
+++ b/src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css
@@ -1,4 +1,4 @@
-.box {
+.example-box {
   width: 200px;
   height: 200px;
   border: solid 1px #ccc;
@@ -19,7 +19,7 @@
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-.box:active {
+.example-box:active {
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
               0 8px 10px 1px rgba(0, 0, 0, 0.14),
               0 3px 14px 2px rgba(0, 0, 0, 0.12);
diff --git a/src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.html b/src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.html
index af7b2bbfbb0..df4d2893efa 100644
--- a/src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.html
+++ b/src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.html
@@ -1,7 +1,7 @@
-<div class="box" cdkDragLockAxis="y" cdkDrag>
+<div class="example-box" cdkDragLockAxis="y" cdkDrag>
   I can only be dragged up/down
 </div>
 
-<div class="box" cdkDragLockAxis="x" cdkDrag>
+<div class="example-box" cdkDragLockAxis="x" cdkDrag>
   I can only be dragged left/right
 </div>
diff --git a/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css b/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css
index 37cbc09bc44..7d9159be830 100644
--- a/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css
+++ b/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css
@@ -1,4 +1,4 @@
-.container {
+.example-container {
   width: 400px;
   max-width: 100%;
   margin: 0 25px 25px 0;
@@ -6,7 +6,7 @@
   vertical-align: top;
 }
 
-.list {
+.example-list {
   border: solid 1px #ccc;
   min-height: 60px;
   background: white;
@@ -15,7 +15,7 @@
   display: block;
 }
 
-.box {
+.example-box {
   padding: 20px 10px;
   border-bottom: solid 1px #ccc;
   color: rgba(0, 0, 0, 0.87);
@@ -45,10 +45,10 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.box:last-child {
+.example-box:last-child {
   border: none;
 }
 
-.list.cdk-drop-dragging .box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
diff --git a/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html b/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html
index 7d0d3bd8ec1..c43face3f07 100644
--- a/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html
+++ b/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="example-container">
   <h2>To do</h2>
 
   <div
@@ -6,13 +6,13 @@
     #todoList="cdkDrop"
     [cdkDropData]="todo"
     [cdkDropConnectedTo]="[doneList]"
-    class="list"
+    class="example-list"
     (cdkDropDropped)="drop($event)">
-    <div class="box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
+    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
   </div>
 </div>
 
-<div class="container">
+<div class="example-container">
   <h2>Done</h2>
 
   <div
@@ -20,9 +20,9 @@
     #doneList="cdkDrop"
     [cdkDropData]="done"
     [cdkDropConnectedTo]="[todoList]"
-    class="list"
+    class="example-list"
     (cdkDropDropped)="drop($event)">
-    <div class="box" *ngFor="let item of done" cdkDrag>{{item}}</div>
+    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
   </div>
 </div>
 
diff --git a/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css b/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css
index e7fb757cbd4..04874275cf3 100644
--- a/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css
+++ b/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css
@@ -1,4 +1,4 @@
-.list {
+.example-list {
   width: 500px;
   max-width: 100%;
   border: solid 1px #ccc;
@@ -9,7 +9,7 @@
   overflow: hidden;
 }
 
-.box {
+.example-box {
   padding: 20px 10px;
   border-bottom: solid 1px #ccc;
   color: rgba(0, 0, 0, 0.87);
@@ -39,10 +39,10 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.box:last-child {
+.example-box:last-child {
   border: none;
 }
 
-.list.cdk-drop-dragging .box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
diff --git a/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html b/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html
index 8b40f69d067..b34c04eaf9a 100644
--- a/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html
+++ b/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html
@@ -1,5 +1,5 @@
-<div cdkDrop class="list" (cdkDropDropped)="drop($event)">
-  <div class="box" *ngFor="let movie of movies" cdkDrag>
+<div cdkDrop class="example-list" (cdkDropDropped)="drop($event)">
+  <div class="example-box" *ngFor="let movie of movies" cdkDrag>
     {{movie.title}}
     <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
   </div>
diff --git a/src/material-examples/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css b/src/material-examples/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css
index 2a246fa347f..a11481e2585 100644
--- a/src/material-examples/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css
+++ b/src/material-examples/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css
@@ -1,4 +1,4 @@
-.box {
+.example-box {
   width: 200px;
   height: 200px;
   padding: 10px;
@@ -19,13 +19,13 @@
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-.box:active {
+.example-box:active {
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
               0 8px 10px 1px rgba(0, 0, 0, 0.14),
               0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
-.handle {
+.example-handle {
   position: absolute;
   top: 10px;
   right: 10px;
diff --git a/src/material-examples/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html b/src/material-examples/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html
index c925aac1f9a..368f748ea39 100644
--- a/src/material-examples/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html
+++ b/src/material-examples/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html
@@ -1,7 +1,7 @@
-<div class="box" cdkDrag>
+<div class="example-box" cdkDrag>
   I can only be dragged using the handle
 
-  <div class="handle" cdkDragHandle>
+  <div class="example-handle" cdkDragHandle>
     <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
       <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
       <path d="M0 0h24v24H0z" fill="none"></path>
diff --git a/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css b/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css
index 60151ea45ec..2272ce64d1c 100644
--- a/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css
+++ b/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css
@@ -1,4 +1,4 @@
-.list {
+.example-list {
   width: 1000px;
   max-width: 100%;
   border: solid 1px #ccc;
@@ -10,7 +10,7 @@
   overflow: hidden;
 }
 
-.box {
+.example-box {
   padding: 20px 10px;
   border-right: solid 1px #ccc;
   color: rgba(0, 0, 0, 0.87);
@@ -42,10 +42,10 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.box:last-child {
+.example-box:last-child {
   border: none;
 }
 
-.list.cdk-drop-dragging .box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
diff --git a/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html b/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html
index 1c0aa1d37b8..29497e12c46 100644
--- a/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html
+++ b/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html
@@ -1,3 +1,3 @@
-<div cdkDrop cdkDropOrientation="horizontal" class="list" (cdkDropDropped)="drop($event)">
-  <div class="box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
+<div cdkDrop cdkDropOrientation="horizontal" class="example-list" (cdkDropDropped)="drop($event)">
+  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
 </div>
diff --git a/src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css b/src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css
index 0b5b047412b..1e725e0ee13 100644
--- a/src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css
+++ b/src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css
@@ -1,4 +1,4 @@
-.box {
+.example-box {
   width: 200px;
   height: 200px;
   border: solid 1px #ccc;
@@ -18,7 +18,7 @@
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-.box:active {
+.example-box:active {
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
               0 8px 10px 1px rgba(0, 0, 0, 0.14),
               0 3px 14px 2px rgba(0, 0, 0, 0.12);
diff --git a/src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.html b/src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.html
index b4701deac3f..39badfd5efb 100644
--- a/src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.html
+++ b/src/material-examples/cdk-drag-drop-overview/cdk-drag-drop-overview-example.html
@@ -1,3 +1,3 @@
-<div class="box" cdkDrag>
+<div class="example-box" cdkDrag>
   Drag me around
 </div>
diff --git a/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css b/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css
index 49bf8b13e7e..b54b269f056 100644
--- a/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css
+++ b/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css
@@ -1,4 +1,4 @@
-.dialog-content {
+.example-dialog-content {
   width: 200px;
   height: 200px;
   border: solid 1px #ccc;
@@ -15,7 +15,7 @@
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-.dialog-content:active {
+.example-dialog-content:active {
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
               0 8px 10px 1px rgba(0, 0, 0, 0.14),
               0 3px 14px 2px rgba(0, 0, 0, 0.12);
diff --git a/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.html b/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.html
index 005f6de708b..3ae7f503ad4 100644
--- a/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.html
+++ b/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.html
@@ -1,7 +1,7 @@
 <button (click)="openDialog()">Open a draggable dialog</button>
 
 <ng-template>
-  <div class="dialog-content" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
+  <div class="example-dialog-content" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
     Drag the dialog around!
   </div>
 </ng-template>
diff --git a/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css b/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css
index e7fb757cbd4..04874275cf3 100644
--- a/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css
+++ b/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css
@@ -1,4 +1,4 @@
-.list {
+.example-list {
   width: 500px;
   max-width: 100%;
   border: solid 1px #ccc;
@@ -9,7 +9,7 @@
   overflow: hidden;
 }
 
-.box {
+.example-box {
   padding: 20px 10px;
   border-bottom: solid 1px #ccc;
   color: rgba(0, 0, 0, 0.87);
@@ -39,10 +39,10 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.box:last-child {
+.example-box:last-child {
   border: none;
 }
 
-.list.cdk-drop-dragging .box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
diff --git a/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html b/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html
index 5f7e231fbc4..7f130b0ae00 100644
--- a/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html
+++ b/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html
@@ -1,3 +1,3 @@
-<div cdkDrop class="list" (cdkDropDropped)="drop($event)">
-  <div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
+<div cdkDrop class="example-list" (cdkDropDropped)="drop($event)">
+  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
 </div>
diff --git a/src/material-examples/form-field-custom-control/my-tel-input-example.css b/src/material-examples/form-field-custom-control/example-tel-input-example.css
similarity index 57%
rename from src/material-examples/form-field-custom-control/my-tel-input-example.css
rename to src/material-examples/form-field-custom-control/example-tel-input-example.css
index 30825392af5..3c1dbad8f58 100644
--- a/src/material-examples/form-field-custom-control/my-tel-input-example.css
+++ b/src/material-examples/form-field-custom-control/example-tel-input-example.css
@@ -1,8 +1,8 @@
-.my-tel-input-container {
+.example-tel-input-container {
   display: flex;
 }
 
-.my-tel-input-element {
+.example-tel-input-element {
   border: none;
   background: none;
   padding: 0;
@@ -11,11 +11,11 @@
   text-align: center;
 }
 
-.my-tel-input-spacer {
+.example-tel-input-spacer {
   opacity: 0;
   transition: opacity 200ms;
 }
 
-:host.floating .my-tel-input-spacer {
+:host.example-floating .example-tel-input-spacer {
   opacity: 1;
 }
diff --git a/src/material-examples/form-field-custom-control/example-tel-input-example.html b/src/material-examples/form-field-custom-control/example-tel-input-example.html
new file mode 100644
index 00000000000..c38f74f4e83
--- /dev/null
+++ b/src/material-examples/form-field-custom-control/example-tel-input-example.html
@@ -0,0 +1,7 @@
+<div [formGroup]="parts" class="example-tel-input-container">
+  <input class="example-tel-input-element" formControlName="area" size="3">
+  <span class="example-tel-input-spacer">&ndash;</span>
+  <input class="example-tel-input-element" formControlName="exchange" size="3">
+  <span class="example-tel-input-spacer">&ndash;</span>
+  <input class="example-tel-input-element" formControlName="subscriber" size="4">
+</div>
diff --git a/src/material-examples/form-field-custom-control/form-field-custom-control-example.html b/src/material-examples/form-field-custom-control/form-field-custom-control-example.html
index 6ff0a3ba597..26df09b44d4 100644
--- a/src/material-examples/form-field-custom-control/form-field-custom-control-example.html
+++ b/src/material-examples/form-field-custom-control/form-field-custom-control-example.html
@@ -1,5 +1,5 @@
 <mat-form-field>
-  <my-tel-input placeholder="Phone number" required></my-tel-input>
+  <example-tel-input placeholder="Phone number" required></example-tel-input>
   <mat-icon matSuffix>phone</mat-icon>
   <mat-hint>Include area code</mat-hint>
 </mat-form-field>
diff --git a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
index 36baee5f9b5..27ba34b0af7 100644
--- a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
+++ b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
@@ -20,12 +20,12 @@ export class MyTel {
 
 /** Custom `MatFormFieldControl` for telephone number input. */
 @Component({
-  selector: 'my-tel-input',
-  templateUrl: 'my-tel-input-example.html',
-  styleUrls: ['my-tel-input-example.css'],
+  selector: 'example-tel-input',
+  templateUrl: 'example-tel-input-example.html',
+  styleUrls: ['example-tel-input-example.css'],
   providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}],
   host: {
-    '[class.floating]': 'shouldLabelFloat',
+    '[class.example-floating]': 'shouldLabelFloat',
     '[id]': 'id',
     '[attr.aria-describedby]': 'describedBy',
   }
@@ -38,8 +38,8 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
   focused = false;
   ngControl = null;
   errorState = false;
-  controlType = 'my-tel-input';
-  id = `my-tel-input-${MyTelInput.nextId++}`;
+  controlType = 'example-tel-input';
+  id = `example-tel-input-${MyTelInput.nextId++}`;
   describedBy = '';
 
   get empty() {
diff --git a/src/material-examples/form-field-custom-control/my-tel-input-example.html b/src/material-examples/form-field-custom-control/my-tel-input-example.html
deleted file mode 100644
index 8c1befc6b6e..00000000000
--- a/src/material-examples/form-field-custom-control/my-tel-input-example.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div [formGroup]="parts" class="my-tel-input-container">
-  <input class="my-tel-input-element" formControlName="area" size="3">
-  <span class="my-tel-input-spacer">&ndash;</span>
-  <input class="my-tel-input-element" formControlName="exchange" size="3">
-  <span class="my-tel-input-spacer">&ndash;</span>
-  <input class="my-tel-input-element" formControlName="subscriber" size="4">
-</div>
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.css b/src/universal-app/kitchen-sink/kitchen-sink.css
deleted file mode 100644
index c160ab1e002..00000000000
--- a/src/universal-app/kitchen-sink/kitchen-sink.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.kitchen-sink {
-  color: lightsteelblue;
-}
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts
index 38991f6b6b4..5e3615ca015 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.ts
+++ b/src/universal-app/kitchen-sink/kitchen-sink.ts
@@ -67,7 +67,6 @@ export class TestEntryComponent {}
 @Component({
   selector: 'kitchen-sink',
   templateUrl: './kitchen-sink.html',
-  styleUrls: ['./kitchen-sink.css'],
 })
 export class KitchenSink {
 
diff --git a/stylelint-config.json b/stylelint-config.json
index 763ab626baf..3fd0c398e7f 100644
--- a/stylelint-config.json
+++ b/stylelint-config.json
@@ -88,6 +88,9 @@
     "no-missing-end-of-source-newline": true,
     "no-eol-whitespace": true,
     "max-line-length": 100,
-    "linebreaks": "unix"
+    "linebreaks": "unix",
+    "selector-class-pattern": ["^_?(mat-|cdk-|example-|demo-|dashboard-|ng-)", {
+      "resolveNestedSelectors": true
+    }]
   }
 }
diff --git a/tools/dashboard/src/app/coverage-chart/coverage-chart.html b/tools/dashboard/src/app/coverage-chart/coverage-chart.html
index 24f20199ced..e11205eb598 100644
--- a/tools/dashboard/src/app/coverage-chart/coverage-chart.html
+++ b/tools/dashboard/src/app/coverage-chart/coverage-chart.html
@@ -15,7 +15,7 @@
   [autoScale]="true">
 </ngx-charts-line-chart>
 
-<mat-spinner *ngIf="!chartData.length" class="panel-loading-indicator"
+<mat-spinner *ngIf="!chartData.length" class="dashboard-panel-loading-indicator"
              [diameter]="50"
              [strokeWidth]="5">
 </mat-spinner>
diff --git a/tools/dashboard/src/app/payload-chart/payload-chart.html b/tools/dashboard/src/app/payload-chart/payload-chart.html
index 24f20199ced..e11205eb598 100644
--- a/tools/dashboard/src/app/payload-chart/payload-chart.html
+++ b/tools/dashboard/src/app/payload-chart/payload-chart.html
@@ -15,7 +15,7 @@
   [autoScale]="true">
 </ngx-charts-line-chart>
 
-<mat-spinner *ngIf="!chartData.length" class="panel-loading-indicator"
+<mat-spinner *ngIf="!chartData.length" class="dashboard-panel-loading-indicator"
              [diameter]="50"
              [strokeWidth]="5">
 </mat-spinner>
diff --git a/tools/dashboard/src/styles.scss b/tools/dashboard/src/styles.scss
index e3ff923218a..0305ec1a44e 100644
--- a/tools/dashboard/src/styles.scss
+++ b/tools/dashboard/src/styles.scss
@@ -6,7 +6,7 @@ body, html {
   min-height: 100vh;
 }
 
-.panel-loading-indicator {
+.dashboard-panel-loading-indicator {
   position: absolute;
 
   top: calc(50% - #{$panel-loading-indicator-diameter});