diff --git a/core/modules/quickedit/css/quickedit.icons.theme.css b/core/modules/quickedit/css/quickedit.icons.theme.css
index 7845416..fd55636 100644
--- a/core/modules/quickedit/css/quickedit.icons.theme.css
+++ b/core/modules/quickedit/css/quickedit.icons.theme.css
@@ -3,22 +3,23 @@
  * Icons for Quick Edit module.
  */
 
-.quickedit .icon {
+.quickedit-icon {
   min-height: 1em;
   min-width: 2.5em;
   position: relative;
 }
-.quickedit .icon.icon-only {
+.quickedit-icon--only {
   text-indent: -9999px;
+  direction: ltr;
 }
-.quickedit .icon.icon-end {
+.quickedit-icon--end {
   padding-right: 2.5em; /* LTR */
 }
-[dir="rtl"] .quickedit .icon.icon-end {
+[dir="rtl"] .quickedit-icon--end {
   padding-left: 2.5em;
   padding-right: 0;
 }
-.quickedit .icon:before {
+.quickedit-icon:before {
   background-attachment: scroll;
   background-color: transparent;
   background-position: center center;
@@ -31,43 +32,37 @@
   top: 0;
   width: 100%;
 }
-[dir="rtl"] .quickedit .icon:before {
+[dir="rtl"] .quickedit-icon:before {
   left: auto;
   right: 0;
 }
-.quickedit .icon-end:before {
+.quickedit-icon--end:before {
   left: auto; /* LTR */
   right: 0.5em; /* LTR */
   width: 18px;
 }
-[dir="rtl"] .quickedit .icon-end:before {
+[dir="rtl"] .quickedit-icon--end:before {
   left: 0.5em;
   right: auto;
 }
-.quickedit button.icon {
-  font-size: 1em;
-}
-.quickedit .icon-pencil {
-  margin-left: .5em;
+.quickedit-icon--pencil {
+  margin-left: 0.5em;
   padding-left: 1.5em;
 }
 
-/**
- * Images.
- */
-.quickedit .icon-close:before {
+.quickedit-icon--close:before {
   background-image: url(../../../misc/icons/787878/ex.svg);
   height: 12px;
   top: 10px;
 }
-.quickedit .icon-close:hover:before,
-.quickedit .icon-close:active:before {
+.quickedit-icon--close:hover:before,
+.quickedit-icon--close:active:before {
   background-image: url(../../../misc/icons/000000/ex.svg);
 }
-.quickedit .icon-throbber:before {
+.quickedit-icon--throbber:before {
   background-image: url(../images/icon-throbber.gif);
 }
-.quickedit .icon-pencil:before {
+.quickedit-icon--pencil:before {
   background-image: url(../../../misc/icons/5181c6/pencil.svg);
   background-position: left center;
   background-size: 1.3em;
diff --git a/core/modules/quickedit/css/quickedit.module.css b/core/modules/quickedit/css/quickedit.module.css
index 8ac9a55..a801d28 100644
--- a/core/modules/quickedit/css/quickedit.module.css
+++ b/core/modules/quickedit/css/quickedit.module.css
@@ -7,59 +7,45 @@
  * necessary.
  */
 
-/**
- * Editable.
- */
+/* Editable. */
 .quickedit-editable {
   z-index: 98;
   position: relative;
   cursor: pointer;
 }
-.quickedit-editable:focus {
-  outline: none;
-}
 
-/**
- * Highlighted (hovered) editable.
- */
+/* Highlighted (hovered) editable. */
 .quickedit-editable.quickedit-highlighted {
   z-index: 99;
 }
-.quickedit-validation-errors > .messages {
+.quickedit__validation-errors > .messages {
   margin-left: 0;
   margin-right: 0;
 }
-.quickedit-validation-errors > .messages > ul {
+.quickedit__validation-errors > .messages > ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-/**
- * In-place editors that don't use a popup.
- */
-.quickedit-validation-errors {
+/* In-place editors that don't use a popup. */
+.quickedit__validation-errors {
   z-index: 300;
   position: relative;
 }
-.quickedit-validation-errors .messages.error {
+.quickedit__validation-errors .messages.error {
   position: absolute;
   top: 6px;
   left: -5px; /* LTR */
   margin: 0;
   border: none;
 }
-[dir="rtl"] .quickedit-validation-errors .messages.error {
+[dir="rtl"] .quickedit__validation-errors .messages.error {
   left: auto;
   right: -5px;
 }
 
-/**
- * Styling specific to the 'form' in-place editor.
- */
-#quickedit_backstage {
-  display: none;
-}
+/* Styling specific to the 'form' in-place editor. */
 .quickedit-form {
   position: absolute;
   z-index: 300;
@@ -69,9 +55,7 @@
   min-height: 22px;
 }
 
-/**
- * Default form styling overrides.
- */
+/* Default form styling overrides. */
 .quickedit-form .form-wrapper .form-wrapper {
   margin: inherit;
 }
@@ -82,18 +66,15 @@
   max-width: 100%;
 }
 
-/**
- * Entity toolbar.
- */
-.quickedit-toolbar-container {
+/* Entity toolbar. */
+.quickedit-toolbar__container {
   max-width: 100%;
   position: absolute;
-  max-width: 320px;
   width: 320px;
   z-index: 100;
 }
-.quickedit-toolbar-container > .quickedit-toolbar-pointer,
-.quickedit-toolbar-container > .quickedit-toolbar-lining {
+.quickedit-toolbar__container > .quickedit-toolbar__pointer,
+.quickedit-toolbar__container > .quickedit-toolbar__lining {
   display: none;
 }
 .quickedit-form-container {
@@ -104,16 +85,16 @@
   vertical-align: baseline;
   z-index: 100;
 }
-.quickedit-toolgroup.ops {
+.quickedit-toolgroup--ops {
   float: right; /* LTR */
 }
-[dir="rtl"] .quickedit-toolgroup.ops {
+[dir="rtl"] .quickedit-toolgroup--ops {
   float: left;
 }
-.quickedit-toolbar-label {
+.quickedit-toolbar__label {
   overflow: hidden;
 }
-#quickedit-toolbar-fence {
+.quickedit-fence {
   bottom: 0;
   left: 0;
   right: 0;
diff --git a/core/modules/quickedit/css/quickedit.theme.css b/core/modules/quickedit/css/quickedit.theme.css
index 399db7a..8e98762 100644
--- a/core/modules/quickedit/css/quickedit.theme.css
+++ b/core/modules/quickedit/css/quickedit.theme.css
@@ -3,41 +3,32 @@
  * Styling for Quick Edit module.
  */
 
-/**
- * Editable.
- */
-.quickedit-field.quickedit-editable,
-.quickedit-field .quickedit-editable {
+/* Editable. */
+.quickedit-editable {
   box-shadow: 0 0 0 2px #74b7ff;
 }
 
-/**
- * Highlighted (hovered) editable.
- */
-.quickedit-field.quickedit-highlighted,
-.quickedit-form.quickedit-highlighted,
-.quickedit-field .quickedit-highlighted {
+/* Highlighted (hovered) editable. */
+.quickedit-highlighted,
+.quickedit-form.quickedit-highlighted {
   box-shadow: 0 0 0 1px #74b7ff, 0 0 0 2px #007fff;
 }
-.quickedit-field.quickedit-changed,
-.quickedit-form.quickedit-changed,
-.quickedit-field .quickedit-changed {
+.quickedit-changed,
+.quickedit-form.quickedit-changed {
   box-shadow: 0 0 0 1px #fec17e, 0 0 0 2px #f7870a;
 }
 .quickedit-editing.quickedit-validation-error,
 .quickedit-form.quickedit-validation-error {
-  box-shadow: 0 0 0px 1px #ee8b74, 0 0 0 2px #fa2209;
+  box-shadow: 0 0 0 1px #ee8b74, 0 0 0 2px #fa2209;
 }
-.quickedit-editing.quickedit-editor-is-popup {
+.quickedit-editor-is-popup {
   box-shadow: none;
 }
 .quickedit-form .form-item .error {
   border: 1px solid #eea0a0;
 }
 
-/**
- * Default form styling overrides.
- */
+/* Default form styling overrides. */
 .quickedit-form form {
   padding: 0.5em;
 }
@@ -45,67 +36,59 @@
   margin: 0;
 }
 .quickedit-form .form-wrapper {
-  margin: .5em;
+  margin: 0.5em;
 }
 
-/**
- * Animations.
- */
-.quickedit-animate-invisible {
+/* Animations. */
+.quickedit-toolgroup--animate-invisible {
   opacity: 0;
 }
-.quickedit-animate-default {
-  -webkit-transition: all .4s ease;
-  transition: all .4s ease;
+.quickedit-toolgroup--animate-default {
+  -webkit-transition: all 0.4s ease;
+  transition: all 0.4s ease;
 }
-.quickedit-animate-slow {
-  -webkit-transition: all .6s ease;
-  transition: all .6s ease;
+.quickedit-toolgroup--animate-slow {
+  -webkit-transition: all 0.6s ease;
+  transition: all 0.6s ease;
 }
-.quickedit-animate-delay-veryfast {
-  -webkit-transition-delay: .05s;
-  transition-delay: .05s;
+.quickedit-toolgroup--animate-delay-veryfast {
+  -webkit-transition-delay: 0.05s;
+  transition-delay: 0.05s;
 }
-.quickedit-animate-delay-fast {
-  -webkit-transition-delay: .2s;
-  transition-delay: .2s;
+.quickedit-toolgroup--animate-delay-fast {
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
 }
-.quickedit-animate-disable-width {
+.quickedit-toolgroup--animate-disable-width {
   -webkit-transition: width 0s;
   transition: width 0s;
 }
-.quickedit-animate-only-visibility {
-  -webkit-transition: opacity .2s ease;
-  transition: opacity .2s ease;
+.quickedit-toolgroup--animate-only-visibility {
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
-/**
- * In-place editors that don't use a popup.
- */
-.quickedit-validation-errors .messages.error {
-  box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5);
+/* In-place editors that don't use a popup. */
+.quickedit__validation-errors .messages.error {
+  box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, 0.5);
   background-color: white;
 }
 
-/**
- * Styling specific to the 'form' in-place editor.
- */
+/* Styling specific to the 'form' in-place editor. */
 .quickedit-form {
   box-shadow: 0 0 30px 4px #4f4f4f;
   background-color: white;
 }
 
-/**
- * Toolbars.
- */
-.quickedit-toolbar-container {
+/* Toolbars. */
+.quickedit-toolbar__container {
   font-family: 'Source Sans Pro','Lucida Grande', sans-serif;
   padding-bottom: 7px;
   padding-top: 7px;
   -webkit-transition: all 1s;
   transition: all 1s;
 }
-.quickedit-toolbar-container > .quickedit-toolbar-content {
+.quickedit-toolbar__container > .quickedit-toolbar__content {
   background-image: -webkit-linear-gradient(top, #fff, #e4e4e4);
   background-image:   linear-gradient(to bottom, #fff, #e4e4e4);
   box-sizing: border-box;
@@ -118,10 +101,10 @@
   user-select: none;
   z-index: 2;
 }
-.quickedit-toolbar-container > .quickedit-toolbar-pointer {
+.quickedit-toolbar__container > .quickedit-toolbar__pointer {
   background-color: #e4e4e4;
   bottom: 2px;
-  box-shadow: 0 0 0 1px #818181, 0px 0px 0 4px rgba(150, 150, 150, 0.5);
+  box-shadow: 0 0 0 1px #818181, 0 0 0 4px rgba(150, 150, 150, 0.5);
   display: block;
   height: 16px;
   left: 18px; /* LTR */
@@ -132,17 +115,17 @@
   width: 16px;
   z-index: 1;
 }
-[dir="rtl"] .quickedit-toolbar-container > .quickedit-toolbar-pointer {
+[dir="rtl"] .quickedit-toolbar__container > .quickedit-toolbar__pointer {
   left: auto;
   right: 18px;
 }
-.quickedit-toolbar-container.quickedit-toolbar-pointer-top > .quickedit-toolbar-pointer {
+.quickedit-toolbar__container.quickedit-toolbar__pointer--top > .quickedit-toolbar__pointer {
   bottom: auto;
   top: 2px;
 }
-.quickedit-toolbar-container > .quickedit-toolbar-lining {
+.quickedit-toolbar__container > .quickedit-toolbar__lining {
   bottom: 7px;
-  box-shadow: 0 0 0 1px #818181, 0px 3px 0px 1px rgba(150, 150, 150, 0.5);
+  box-shadow: 0 0 0 1px #818181, 0 3px 0 1px rgba(150, 150, 150, 0.5);
   display: block;
   left: 0;
   position: absolute;
@@ -150,18 +133,16 @@
   top: 7px;
   z-index: 0;
 }
-
-.quickedit-toolbar-label {
+.quickedit-toolbar__label {
   font-style: italic;
   overflow: hidden;
   padding: 0.333em 0.4em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.quickedit-toolbar-label .field:after {
+.quickedit-toolbar__label .field:after {
   content: ' → '; /* LTR */
 }
-
 [dir="rtl"] .quickedit-toolbar-label .field:after {
   content: ' ← ';
 }
@@ -170,35 +151,31 @@
 .quickedit-toolbar {
   font-family: 'Droid sans', 'Lucida Grande', sans-serif;
 }
-.quickedit-toolbar-entity {
+.quickedit-toolbar__entity {
   padding: 0.1667em 0.2em;
 }
 
- /**
-  * Info toolgroup.
-  */
-.quickedit-toolbar-fullwidth {
+/* Info toolgroup. */
+.quickedit-toolbar--fullwidth {
   width: 100%;
 }
-.quickedit-toolgroup.wysiwyg-floated {
+.quickedit-toolbar__wysiwyg-floated {
   float: right; /* LTR */
 }
-[dir="rtl"] .quickedit-toolgroup.wysiwyg-floated {
+[dir="rtl"] .quickedit-toolbar__wysiwyg-floated {
   float: left;
 }
-.quickedit-toolgroup.wysiwyg-main {
+.quickedit-toolbar__wysiwyg-main {
   clear: both;
   width: 100%;
   padding-left: 0; /* LTR */
 }
-[dir="rtl"] .quickedit-toolgroup.wysiwyg-main {
+[dir="rtl"] .quickedit-toolbar__wysiwyg-main {
   padding-left: 0;
   padding-right: 0;
 }
 
-/**
- * Buttons.
- */
+/* Buttons. */
 .quickedit-button {
   background-color: #e4e4e4;
   border: 1px solid #d2d2d2;
@@ -208,10 +185,10 @@
   margin: 0;
   opacity: 1;
   padding: 0.345em;
-  -webkit-transition: opacity .1s ease;
-  transition: opacity .1s ease;
+  -webkit-transition: opacity 0.1s ease;
+  transition: opacity 0.1s ease;
 }
-.quickedit-button[aria-hidden="true"] {
+.quickedit .quickedit-button[aria-hidden="true"] {
   visibility: hidden;
   opacity: 0;
 }
@@ -222,31 +199,28 @@
   margin-left: auto;
   margin-right: 0.25em;
 }
+
 /* Button with icons. */
-.quickedit-button:hover,
-.quickedit-button:active {
-  background-color: #c8c8c8;
-  border: 1px solid #a0a0a0;
-  color: #2e2e2e;
-}
-.quickedit-toolbar-container .quickedit-button.action-cancel {
+.quickedit-button--cancel {
   background-color: transparent;
   border: 1px solid transparent;
 }
-.quickedit-button.action-save {
+.quickedit-button--save {
   color: white;
   background-color: #50a0e9;
   background-image: -webkit-linear-gradient(top, #50a0e9, #4481dc);
   background-image:   linear-gradient(to bottom, #50a0e9, #4481dc);
   border: 1px solid transparent;
 }
-.quickedit-button.action-save:hover,
-.quickedit-button.action-save:active {
+.quickedit-button--save:hover,
+.quickedit-button--save:active {
+  background-image: -webkit-linear-gradient(top,#007bc6,#0071b8);
+  background-image: linear-gradient(to bottom,#007bc6,#0071b8);
   border: 1px solid #a0a0a0;
 }
-.quickedit-button.action-saving,
-.quickedit-button.action-saving:hover,
-.quickedit-button.action-saving:active {
+.quickedit-button--saving,
+.quickedit-button--saving:hover,
+.quickedit-button--saving:active {
   background-color: #e4e4e4;
   background-image: none;
   border-color: #d2d2d2;
diff --git a/core/modules/quickedit/js/editors/formEditor.js b/core/modules/quickedit/js/editors/formEditor.js
index c612a28..1757dd3 100644
--- a/core/modules/quickedit/js/editors/formEditor.js
+++ b/core/modules/quickedit/js/editors/formEditor.js
@@ -246,7 +246,7 @@
     showValidationErrors: function () {
       this.$formContainer
         .find('.quickedit-form')
-        .addClass('quickedit-validation-error')
+        .addClass('quickedit__validation-error')
         .find('form')
         .prepend(this.model.get('validationErrors'));
     }
diff --git a/core/modules/quickedit/js/theme.js b/core/modules/quickedit/js/theme.js
index 8ea7a31..99703f8 100644
--- a/core/modules/quickedit/js/theme.js
+++ b/core/modules/quickedit/js/theme.js
@@ -37,14 +37,14 @@
    */
   Drupal.theme.quickeditEntityToolbar = function (settings) {
     var html = '';
-    html += '<div id="' + settings.id + '" class="quickedit quickedit-toolbar-container clearfix">';
-    html += '<i class="quickedit-toolbar-pointer"></i>';
-    html += '<div class="quickedit-toolbar-content">';
-    html += '<div class="quickedit-toolbar quickedit-toolbar-entity clearfix icon icon-pencil">';
-    html += '<div class="quickedit-toolbar-label" />';
+    html += '<div id="' + settings.id + '" class="quickedit quickedit-toolbar__container clearfix">';
+    html += '<i class="quickedit-toolbar__pointer"></i>';
+    html += '<div class="quickedit-toolbar__content">';
+    html += '<div class="quickedit-toolbar quickedit-toolbar__entity quickedit-icon quickedit-icon--pencil clearfix">';
+    html += '<div class="quickedit-toolbar__label" />';
     html += '</div>';
-    html += '<div class="quickedit-toolbar quickedit-toolbar-field clearfix" />';
-    html += '</div><div class="quickedit-toolbar-lining"></div></div>';
+    html += '<div class="quickedit-toolbar quickedit-toolbar__field clearfix" />';
+    html += '</div><div class="quickedit-toolbar__lining"></div></div>';
     return html;
   };
 
@@ -73,7 +73,7 @@
    *   The corresponding HTML.
    */
   Drupal.theme.quickeditEntityToolbarFence = function () {
-    return '<div id="quickedit-toolbar-fence" />';
+    return '<div class="quickedit-fence" />';
   };
 
   /**
diff --git a/core/modules/quickedit/js/views/EditorView.js b/core/modules/quickedit/js/views/EditorView.js
index 31ec5a5..94095a6 100644
--- a/core/modules/quickedit/js/views/EditorView.js
+++ b/core/modules/quickedit/js/views/EditorView.js
@@ -277,10 +277,10 @@
      * Should be called when the state is changed to 'invalid'.
      */
     showValidationErrors: function () {
-      var $errors = $('<div class="quickedit-validation-errors"></div>')
+      var $errors = $('<div class="quickedit__validation-errors"></div>')
         .append(this.model.get('validationErrors'));
       this.getEditedElement()
-        .addClass('quickedit-validation-error')
+        .addClass('quickedit__validation-error')
         .after($errors);
     },
 
@@ -294,8 +294,8 @@
      */
     removeValidationErrors: function () {
       this.getEditedElement()
-        .removeClass('quickedit-validation-error')
-        .next('.quickedit-validation-errors')
+        .removeClass('quickedit__validation-error')
+        .next('.quickedit__validation-errors')
         .remove();
     }
 
diff --git a/core/modules/quickedit/js/views/EntityToolbarView.js b/core/modules/quickedit/js/views/EntityToolbarView.js
index 61de7bb..3f6edb3 100644
--- a/core/modules/quickedit/js/views/EntityToolbarView.js
+++ b/core/modules/quickedit/js/views/EntityToolbarView.js
@@ -20,8 +20,8 @@
      */
     events: function () {
       var map = {
-        'click button.action-save': 'onClickSave',
-        'click button.action-cancel': 'onClickCancel',
+        'click button.quickedit-button--save': 'onClickSave',
+        'click button.quickedit-button--cancel': 'onClickCancel',
         'mouseenter': 'onMouseenter'
       };
       return map;
@@ -64,7 +64,7 @@
       // Set the entity toolbar DOM element as the el for this view.
       var $toolbar = this.buildToolbarEl();
       this.setElement($toolbar);
-      this._fieldToolbarRoot = $toolbar.find('.quickedit-toolbar-field').get(0);
+      this._fieldToolbarRoot = $toolbar.find('.quickedit-toolbar__field').get(0);
 
       // Initial render.
       this.render();
@@ -85,7 +85,7 @@
         }
         // The fence will define a area on the screen that the entity toolbar
         // will be position within.
-        if ($body.children('#quickedit-toolbar-fence').length === 0) {
+        if ($body.children('.quickedit-fence').length === 0) {
           this.$fence = $(Drupal.theme('quickeditEntityToolbarFence'))
             .css(Drupal.displace())
             .appendTo($body);
@@ -94,7 +94,7 @@
         this.label();
 
         // Show the save and cancel buttons.
-        this.show('ops');
+        this.show('quickedit-toolgroup--ops');
         // If render is being called and the toolbar is already visible, just
         // reposition it.
         this.position();
@@ -102,7 +102,7 @@
 
       // The save button text and state varies with the state of the entity
       // model.
-      var $button = this.$el.find('.quickedit-button.action-save');
+      var $button = this.$el.find('.quickedit-button.quickedit-button--save');
       var isDirty = this.model.get('isDirty');
       // Adjust the save button according to the state of the model.
       switch (this.model.get('state')) {
@@ -111,7 +111,7 @@
           // The saving throbber is not managed by AJAX system. The
           // EntityToolbarView manages this visual element.
           $button
-            .removeClass('action-saving icon-throbber icon-end')
+            .removeClass('quickedit-button--saving quickedit-icon--throbber quickedit-icon--end')
             .text(Drupal.t('Save'))
             .removeAttr('disabled')
             .attr('aria-hidden', !isDirty);
@@ -120,7 +120,7 @@
         // The changes to the fields of the entity are being committed.
         case 'committing':
           $button
-            .addClass('action-saving icon-throbber icon-end')
+            .addClass('quickedit-button--saving quickedit-icon--throbber quickedit-icon--end')
             .text(Drupal.t('Saving'))
             .attr('disabled', 'disabled');
           break;
@@ -279,7 +279,7 @@
       function refinePosition(view, suggested, info) {
         // Determine if the pointer should be on the top or bottom.
         var isBelow = suggested.top > info.target.top;
-        info.element.element.toggleClass('quickedit-toolbar-pointer-top', isBelow);
+        info.element.element.toggleClass('quickedit-toolbar__pointer--top', isBelow);
         // Don't position the toolbar past the first or last editable field if
         // the entity is the target.
         if (view.$entity[0] === info.target.element[0]) {
@@ -396,22 +396,22 @@
       }));
 
       $toolbar
-        .find('.quickedit-toolbar-entity')
+        .find('.quickedit-toolbar__entity')
         // Append the "ops" toolgroup into the toolbar.
         .prepend(Drupal.theme('quickeditToolgroup', {
-          classes: ['ops'],
+          classes: ['quickedit-toolgroup--ops'],
           buttons: [
             {
               label: Drupal.t('Save'),
               type: 'submit',
-              classes: 'action-save quickedit-button icon',
+              classes: 'quickedit-button quickedit-icon quickedit-button--save',
               attributes: {
                 'aria-hidden': true
               }
             },
             {
               label: Drupal.t('Close'),
-              classes: 'action-cancel quickedit-button icon icon-close icon-only'
+              classes: 'quickedit-button quickedit-icon quickedit-button--cancel quickedit-icon--close quickedit-icon--only'
             }
           ]
         }));
@@ -470,7 +470,7 @@
       }
 
       this.$el
-        .find('.quickedit-toolbar-label')
+        .find('.quickedit-toolbar__label')
         .html(label);
     },
 
@@ -520,7 +520,7 @@
      *   A toolgroup name.
      */
     show: function (toolgroup) {
-      this.$el.removeClass('quickedit-animate-invisible');
+      this.$el.removeClass('quickedit-toolgroup--animate-invisible');
     }
 
   });
diff --git a/core/modules/quickedit/js/views/FieldDecorationView.js b/core/modules/quickedit/js/views/FieldDecorationView.js
index b098f7f..2254a1c 100644
--- a/core/modules/quickedit/js/views/FieldDecorationView.js
+++ b/core/modules/quickedit/js/views/FieldDecorationView.js
@@ -240,7 +240,7 @@
       if (this.$el[0].style.width === "") {
         this._widthAttributeIsEmpty = true;
         this.$el
-          .addClass('quickedit-animate-disable-width')
+          .addClass('quickedit-toolgroup--animate-disable-width')
           .css('width', this.$el.width());
       }
 
@@ -248,7 +248,7 @@
       var posProp = this._getPositionProperties(this.$el);
       setTimeout(function () {
         // Re-enable width animations (padding changes affect width too!).
-        self.$el.removeClass('quickedit-animate-disable-width');
+        self.$el.removeClass('quickedit-toolgroup--animate-disable-width');
 
         // Pad the editable.
         self.$el
@@ -279,7 +279,7 @@
       // 1) Set the empty width again.
       if (this._widthAttributeIsEmpty) {
         this.$el
-          .addClass('quickedit-animate-disable-width')
+          .addClass('quickedit-toolgroup--animate-disable-width')
           .css('width', '');
       }
 
@@ -288,7 +288,7 @@
       var posProp = this._getPositionProperties(this.$el);
       setTimeout(function () {
         // Re-enable width animations (padding changes affect width too!).
-        self.$el.removeClass('quickedit-animate-disable-width');
+        self.$el.removeClass('quickedit-toolgroup--animate-disable-width');
 
         // Unpad the editable.
         self.$el
diff --git a/core/modules/quickedit/js/views/FieldToolbarView.js b/core/modules/quickedit/js/views/FieldToolbarView.js
index 232f702..fa54581 100644
--- a/core/modules/quickedit/js/views/FieldToolbarView.js
+++ b/core/modules/quickedit/js/views/FieldToolbarView.js
@@ -106,7 +106,7 @@
           this.render();
 
           if (this.editorView.getQuickEditUISettings().fullWidthToolbar) {
-            this.$el.addClass('quickedit-toolbar-fullwidth');
+            this.$el.addClass('quickedit-toolbar--fullwidth');
           }
 
           if (this.editorView.getQuickEditUISettings().unifiedToolbar) {
@@ -138,18 +138,18 @@
       this.$el
         .append(Drupal.theme('quickeditToolgroup', {
           id: this.getFloatedWysiwygToolgroupId(),
-          classes: ['wysiwyg-floated', 'quickedit-animate-slow', 'quickedit-animate-invisible', 'quickedit-animate-delay-veryfast'],
+          classes: ['quickedit-toolbar__wysiwyg-floated', 'quickedit-toolgroup--animate-slow', 'quickedit-toolgroup--animate-invisible', 'quickedit-toolgroup--animate-delay-veryfast'],
           buttons: []
         }))
         .append(Drupal.theme('quickeditToolgroup', {
           id: this.getMainWysiwygToolgroupId(),
-          classes: ['wysiwyg-main', 'quickedit-animate-slow', 'quickedit-animate-invisible', 'quickedit-animate-delay-veryfast'],
+          classes: ['quickedit-toolbar__wysiwyg-main', 'quickedit-toolgroup--animate-slow', 'quickedit-toolgroup--animate-invisible', 'quickedit-toolgroup--animate-delay-veryfast'],
           buttons: []
         }));
 
       // Animate the toolgroups into visibility.
-      this.show('wysiwyg-floated');
-      this.show('wysiwyg-main');
+      this.show('quickedit-toolbar__wysiwyg-floated');
+      this.show('quickedit-toolbar__wysiwyg-main');
     },
 
     /**
@@ -218,7 +218,7 @@
       // the next animation frame or the event handler attached above won't be
       // triggered.
       window.setTimeout(function () {
-        $group.removeClass('quickedit-animate-invisible');
+        $group.removeClass('quickedit-toolgroup--animate-invisible');
       }, 0);
     }