diff --git a/core/modules/contextual/css/contextual.icons.css b/core/modules/contextual/css/contextual.icons.css
index 70363a7..daf33a7 100644
--- a/core/modules/contextual/css/contextual.icons.css
+++ b/core/modules/contextual/css/contextual.icons.css
@@ -6,11 +6,11 @@
 /**
  * Toolbar tab icon.
  */
-.toolbar-bar .toolbar-icon-edit:before {
+.js-toolbar-bar .toolbar-icon-edit:before {
   background-image: url(../../../misc/icons/bebebe/pencil.svg);
 }
-.toolbar-bar .toolbar-icon-edit:active:before,
-.toolbar-bar .toolbar-icon-edit.active:before {
+.js-toolbar-bar .toolbar-icon-edit:active:before,
+.js-toolbar-bar .toolbar-icon-edit.active:before {
   background-image: url(../../../misc/icons/ffffff/pencil.svg);
 }
 
diff --git a/core/modules/contextual/css/contextual.toolbar.css b/core/modules/contextual/css/contextual.toolbar.css
index bda844c..63a2c9f 100644
--- a/core/modules/contextual/css/contextual.toolbar.css
+++ b/core/modules/contextual/css/contextual.toolbar.css
@@ -4,27 +4,27 @@
  */
 
 /* Tab appearance. */
-.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
+.js-toolbar .js-toolbar-bar .contextual-toolbar-tab.js-toolbar-tab {
   float: right; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
+[dir="rtl"] .js-toolbar .js-toolbar-bar .contextual-toolbar-tab.js-toolbar-tab {
   float: left;
 }
-.toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item {
+.js-toolbar .js-toolbar-bar .contextual-toolbar-tab .js-toolbar-item {
   margin: 0;
   /* Hide tab text. */
   padding-left: 1.3333em; /* LTR */
   text-indent: -9999px;
 }
-[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item {
+[dir="rtl"] .js-toolbar .js-toolbar-bar .contextual-toolbar-tab .js-toolbar-item {
   padding-right: 1.3333em;
 }
-.toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item.active {
+.js-toolbar .js-toolbar-bar .contextual-toolbar-tab .toolbar-item.active {
   background-image:-webkit-linear-gradient(rgb(78,159,234) 0%, rgb(69,132,221) 100%);
   background-image:linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
 }
 
 /* @todo get rid of this declaration by making toolbar.module's CSS less specific */
-.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab.hidden {
+.js-toolbar .js-toolbar-bar .contextual-toolbar-tab.js-toolbar-tab.hidden {
   display: none;
 }
diff --git a/core/modules/contextual/js/contextual.toolbar.js b/core/modules/contextual/js/contextual.toolbar.js
index 4641890..119520d 100644
--- a/core/modules/contextual/js/contextual.toolbar.js
+++ b/core/modules/contextual/js/contextual.toolbar.js
@@ -35,7 +35,7 @@
     });
 
     var viewOptions = {
-      el: $('.toolbar .toolbar-bar .contextual-toolbar-tab'),
+      el: $('.js-toolbar .js-toolbar-bar .contextual-toolbar-tab'),
       model: model,
       strings: strings
     };
diff --git a/core/modules/shortcut/css/shortcut.icons.css b/core/modules/shortcut/css/shortcut.icons.css
index 18b15d7..3c56db9 100644
--- a/core/modules/shortcut/css/shortcut.icons.css
+++ b/core/modules/shortcut/css/shortcut.icons.css
@@ -6,11 +6,11 @@
 /**
  * Toolbar tab icon.
  */
-.toolbar-bar .toolbar-icon-shortcut:before {
+.js-toolbar-bar .toolbar-icon-shortcut:before {
   background-image: url(../../../misc/icons/bebebe/star.svg);
 }
-.toolbar-bar .toolbar-icon-shortcut:active:before,
-.toolbar-bar .toolbar-icon-shortcut.active:before {
+.js-toolbar-bar .toolbar-icon-shortcut:active:before,
+.js-toolbar-bar .toolbar-icon-shortcut.active:before {
   background-image: url(../../../misc/icons/ffffff/star.svg);
 }
 
diff --git a/core/modules/shortcut/css/shortcut.theme.css b/core/modules/shortcut/css/shortcut.theme.css
index 1d1405f..d287c20 100644
--- a/core/modules/shortcut/css/shortcut.theme.css
+++ b/core/modules/shortcut/css/shortcut.theme.css
@@ -9,17 +9,17 @@
 .edit-shortcuts {
   display: block;
 }
-.toolbar .toolbar-tray-vertical .edit-shortcuts {
+.js-toolbar .toolbar-tray-vertical .edit-shortcuts {
   text-align: right; /* LTR */
   padding: 1em;
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .edit-shortcuts {
+[dir="rtl"] .js-toolbar .toolbar-tray-vertical .edit-shortcuts {
   text-align: left;
 }
-.toolbar .toolbar-tray-horizontal .edit-shortcuts {
+.js-toolbar .toolbar-tray-horizontal .edit-shortcuts {
   float: right; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .edit-shortcuts {
+[dir="rtl"] .js-toolbar .toolbar-tray-horizontal .edit-shortcuts {
   float: left;
 }
 
diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css
index 0122c91..f827f08 100644
--- a/core/modules/toolbar/css/toolbar.icons.css
+++ b/core/modules/toolbar/css/toolbar.icons.css
@@ -3,15 +3,15 @@
  * Styling for toolbar module icons.
  */
 
-.toolbar .toolbar-icon {
+.js-toolbar .toolbar-icon {
   padding-left: 2.75em; /* LTR */
   position: relative;
 }
-[dir="rtl"] .toolbar .toolbar-icon {
+[dir="rtl"] .js-toolbar .toolbar-icon {
   padding-left: 1.3333em;
   padding-right: 2.75em;
 }
-.toolbar .toolbar-icon:before {
+.js-toolbar .toolbar-icon:before {
   background-attachment: scroll;
   background-color: transparent;
   background-position: center center;
@@ -25,36 +25,36 @@
   top: 0;
   width: 20px;
 }
-[dir="rtl"] .toolbar .toolbar-icon:before {
+[dir="rtl"] .js-toolbar .toolbar-icon:before {
   left: auto;
   right: 0.6667em;
 }
-.toolbar button.toolbar-icon {
+.js-toolbar button.toolbar-icon {
   background-color: transparent;
   border: 0;
   font-size: 1em;
 }
-.toolbar .menu ul .toolbar-icon {
+.js-toolbar .menu ul .toolbar-icon {
   padding-left: 1.3333em; /* LTR */
 }
-[dir="rtl"] .toolbar .menu ul .toolbar-icon {
+[dir="rtl"] .js-toolbar .menu ul .toolbar-icon {
   padding-left: 0;
   padding-right: 1.3333em;
 }
-.toolbar .menu ul a.toolbar-icon:before {
+.js-toolbar .menu ul a.toolbar-icon:before {
   display: none;
 }
-.toolbar .toolbar-tray-vertical .menu ul a {
+.js-toolbar .toolbar-tray-vertical .menu ul a {
   padding-left: 2.75em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .menu ul a {
+[dir="rtl"] .js-toolbar .toolbar-tray-vertical .menu ul a {
   padding-left: 0;
   padding-right: 2.75em;
 }
-.toolbar .toolbar-tray-vertical .menu ul ul a {
+.js-toolbar .toolbar-tray-vertical .menu ul ul a {
   padding-left: 3.75em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .menu ul ul a {
+[dir="rtl"] .js-toolbar .toolbar-tray-vertical .menu ul ul a {
   padding-left: 0;
   padding-right: 3.75em;
 }
@@ -62,18 +62,18 @@
 /**
  * Top level icons.
  */
-.toolbar-bar .toolbar-icon-menu:before {
+.js-toolbar-bar .toolbar-icon-menu:before {
   background-image: url(../../../misc/icons/bebebe/hamburger.svg);
 }
-.toolbar-bar .toolbar-icon-menu:active:before,
-.toolbar-bar .toolbar-icon-menu.active:before {
+.js-toolbar-bar .toolbar-icon-menu:active:before,
+.js-toolbar-bar .toolbar-icon-menu.active:before {
   background-image: url(../../../misc/icons/ffffff/hamburger.svg);
 }
-.toolbar-bar .toolbar-icon-help:before {
+.js-toolbar-bar .toolbar-icon-help:before {
   background-image: url(../../../misc/icons/bebebe/questionmark-disc.svg);
 }
-.toolbar-bar .toolbar-icon-help:active:before,
-.toolbar-bar .toolbar-icon-help.active:before {
+.js-toolbar-bar .toolbar-icon-help:active:before,
+.js-toolbar-bar .toolbar-icon-help.active:before {
   background-image: url(../../../misc/icons/ffffff/questionmark-disc.svg);
 }
 
@@ -136,12 +136,12 @@
 .toolbar-icon-help-main.active:before {
   background-image: url(../../../misc/icons/000000/questionmark-disc.svg);
 }
-.toolbar .toolbar-bar .toolbar-icon:before {
+.js-toolbar .js-toolbar-bar .toolbar-icon:before {
   min-height: 3em;
 }
 
 @media only screen and (min-width: 16.5em) {
-  .toolbar .toolbar-bar .toolbar-icon {
+  .js-toolbar .js-toolbar-bar .toolbar-icon {
     margin-left: 0;
     margin-right: 0;
     padding-left: 0;
@@ -149,36 +149,36 @@
     text-indent: -9999px;
     width: 4em;
   }
-  .toolbar .toolbar-bar .toolbar-icon:before {
+  .js-toolbar .js-toolbar-bar .toolbar-icon:before {
     background-size: 42% auto;
     left: 0; /* LTR */
     width: 100%;
   }
-  [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
+  [dir="rtl"] .js-toolbar .js-toolbar-bar .toolbar-icon:before {
     left: auto;
     right: 0;
   }
 }
 
 @media only screen and (min-width: 36em) {
-  .toolbar .toolbar-bar .toolbar-icon {
+  .js-toolbar .js-toolbar-bar .toolbar-icon {
     background-position: left center; /* LTR */
     padding-left: 2.75em; /* LTR */
     padding-right: 1.3333em; /* LTR */
     text-indent: 0;
     width: auto;
   }
-  [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon {
+  [dir="rtl"] .js-toolbar .js-toolbar-bar .toolbar-icon {
     background-position: right center;
     padding-left: 1.3333em;
     padding-right: 2.75em;
   }
-  .toolbar .toolbar-bar .toolbar-icon:before {
+  .js-toolbar .js-toolbar-bar .toolbar-icon:before {
     background-size: 100% auto;
     left: 0.6667em; /* LTR */
     width: 20px;
   }
-  [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
+  [dir="rtl"] .js-toolbar .js-toolbar-bar .toolbar-icon:before {
     left: 0;
     right: 0.6667em;
   }
@@ -187,18 +187,18 @@
 /**
  *  Accessibility/focus
  */
-.toolbar-tab a {
+.js-toolbar-tab a {
   border-left: 2px solid transparent; /* LTR */
 }
-[dir="rtl"] .toolbar-tab a {
+[dir="rtl"] .js-toolbar-tab a {
   border-left: none;
   border-right: 2px solid transparent;
 }
-.toolbar-tab a:focus {
+.js-toolbar-tab a:focus {
   outline: none;
   border-color: #ddd;
 }
-.toolbar-lining button:focus {
+.js-toolbar-lining button:focus {
   outline: none;
 }
 .toolbar-tray-horizontal a,
@@ -220,7 +220,7 @@
 .toolbar-box a:hover:focus {
   text-decoration: underline;
 }
-.toolbar .toolbar-icon.toolbar-handle:focus {
+.js-toolbar .toolbar-icon.toolbar-handle:focus {
   outline: none;
   background-color: #f5f5f5;
 }
@@ -229,47 +229,47 @@
 /**
  * Handle.
  */
-.toolbar .toolbar-icon.toolbar-handle {
+.js-toolbar .toolbar-icon.toolbar-handle {
   width: 3em;
   text-indent: -9999px;
 }
-.toolbar .toolbar-icon.toolbar-handle:before {
+.js-toolbar .toolbar-icon.toolbar-handle:before {
   background-image: url(../../../misc/icons/5181c6/chevron-disc-down.svg);
 }
-.toolbar .toolbar-icon.toolbar-handle.open:before {
+.js-toolbar .toolbar-icon.toolbar-handle.open:before {
   background-image: url(../../../misc/icons/787878/chevron-disc-up.svg);
 }
-.toolbar .menu .menu .toolbar-icon.toolbar-handle:before {
+.js-toolbar .menu .menu .toolbar-icon.toolbar-handle:before {
   background-image: url(../../../misc/icons/5181c6/twistie-down.svg);
   background-size: 75%;
 }
-.toolbar .menu .menu .toolbar-icon.toolbar-handle.open:before {
+.js-toolbar .menu .menu .toolbar-icon.toolbar-handle.open:before {
   background-image: url(../../../misc/icons/787878/twistie-up.svg);
   background-size: 75%;
 }
-.toolbar .toolbar-icon-escape-admin:before {
+.js-toolbar .toolbar-icon-escape-admin:before {
   background-image: url(../../../misc/icons/bebebe/chevron-disc-left.svg);
 }
-[dir="rtl"] .toolbar .toolbar-icon-escape-admin:before {
+[dir="rtl"] .js-toolbar .toolbar-icon-escape-admin:before {
   background-image: url(../../../misc/icons/bebebe/chevron-disc-right.svg);
 }
 /**
  * Orientation toggle.
  */
-.toolbar .toolbar-toggle-orientation button {
+.js-toolbar .toolbar-toggle-orientation button {
   height: 16px;
   padding: 0;
   text-indent: -999em;
   width: 20px;
 }
-.toolbar .toolbar-toggle-orientation button:before {
+.js-toolbar .toolbar-toggle-orientation button:before {
   left: 0; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-toggle-orientation button:before {
+[dir="rtl"] .js-toolbar .toolbar-toggle-orientation button:before {
   left: auto;
   right: 0;
 }
-[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
+[dir="rtl"] .js-toolbar .toolbar-toggle-orientation .toolbar-icon {
   padding-right: 0;
 }
 /**
@@ -277,25 +277,25 @@
  * RTL text direction and no SVG support, this little icon requires some very
  * specific targeting, setting and unsetting.
  */
-.toolbar .toolbar-toggle-orientation [value="vertical"]:before {
+.js-toolbar .js-toolbar-toggle-orientation [value="vertical"]:before {
   background-image: url(../../../misc/icons/bebebe/push-left.svg); /* LTR */
 }
-.toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
-.toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before
+.js-toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
+.js-toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before
  {
   background-image: url(../../../misc/icons/787878/push-left.svg); /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
+[dir="rtl"] .js-toolbar .toolbar-toggle-orientation [value="vertical"]:before {
   background-image: url(../../../misc/icons/bebebe/push-right.svg);
 }
-[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
-[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
+[dir="rtl"] .js-toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
+[dir="rtl"] .js-toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
   background-image: url(../../../misc/icons/787878/push-right.svg);
 }
-.toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
+.js-toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
   background-image: url(../../../misc/icons/bebebe/push-up.svg);
 }
-.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before {
+.js-toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before {
   background-image: url(../../../misc/icons/787878/push-up.svg);
 }
 
diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/modules/toolbar/css/toolbar.menu.css
index 5e70a02..09b754e 100644
--- a/core/modules/toolbar/css/toolbar.menu.css
+++ b/core/modules/toolbar/css/toolbar.menu.css
@@ -1,35 +1,35 @@
 /**
  * @file toolbar.menu.css
  */
-.toolbar .menu,
-[dir="rtl"] .toolbar .menu {
+.js-toolbar .menu,
+[dir="rtl"] .js-toolbar .menu {
   list-style: none;
   margin: 0;
   padding: 0;
 }
-.toolbar .toolbar-box {
+.js-toolbar .toolbar-box {
   display: block;
   line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */
   position: relative;
   width: auto;
 }
-.toolbar .toolbar-tray-horizontal .menu .toolbar-handle,
-.toolbar .toolbar-tray-horizontal .menu ul,
-.toolbar .toolbar-tray-vertical .menu ul {
+.js-toolbar .toolbar-tray-horizontal .menu .toolbar-handle,
+.js-toolbar .toolbar-tray-horizontal .menu ul,
+.js-toolbar .toolbar-tray-vertical .menu ul {
   display: none;
 }
-.toolbar .toolbar-tray-vertical li.open > ul {
+.js-toolbar .toolbar-tray-vertical li.open > ul {
   display: block; /* Show the sub-menus */
 }
-.toolbar .toolbar-tray-vertical .toolbar-handle + a {
+.js-toolbar .toolbar-tray-vertical .toolbar-handle + a {
   margin-right: 3em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-handle + a {
+[dir="rtl"] .js-toolbar .toolbar-tray-vertical .toolbar-handle + a {
   margin-left: 3em;
   margin-right: 0;
 }
-.toolbar .toolbar-tray .active-trail > .toolbar-box a,
-.toolbar .toolbar-tray a.active {
+.js-toolbar .toolbar-tray .active-trail > .toolbar-box a,
+.js-toolbar .toolbar-tray a.active {
   color: #000;
   font-weight: bold;
 }
@@ -37,37 +37,37 @@
 /**
  * Items.
  */
-.toolbar .level-2 > ul {
+.js-toolbar .level-2 > ul {
   background-color: #fafafa;
   border-bottom-color: #cccccc;
   border-top-color: #e5e5e5;
 }
-.toolbar .level-3 > ul {
+.js-toolbar .level-3 > ul {
   background-color: #f5f5f5;
   border-bottom-color: #c5c5c5;
   border-top-color: #dddddd;
 }
-.toolbar .level-4 > ul {
+.js-toolbar .level-4 > ul {
   background-color: #eeeeee;
   border-bottom-color: #bbbbbb;
   border-top-color: #d5d5d5;
 }
-.toolbar .level-5 > ul {
+.js-toolbar .level-5 > ul {
   background-color: #e5e5e5;
   border-bottom-color: #b5b5b5;
   border-top-color: #cccccc;
 }
-.toolbar .level-6 > ul {
+.js-toolbar .level-6 > ul {
   background-color: #eeeeee;
   border-bottom-color: #aaaaaa;
   border-top-color: #c5c5c5;
 }
-.toolbar .level-7 > ul {
+.js-toolbar .level-7 > ul {
   background-color: #fafafa;
   border-bottom-color: #b5b5b5;
   border-top-color: #cccccc;
 }
-.toolbar .level-8 > ul {
+.js-toolbar .level-8 > ul {
   background-color: #dddddd;
   border-bottom-color: #cccccc;
   border-top-color: #dddddd;
@@ -76,10 +76,10 @@
 /**
  * Handle.
  */
-.toolbar .toolbar-handle:hover {
+.js-toolbar .toolbar-handle:hover {
   cursor: pointer;
 }
-.toolbar .toolbar-icon.toolbar-handle {
+.js-toolbar .toolbar-icon.toolbar-handle {
   bottom: 0;
   display: block;
   height: 100%;
@@ -89,7 +89,7 @@
   top: 0;
   z-index: 1;
 }
-[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle {
+[dir="rtl"] .js-toolbar .toolbar-icon.toolbar-handle {
   left: 0;
   padding: 0;
   right: auto;
diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 06224fe..7d359ec 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -20,25 +20,25 @@
 /**
  * Very specific overrides for Drupal system CSS.
  */
-.toolbar li,
-.toolbar .menu li,
-.toolbar .item-list,
-.toolbar .item-list li,
-.toolbar .menu li.expanded {
+.js-toolbar li,
+.js-toolbar .menu li,
+.js-toolbar .item-list,
+.js-toolbar .item-list li,
+.js-toolbar .menu li.expanded {
   list-style-type: none;
   list-style-image: none;
 }
-.toolbar .menu li {
+.js-toolbar .menu li {
   padding-top: 0;
 }
-.toolbar .toolbar-bar .toolbar-tab,
-.toolbar .menu li {
+.js-toolbar .js-toolbar-bar .js-toolbar-tab,
+.js-toolbar .menu li {
   display: block;
 }
-.toolbar .toolbar-bar .toolbar-tab.hidden {
+.js-toolbar .js-toolbar-bar .js-toolbar-tab.hidden {
   display: none;
 }
-.toolbar a {
+.js-toolbar a {
   display: block;
   line-height: 1;
 }
@@ -46,8 +46,8 @@
 /**
  * Administration menu.
  */
-.toolbar .toolbar-bar,
-.toolbar .toolbar-tray {
+.js-toolbar .js-toolbar-bar,
+.js-toolbar .toolbar-tray {
   position: relative;
   z-index: 1250;
 }
@@ -56,7 +56,7 @@
  * position absolutely so that it scrolls with the page. Otherwise, on smaller
  * screens, the components of the admin toolbar are positioned statically. */
 body.toolbar-fixed .toolbar-oriented,
-.toolbar-oriented .toolbar-bar,
+.toolbar-oriented .js-toolbar-bar,
 .toolbar-oriented .toolbar-tray {
   left: 0;
   position: absolute;
@@ -64,12 +64,12 @@ body.toolbar-fixed .toolbar-oriented,
   top: 0;
 }
 /* Layer the bar just above the trays and above contextual link triggers. */
-.toolbar-oriented .toolbar-bar {
+.toolbar-oriented .js-toolbar-bar {
   z-index: 502;
 }
 /* Position the admin toolbar fixed when the configured standard breakpoint is
  * active. */
-body.toolbar-fixed .toolbar-oriented .toolbar-bar {
+body.toolbar-fixed .toolbar-oriented .js-toolbar-bar {
   position: fixed;
 }
 /* When the configured narrow breakpoint is active, the toolbar is sized to wrap
@@ -83,23 +83,23 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
 /* Present the admin toolbar tabs horizontally as a default on user agents that
  * do not understand media queries or on user agents where JavaScript is
  * disabled. */
-.toolbar .toolbar-bar .toolbar-tab,
-.toolbar .toolbar-tray-horizontal li {
+.js-toolbar .js-toolbar-bar .js-toolbar-tab,
+.js-toolbar .toolbar-tray-horizontal li {
   float: left; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
-[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+[dir="rtl"] .js-toolbar .js-toolbar-bar .js-toolbar-tab,
+[dir="rtl"] .js-toolbar .toolbar-tray-horizontal li {
   float: right;
 }
 /* Present the admin toolbar tabs vertically by default on user agents that
  * that understand media queries. This will be the small screen default. */
 @media only screen {
-  .toolbar .toolbar-bar .toolbar-tab,
-  .toolbar .toolbar-tray-horizontal li {
+  .js-toolbar .js-toolbar-bar .js-toolbar-tab,
+  .js-toolbar .toolbar-tray-horizontal li {
     float: none; /* LTR */
   }
-  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
-  [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+  [dir="rtl"] .js-toolbar .js-toolbar-bar .js-toolbar-tab,
+  [dir="rtl"] .js-toolbar .toolbar-tray-horizontal li {
     float: none;
   }
 }
@@ -107,22 +107,22 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
  * the main menu tabs when JavaScript is disabled on user agents that understand
  * media queries. */
 @media (min-width:16.5em) {
-  .toolbar .toolbar-bar .toolbar-tab,
-  .toolbar .toolbar-tray-horizontal li {
+  .js-toolbar .js-toolbar-bar .js-toolbar-tab,
+  .js-toolbar .toolbar-tray-horizontal li {
     float: left; /* LTR */
   }
-  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
-  [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+  [dir="rtl"] .js-toolbar .js-toolbar-bar .js-toolbar-tab,
+  [dir="rtl"] .js-toolbar .toolbar-tray-horizontal li {
     float: right;
   }
 }
 /* Present the admin toolbar tabs horizontally when the configured narrow
  * breakpoint is active. */
-.toolbar-oriented .toolbar-bar .toolbar-tab,
+.toolbar-oriented .js-toolbar-bar .js-toolbar-tab,
 .toolbar-oriented .toolbar-tray-horizontal li {
   float: left; /* LTR */
 }
-[dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
+[dir="rtl"] .toolbar-oriented .js-toolbar-bar .js-toolbar-tab,
 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
   float: right;
 }
@@ -130,11 +130,11 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
 /**
  * Toolbar tray.
  */
-.toolbar .toolbar-tray {
+.js-toolbar .toolbar-tray {
   display: none;
   z-index: 501;
 }
-.toolar .toolbar-tray > .toolbar-lining {
+.toolar .toolbar-tray > .js-toolbar-lining {
   position: relative;
 }
 .toolbar-oriented .toolbar-tray-vertical {
@@ -147,13 +147,13 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   left: auto;
   right: -100%;
 }
-.toolbar .toolbar-tray-vertical > .toolbar-lining {
+.js-toolbar .toolbar-tray-vertical > .js-toolbar-lining {
   min-height: 100%;
 }
-.toolbar .toolbar-tray-vertical > .toolbar-lining:before {
+.js-toolbar .toolbar-tray-vertical > .js-toolbar-lining:before {
   width: 100%;
 }
-.toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {
+.toolbar-oriented .toolbar-tray-vertical > .js-toolbar-lining:before {
   bottom: 0;
   content: '';
   display: block;
@@ -164,7 +164,7 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   width: 14rem;
   z-index: -1;
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
+[dir="rtl"] .js-toolbar .toolbar-tray-vertical > .js-toolbar-lining:before {
   left: auto;
   right: 0;
 }
@@ -175,19 +175,19 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
 /* When the configured standard breakpoint is active and the tray is in a
  * horizontal position, the tray is fixed to the top of the viewport and does
  * not scroll with the page contents. */
-body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
+body.toolbar-fixed .js-toolbar .toolbar-tray-horizontal {
   position: fixed;
 }
 /* When the configured standard breakpoint is active and the tray is in a
  * vertical position, the tray does not scroll with the page. The contents of
  * the tray scroll within the confines of the viewport. */
-body.toolbar-fixed .toolbar .toolbar-tray-vertical {
+body.toolbar-fixed .js-toolbar .toolbar-tray-vertical {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   position: fixed;
 }
-.toolbar .toolbar-tray.active {
+.js-toolbar .toolbar-tray.active {
   display: block;
 }
 /* Bring the tray into the viewport. By default it is just off-screen. */
@@ -216,7 +216,7 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
  */
 /* Hide the orientation toggle when the configured narrow breakpoint is not
  * active. */
-.toolbar .toolbar-tray .toolbar-toggle-orientation {
+.js-toolbar .toolbar-tray .toolbar-toggle-orientation {
   display: none;
 }
 /* Show the orientation toggle when the configured narrow breakpoint is
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index d143a0b..0e38b5b 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -1,7 +1,7 @@
 /**
  * @file toolbar.theme.css
  */
-.toolbar {
+.js-toolbar {
   font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
   /* Set base font size to 13px based on root ems. */
   font-size: 0.8125rem;
@@ -14,40 +14,40 @@
   -webkit-touch-callout: none;
   touch-callout: none;
 }
-.toolbar .toolbar-item {
+.js-toolbar .toolbar-item {
   cursor: pointer;
   padding: 1em 1.3333em;
   line-height: 1em;
   text-decoration: none;
 }
-.toolbar .toolbar-item:hover, .toolbar .toolbar-item:focus {
+.js-toolbar .toolbar-item:hover, .js-toolbar .toolbar-item:focus {
   text-decoration: underline;
 }
 
 /**
  * Toolbar bar.
  */
-.toolbar .toolbar-bar {
+.js-toolbar .js-toolbar-bar {
   background-color: #0f0f0f;
   box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
   color: #dddddd;
 }
-[dir="rtl"] .toolbar .toolbar-bar {
+[dir="rtl"] .js-toolbar .js-toolbar-bar {
   box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333);
 }
-.toolbar .toolbar-bar .toolbar-item {
+.js-toolbar .js-toolbar-bar .toolbar-item {
   color: #ffffff;
 }
-.toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
+.js-toolbar .js-toolbar-bar .js-toolbar-tab > .toolbar-item {
   font-weight: bold;
 }
-.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
-.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
+.js-toolbar .js-toolbar-bar .js-toolbar-tab > .toolbar-item:hover,
+.js-toolbar .js-toolbar-bar .js-toolbar-tab > .toolbar-item:focus {
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
   text-decoration: none;
 }
-.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.active {
+.js-toolbar .js-toolbar-bar .js-toolbar-tab > .toolbar-item.active {
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
 }
@@ -55,34 +55,34 @@
 /**
  * Toolbar tray.
  */
-.toolbar .toolbar-tray {
+.js-toolbar .toolbar-tray {
   background-color: #ffffff;
 }
-.toolbar .toolbar-tray-horizontal > .toolbar-lining {
+.js-toolbar .toolbar-tray-horizontal > .js-toolbar-lining {
   padding-right: 5em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {
+[dir="rtl"] .js-toolbar .toolbar-tray-horizontal > .js-toolbar-lining {
   padding-right: 0;
   padding-left: 5em;
 }
-.toolbar .toolbar-tray-vertical {
+.js-toolbar .toolbar-tray-vertical {
   background-color: #f5f5f5;
   border-right: 1px solid #aaaaaa; /* LTR */
   box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical {
+[dir="rtl"] .js-toolbar .toolbar-tray-vertical {
   border-left: 1px solid #aaaaaa;
   border-right: 0 none;
   box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
 }
-.toolbar .toolbar-tray-horizontal {
+.js-toolbar .toolbar-tray-horizontal {
   border-bottom: 1px solid #aaaaaa;
   box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal {
+[dir="rtl"] .js-toolbar .toolbar-tray-horizontal {
   box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
 }
-.toolbar .toolbar-tray-horizontal .toolbar-tray {
+.js-toolbar .toolbar-tray-horizontal .toolbar-tray {
   background-color: #f5f5f5;
 }
 .toolbar-tray a {
@@ -99,71 +99,71 @@
   color: #000;
   text-decoration: underline;
 }
-.toolbar .menu {
+.js-toolbar .menu {
   background-color: #ffffff;
 }
-.toolbar .toolbar-tray-horizontal .menu li + li {
+.js-toolbar .toolbar-tray-horizontal .menu li + li {
   border-left: 1px solid #dddddd; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu li + li {
+[dir="rtl"] .js-toolbar .toolbar-tray-horizontal .menu li + li {
   border-left: 0 none ;
   border-right: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-horizontal .menu li:last-child {
+.js-toolbar .toolbar-tray-horizontal .menu li:last-child {
   border-right: 1px solid #dddddd; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu li:last-child {
+[dir="rtl"] .js-toolbar .toolbar-tray-horizontal .menu li:last-child {
   border-left: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-vertical .menu li + li {
+.js-toolbar .toolbar-tray-vertical .menu li + li {
   border-top: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-vertical .menu li:last-child {
+.js-toolbar .toolbar-tray-vertical .menu li:last-child {
   border-bottom: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-vertical .menu .menu li {
+.js-toolbar .toolbar-tray-vertical .menu .menu li {
   border: 0 none;
 }
-.toolbar .toolbar-tray-vertical .menu ul ul {
+.js-toolbar .toolbar-tray-vertical .menu ul ul {
   border-bottom: 1px solid #dddddd;
   border-top: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-vertical .menu li:last-child > ul {
+.js-toolbar .toolbar-tray-vertical .menu li:last-child > ul {
   border-bottom: 0;
 }
-.toolbar .toolbar-tray-vertical .menu .menu .menu .menu {
+.js-toolbar .toolbar-tray-vertical .menu .menu .menu .menu {
   margin-left: 0.25em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .menu .menu .menu .menu {
+[dir="rtl"] .js-toolbar .toolbar-tray-vertical .menu .menu .menu .menu {
   margin-left: 0;
   margin-right: 0.25em;
 }
-.toolbar .menu .menu a {
+.js-toolbar .menu .menu a {
   color: #434343;
 }
 
 /**
  * Orientation toggle.
  */
-.toolbar .toolbar-toggle-orientation {
+.js-toolbar .toolbar-toggle-orientation {
   background-color: #f5f5f5;
   padding: 0.6667em;
 }
-.toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
+.js-toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
   border-left: 1px solid #c9c9c9; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
+[dir="rtl"] .js-toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
   border-left: 0 none;
   border-right: 1px solid #c9c9c9;
 }
-.toolbar .toolbar-toggle-orientation > .toolbar-lining {
+.js-toolbar .toolbar-toggle-orientation > .js-toolbar-lining {
   float: right; /* LTR */
   padding: 0.1667em;
 }
-[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
+[dir="rtl"] .js-toolbar .toolbar-toggle-orientation > .js-toolbar-lining {
   float: left;
 }
-.toolbar .toolbar-toggle-orientation button {
+.js-toolbar .toolbar-toggle-orientation button {
   cursor: pointer;
   display: inline-block;
 }
diff --git a/core/modules/toolbar/js/escapeAdmin.js b/core/modules/toolbar/js/escapeAdmin.js
index 0544a40..3510985 100644
--- a/core/modules/toolbar/js/escapeAdmin.js
+++ b/core/modules/toolbar/js/escapeAdmin.js
@@ -35,7 +35,7 @@
         else {
           $toolbarEscape.text(Drupal.t('Home'));
         }
-        $toolbarEscape.closest('.toolbar-tab').removeClass('hidden');
+        $toolbarEscape.closest('.js-toolbar-tab').removeClass('hidden');
       }
     }
   };
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index b99e0c7..8e99496 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -195,7 +195,7 @@
    *   A string representing a DOM fragment.
    */
   Drupal.theme.toolbarOrientationToggle = function () {
-    return '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
+    return '<div class="toolbar-toggle-orientation"><div class="js-toolbar-lining">' +
       '<button class="toolbar-icon" type="button"></button>' +
       '</div></div>';
   };
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index 1cfe3ea..09cde3f 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -136,7 +136,7 @@
 
     // Bind event handlers.
     $(document)
-      .on('click.toolbar', '.toolbar-handle', toggleClickHandler);
+      .on('click.js-toolbar', '.toolbar-handle', toggleClickHandler);
     // Return the jQuery object.
     return this.each(function (selector) {
       var $menu = $(this).once('toolbar-menu');
diff --git a/core/modules/toolbar/js/views/ToolbarAuralView.js b/core/modules/toolbar/js/views/ToolbarAuralView.js
index f46bd86..1db176a 100644
--- a/core/modules/toolbar/js/views/ToolbarAuralView.js
+++ b/core/modules/toolbar/js/views/ToolbarAuralView.js
@@ -44,7 +44,7 @@
      */
     onActiveTrayChange: function (model, tray) {
       var relevantTray = (tray === null) ? model.previous('activeTray') : tray;
-      var trayName = relevantTray.querySelector('.toolbar-tray-name').textContent;
+      var trayName = relevantTray.querySelector('.js-toolbar-tray-name').textContent;
       var text;
       if (tray === null) {
         text = Drupal.t('Tray "@tray" closed.', { '@tray': trayName });
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index e9dd6f0..dda0cd8 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -20,9 +20,9 @@
       };
 
       return {
-        'click .toolbar-bar .toolbar-tab': 'onTabClick',
+        'click .js-toolbar-bar .js-toolbar-tab': 'onTabClick',
         'click .toolbar-toggle-orientation button': 'onOrientationToggleClick',
-        'touchend .toolbar-bar .toolbar-tab': touchEndToClick,
+        'touchend .js-toolbar-bar .js-toolbar-tab': touchEndToClick,
         'touchend .toolbar-toggle-orientation button': touchEndToClick
       };
     },
@@ -39,7 +39,7 @@
 
       // Add the tray orientation toggles.
       this.$el
-        .find('.toolbar-tray .toolbar-lining')
+        .find('.js-toolbar-tray .js-toolbar-lining')
         .append(Drupal.theme('toolbarOrientationToggle'));
 
       // Trigger an activeTab change so that listening scripts can respond on
@@ -177,10 +177,10 @@
     updateBarAttributes: function () {
       var isOriented = this.model.get('isOriented');
       if (isOriented) {
-        this.$el.find('.toolbar-bar').attr('data-offset-top', '');
+        this.$el.find('.js-toolbar-bar').attr('data-offset-top', '');
       }
       else {
-        this.$el.find('.toolbar-bar').removeAttr('data-offset-top');
+        this.$el.find('.js-toolbar-bar').removeAttr('data-offset-top');
       }
       // Toggle between a basic vertical view and a more sophisticated
       // horizontal and vertical display of the toolbar bar and trays.
@@ -235,7 +235,7 @@
       else {
         // The toolbar container is invisible. Its placement is used to
         // determine the container for the trays.
-        $trays.css('padding-top', this.$el.find('.toolbar-bar').outerHeight());
+        $trays.css('padding-top', this.$el.find('.js-toolbar-bar').outerHeight());
       }
     },
 
diff --git a/core/modules/toolbar/templates/toolbar.html.twig b/core/modules/toolbar/templates/toolbar.html.twig
index 5d2737d..2746849 100644
--- a/core/modules/toolbar/templates/toolbar.html.twig
+++ b/core/modules/toolbar/templates/toolbar.html.twig
@@ -22,21 +22,21 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes.addClass('toolbar') }}>
-  <nav{{ toolbar_attributes.addClass('toolbar-bar', 'clearfix') }}>
+<div{{ attributes.addClass('js-toolbar') }}>
+  <nav{{ toolbar_attributes.addClass('js-toolbar-bar', 'clearfix') }}>
     <h2 class="visually-hidden">{{ toolbar_heading }}</h2>
     {% for tab in tabs %}
-      <div{{ tab.attributes.addClass('toolbar-tab') }}>{{ tab.link }}</div>
+      <div{{ tab.attributes.addClass('js-toolbar-tab') }}>{{ tab.link }}</div>
     {% endfor %}
   </nav>
   {% for tray in trays %}
     {% spaceless %}
     <div{{ tray.attributes }}>
     {% if tray.label %}
-      <nav class="toolbar-lining clearfix" role="navigation" aria-label="{{ tray.label }}">
-          <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
+      <nav class="js-toolbar-lining clearfix" role="navigation" aria-label="{{ tray.label }}">
+        <h3 class="js-toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
     {% else %}
-      <nav class="toolbar-lining clearfix" role="navigation">
+      <nav class="js-toolbar-lining clearfix" role="navigation">
     {% endif %}
         {{ tray.links }}
       </nav>
diff --git a/core/modules/toolbar/toolbar.api.php b/core/modules/toolbar/toolbar.api.php
index bce69ae..18f9dd1 100644
--- a/core/modules/toolbar/toolbar.api.php
+++ b/core/modules/toolbar/toolbar.api.php
@@ -18,7 +18,7 @@
  * components.
  *
  * The toolbar provides a common styling for items denoted by the
- * .toolbar-tab class.
+ * .js-toolbar-tab class.
  *
  * The toolbar provides a construct called a 'tray'. The tray is a container
  * for content. The tray may be associated with a toggle in the administration
diff --git a/core/modules/tour/css/tour.module.css b/core/modules/tour/css/tour.module.css
index a9fb1c0..a7ee0cf 100644
--- a/core/modules/tour/css/tour.module.css
+++ b/core/modules/tour/css/tour.module.css
@@ -4,19 +4,19 @@
  */
 
 /* Tab appearance. */
-.toolbar .toolbar-bar .tour-toolbar-tab.toolbar-tab {
+.js-toolbar .js-toolbar-bar .tour-toolbar-tab.js-toolbar-tab {
   float: right; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-bar .tour-toolbar-tab.toolbar-tab {
+[dir="rtl"] .js-toolbar .js-toolbar-bar .tour-toolbar-tab.js-toolbar-tab {
   float: left;
 }
-.toolbar .tour-toolbar-tab button {
+.js-toolbar .tour-toolbar-tab button {
   padding-bottom: 1em;
   padding-top: 1em;
   color: #fff;
   font-weight: bold;
 }
-.toolbar .tour-toolbar-tab button.active {
+.js-toolbar .tour-toolbar-tab button.active {
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
 }
@@ -25,7 +25,7 @@
 }
 
 /* @todo Remove once http://drupal.org/node/1916690 is resolved. */
-.toolbar .tour-toolbar-tab.toolbar-tab.hidden {
+.js-toolbar .tour-toolbar-tab.js-toolbar-tab.hidden {
   display: none;
 }
 
@@ -42,7 +42,7 @@
 }
 
 /* @todo Remove once http://drupal.org/node/1916690 is resolved. */
-.toolbar .tour-toolbar-tab.toolbar-tab.hidden {
+.js-toolbar .tour-toolbar-tab.js-toolbar-tab.hidden {
   display: none;
 }
 
diff --git a/core/modules/user/css/user.icons.css b/core/modules/user/css/user.icons.css
index 11ae839..cfc8fbe 100644
--- a/core/modules/user/css/user.icons.css
+++ b/core/modules/user/css/user.icons.css
@@ -6,10 +6,10 @@
 /**
  * Toolbar tab icon.
  */
-.toolbar-bar .toolbar-icon-user:before {
+.js-toolbar-bar .toolbar-icon-user:before {
   background-image: url(../../../misc/icons/bebebe/person.svg);
 }
-.toolbar-bar .toolbar-icon-user:active:before,
-.toolbar-bar .toolbar-icon-user.active:before {
+.js-toolbar-bar .toolbar-icon-user:active:before,
+.js-toolbar-bar .toolbar-icon-user.active:before {
   background-image: url(../../../misc/icons/ffffff/person.svg);
 }
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index fcdebc1..36d299e 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -27,7 +27,7 @@ h2 a,
 [role*=banner] a,
 .feed-icon,
 .contextual-links a,
-.toolbar a {
+.js-toolbar a {
   border-bottom: none !important;
 }
 h1,
diff --git a/core/themes/classy/templates/toolbar.html.twig b/core/themes/classy/templates/toolbar.html.twig
new file mode 100644
index 0000000..2746849
--- /dev/null
+++ b/core/themes/classy/templates/toolbar.html.twig
@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the administrative toolbar.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper.
+ * - toolbar_attributes: HTML attributes to apply to the toolbar.
+ * - toolbar_heading: The heading or label for the toolbar.
+ * - tabs: List of tabs for the toolbar.
+ *   - attributes: HTML attributes for the tab container.
+ *   - link: Link or button for the menu tab.
+ * - trays: Toolbar tray list, each associated with a tab. Each tray in trays
+ *   contains:
+ *   - attributes: HTML attributes to apply to the tray.
+ *   - label: The tray's label.
+ *   - links: The tray menu links.
+ * - remainder: Any non-tray, non-tab elements left to be rendered.
+ *
+ * @see template_preprocess_toolbar()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes.addClass('js-toolbar') }}>
+  <nav{{ toolbar_attributes.addClass('js-toolbar-bar', 'clearfix') }}>
+    <h2 class="visually-hidden">{{ toolbar_heading }}</h2>
+    {% for tab in tabs %}
+      <div{{ tab.attributes.addClass('js-toolbar-tab') }}>{{ tab.link }}</div>
+    {% endfor %}
+  </nav>
+  {% for tray in trays %}
+    {% spaceless %}
+    <div{{ tray.attributes }}>
+    {% if tray.label %}
+      <nav class="js-toolbar-lining clearfix" role="navigation" aria-label="{{ tray.label }}">
+        <h3 class="js-toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
+    {% else %}
+      <nav class="js-toolbar-lining clearfix" role="navigation">
+    {% endif %}
+        {{ tray.links }}
+      </nav>
+    </div>
+    {% endspaceless %}
+  {% endfor %}
+  {{ remainder }}
+</div>