diff --git a/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php b/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php
index dcdc4c0..4698072 100644
--- a/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php
+++ b/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php
@@ -101,7 +101,7 @@ public function testFeedPage() {
 
     // Check for presence of an aggregator pager.
     $this->drupalGet('aggregator');
-    $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager__items'));
+    $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'js-pager__items'));
     $this->assertTrue(!empty($elements), 'Individual source page contains a pager.');
 
     // Check for sources page title.
@@ -137,7 +137,7 @@ public function testFeedPage() {
 
     // Check for the presence of a pager.
     $this->drupalGet('aggregator/sources/' . $feed->id());
-    $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager__items'));
+    $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'js-pager__items'));
     $this->assertTrue(!empty($elements), 'Individual source page contains a pager.');
     $cache_tags = explode(' ', $this->drupalGetHeader('X-Drupal-Cache-Tags'));
     $this->assertTrue(in_array('aggregator_feed:' . $feed->id(), $cache_tags));
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index a74bac0..75d97b6 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -156,7 +156,7 @@ abbr.ajax-changed {
 /**
  * Markup generated by pager.html.twig.
  */
-.pager__items {
+.js-pager__items {
   clear: both;
   text-align: center;
 }
diff --git a/core/modules/system/src/Tests/Pager/PagerTest.php b/core/modules/system/src/Tests/Pager/PagerTest.php
index d7dd6b6..5eeb116 100644
--- a/core/modules/system/src/Tests/Pager/PagerTest.php
+++ b/core/modules/system/src/Tests/Pager/PagerTest.php
@@ -98,7 +98,7 @@ protected function testPagerQueryParametersAndCacheContext() {
    *   The current pager page the internal browser is on.
    */
   protected function assertPagerItems($current_page) {
-    $elements = $this->xpath('//ul[@class=:class]/li', array(':class' => 'pager__items'));
+    $elements = $this->xpath('//ul[@class=:class]/li', array(':class' => 'js-pager__items'));
     $this->assertTrue(!empty($elements), 'Pager found.');
 
     // Make current page 1-based.
diff --git a/core/modules/system/templates/pager.html.twig b/core/modules/system/templates/pager.html.twig
index a7acd5e..cf44c0e 100644
--- a/core/modules/system/templates/pager.html.twig
+++ b/core/modules/system/templates/pager.html.twig
@@ -34,7 +34,7 @@
 {% if items %}
   <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
     <h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
-    <ul class="pager__items">
+    <ul class="js-pager__items">
       {# Print first item if we are not on the first page. #}
       {% if items.first %}
         <li class="pager__item pager__item--first">
diff --git a/core/modules/views/js/ajax_view.js b/core/modules/views/js/ajax_view.js
index 3e0b680..ed9c257 100644
--- a/core/modules/views/js/ajax_view.js
+++ b/core/modules/views/js/ajax_view.js
@@ -28,7 +28,7 @@
    * Javascript object for a certain view.
    */
   Drupal.views.ajaxView = function (settings) {
-    var selector = '.view-dom-id-' + settings.view_dom_id;
+    var selector = '.js-view-dom-id-' + settings.view_dom_id;
     this.$view = $(selector);
 
     // Retrieve the path to use for views' ajax.
@@ -100,7 +100,7 @@
    * Attach the ajax behavior to each link.
    */
   Drupal.views.ajaxView.prototype.attachPagerAjax = function () {
-    this.$view.find('ul.pager__items > li > a, th.views-field a, .attachment .views-summary a')
+    this.$view.find('ul.js-pager__items > li > a, th.views-field a, .attachment .views-summary a')
       .each(jQuery.proxy(this.attachPagerLinkAjax, this));
   };
 
diff --git a/core/modules/views/src/Controller/ViewAjaxController.php b/core/modules/views/src/Controller/ViewAjaxController.php
index bd5f956..2608344 100644
--- a/core/modules/views/src/Controller/ViewAjaxController.php
+++ b/core/modules/views/src/Controller/ViewAjaxController.php
@@ -167,14 +167,14 @@ public function ajaxView(Request $request) {
 
         // Override the display's pager_element with the one actually used.
         if (isset($pager_element)) {
-          $response->addCommand(new ScrollTopCommand(".view-dom-id-$dom_id"));
+          $response->addCommand(new ScrollTopCommand(".js-view-dom-id-$dom_id"));
           $view->displayHandlers->get($display_id)->setOption('pager_element', $pager_element);
         }
         // Reuse the same DOM id so it matches that in drupalSettings.
         $view->dom_id = $dom_id;
 
         if ($preview = $view->preview($display_id, $args)) {
-          $response->addCommand(new ReplaceCommand(".view-dom-id-$dom_id", $this->renderer->render($preview)));
+          $response->addCommand(new ReplaceCommand(".js-view-dom-id-$dom_id", $this->renderer->render($preview)));
           $response->setAttachments($preview['#attached']);
         }
         return $response;
diff --git a/core/modules/views/src/Tests/Handler/AreaEntityTest.php b/core/modules/views/src/Tests/Handler/AreaEntityTest.php
index bc3fe6e..28d867f 100644
--- a/core/modules/views/src/Tests/Handler/AreaEntityTest.php
+++ b/core/modules/views/src/Tests/Handler/AreaEntityTest.php
@@ -125,23 +125,26 @@ public function doTestRender($entities) {
     $view = Views::getView('test_entity_area');
     $preview = $view->preview('default', [$entities[1]->id()]);
     $this->setRawContent(\Drupal::service('renderer')->render($preview));
+    $view_class = 'js-view-dom-id-' . $view->dom_id;
+    $header_xpath = '//div[@class = "' . $view_class . '"]/div[1]';
+    $footer_xpath = '//div[@class = "' . $view_class . '"]/div[3]';
 
-    $result = $this->xpath('//div[@class = "view-header"]');
+    $result = $this->xpath($header_xpath);
     $this->assertTrue(strpos(trim((string) $result[0]), $entities[0]->label()) !== FALSE, 'The rendered entity appears in the header of the view.');
     $this->assertTrue(strpos(trim((string) $result[0]), 'full') !== FALSE, 'The rendered entity appeared in the right view mode.');
 
-    $result = $this->xpath('//div[@class = "view-footer"]');
+    $result = $this->xpath($footer_xpath);
     $this->assertTrue(strpos(trim((string) $result[0]), $entities[1]->label()) !== FALSE, 'The rendered entity appears in the footer of the view.');
     $this->assertTrue(strpos(trim((string) $result[0]), 'full') !== FALSE, 'The rendered entity appeared in the right view mode.');
 
     $preview = $view->preview('default', array($entities[1]->id()));
     $this->setRawContent(drupal_render($preview));
 
-    $result = $this->xpath('//div[@class = "view-header"]');
+    $result = $this->xpath($header_xpath);
     $this->assertTrue(strpos(trim((string) $result[0]), $entities[0]->label()) !== FALSE, 'The rendered entity appears in the header of the view.');
     $this->assertTrue(strpos(trim((string) $result[0]), 'full') !== FALSE, 'The rendered entity appeared in the right view mode.');
 
-    $result = $this->xpath('//div[@class = "view-footer"]');
+    $result = $this->xpath($footer_xpath);
     $this->assertTrue(strpos(trim((string) $result[0]), $entities[1]->label()) !== FALSE, 'The rendered entity appears in the footer of the view.');
     $this->assertTrue(strpos(trim((string) $result[0]), 'full') !== FALSE, 'The rendered entity appeared in the right view mode.');
 
@@ -158,8 +161,8 @@ public function doTestRender($entities) {
 
     $preview = $view->preview('default', array($entities[1]->id()));
     $this->setRawContent(drupal_render($preview));
-
-    $result = $this->xpath('//div[@class = "view-header"]');
+    $view_class = 'js-view-dom-id-' . $view->dom_id;
+    $result = $this->xpath('//div[@class = "' . $view_class . '"]/div[1]');
     $this->assertTrue(strpos(trim((string) $result[0]), $entities[0]->label()) !== FALSE, 'The rendered entity appears in the header of the view.');
     $this->assertTrue(strpos(trim((string) $result[0]), 'test') !== FALSE, 'The rendered entity appeared in the right view mode.');
 
@@ -167,7 +170,8 @@ public function doTestRender($entities) {
     $view = Views::getView('test_entity_area');
     $preview = $view->preview('default', array($entities[2]->id()));
     $this->setRawContent(drupal_render($preview));
-    $result = $this->xpath('//div[@class = "view-footer"]');
+    $view_class = 'js-view-dom-id-' . $view->dom_id;
+    $result = $this->xpath('//div[@class = "' . $view_class . '"]/div[3]');
     $this->assertTrue(strpos($result[0], $entities[2]->label()) === FALSE, 'The rendered entity does not appear in the footer of the view.');
 
     // Test the available view mode options.
diff --git a/core/modules/views/src/Tests/Handler/AreaViewTest.php b/core/modules/views/src/Tests/Handler/AreaViewTest.php
index ef7498b..dc03fa9 100644
--- a/core/modules/views/src/Tests/Handler/AreaViewTest.php
+++ b/core/modules/views/src/Tests/Handler/AreaViewTest.php
@@ -44,7 +44,7 @@ public function testViewArea() {
     $this->executeView($view);
     $output = $view->render();
     $output = drupal_render($output);
-    $this->assertTrue(strpos($output, 'view-test-simple-argument') !== FALSE, 'The test view is correctly embedded.');
+    $this->assertTrue(strpos($output, 'js-view-dom-id-' . $view->dom_id) !== FALSE, 'The test view is correctly embedded.');
     $view->destroy();
 
     $view->setArguments(array(27));
diff --git a/core/modules/views/src/Tests/ViewAjaxTest.php b/core/modules/views/src/Tests/ViewAjaxTest.php
index 1121f41..f7cda72 100644
--- a/core/modules/views/src/Tests/ViewAjaxTest.php
+++ b/core/modules/views/src/Tests/ViewAjaxTest.php
@@ -56,7 +56,7 @@ public function testAjaxView() {
 
     // Ensure that the view insert command is part of the result.
     $this->assertEqual($data[1]['command'], 'insert');
-    $this->assertTrue(strpos($data[1]['selector'], '.view-dom-id-') === 0);
+    $this->assertTrue(strpos($data[1]['selector'], '.js-view-dom-id-') === 0);
 
     $this->setRawContent($data[1]['data']);
     $result = $this->xpath('//div[contains(@class, "views-row")]');
diff --git a/core/modules/views/templates/views-exposed-form.html.twig b/core/modules/views/templates/views-exposed-form.html.twig
index f5b5fc3..3fdc576 100644
--- a/core/modules/views/templates/views-exposed-form.html.twig
+++ b/core/modules/views/templates/views-exposed-form.html.twig
@@ -18,6 +18,6 @@
   #}
 {{ q }}
 {% endif %}
-<div class="form--inline clearfix">
+<div>
   {{ form }}
 </div>
diff --git a/core/modules/views/templates/views-mini-pager.html.twig b/core/modules/views/templates/views-mini-pager.html.twig
index e17311a..328ca3d 100644
--- a/core/modules/views/templates/views-mini-pager.html.twig
+++ b/core/modules/views/templates/views-mini-pager.html.twig
@@ -12,11 +12,11 @@
  */
 #}
 {% if items.previous or items.next %}
-  <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
-    <h4 class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
-    <ul class="pager__items">
+  <nav role="navigation" aria-labelledby="pagination-heading">
+    <h4 class="visually-hidden">{{ 'Pagination'|t }}</h4>
+    <ul class="js-pager__items">
       {% if items.previous %}
-        <li class="pager__item pager__item--previous">
+        <li>
           <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes }}>
             <span class="visually-hidden">{{ 'Previous page'|t }}</span>
             <span aria-hidden="true">{{ items.previous.text|default('‹‹'|t) }}</span>
@@ -24,14 +24,14 @@
         </li>
       {% endif %}
       {% if items.current %}
-        <li class="pager__item is-active">
+        <li>
           {% trans %}
             Page {{ items.current }}
           {% endtrans %}
         </li>
       {% endif %}
       {% if items.next %}
-        <li class="pager__item pager__item--next">
+        <li>
           <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes }}>
             <span class="visually-hidden">{{ 'Next page'|t }}</span>
             <span aria-hidden="true">{{ items.next.text|default('››'|t) }}</span>
diff --git a/core/modules/views/templates/views-view-grouping.html.twig b/core/modules/views/templates/views-view-grouping.html.twig
index f06e6b6..2418587 100644
--- a/core/modules/views/templates/views-view-grouping.html.twig
+++ b/core/modules/views/templates/views-view-grouping.html.twig
@@ -16,7 +16,7 @@
  * @ingroup themeable
  */
 #}
-<div class="view-grouping">
-  <div class="view-grouping-header">{{ title }}</div>
-  <div class="view-grouping-content">{{ content }}</div>
+<div>
+  <div>{{ title }}</div>
+  <div>{{ content }}</div>
 </div>
diff --git a/core/modules/views/templates/views-view-summary.html.twig b/core/modules/views/templates/views-view-summary.html.twig
index 86b78ad..2c2d454 100644
--- a/core/modules/views/templates/views-view-summary.html.twig
+++ b/core/modules/views/templates/views-view-summary.html.twig
@@ -20,8 +20,8 @@
  * @ingroup themeable
  */
 #}
-<div class="item-list">
-  <ul class="views-summary">
+<div>
+  <ul>
   {% for row in rows %}
     <li><a href="{{ row.url }}"{{ row.attributes.addClass(row.active ? 'is-active') }}>{{ row.link }}</a>
       {% if options.count %}
diff --git a/core/modules/views/templates/views-view-table.html.twig b/core/modules/views/templates/views-view-table.html.twig
index 48f8a4f..9efcc77 100644
--- a/core/modules/views/templates/views-view-table.html.twig
+++ b/core/modules/views/templates/views-view-table.html.twig
@@ -34,8 +34,6 @@
 #}
 {%
   set classes = [
-    'views-table',
-    'views-view-table',
     'cols-' ~ header|length,
     responsive ? 'responsive-enabled',
     sticky ? 'sticky-enabled',
diff --git a/core/modules/views/templates/views-view.html.twig b/core/modules/views/templates/views-view.html.twig
index a62bde1..9a661b8 100644
--- a/core/modules/views/templates/views-view.html.twig
+++ b/core/modules/views/templates/views-view.html.twig
@@ -34,11 +34,7 @@
 #}
 {%
   set classes = [
-    'view',
-    'view-' ~ id|clean_class,
-    'view-id-' ~ id,
-    'view-display-id-' ~ display_id,
-    dom_id ? 'view-dom-id-' ~ dom_id,
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
   ]
 %}
 <div{{ attributes.addClass(classes) }}>
@@ -48,27 +44,27 @@
   {% endif %}
   {{ title_suffix }}
   {% if header %}
-    <div class="view-header">
+    <div>
       {{ header }}
     </div>
   {% endif %}
   {% if exposed %}
-    <div class="view-filters">
+    <div>
       {{ exposed }}
     </div>
   {% endif %}
   {% if attachment_before %}
-    <div class="attachment attachment-before">
+    <div>
       {{ attachment_before }}
     </div>
   {% endif %}
 
   {% if rows %}
-    <div class="view-content">
+    <div>
       {{ rows }}
     </div>
   {% elseif empty %}
-    <div class="view-empty">
+    <div>
       {{ empty }}
     </div>
   {% endif %}
@@ -77,7 +73,7 @@
     {{ pager }}
   {% endif %}
   {% if attachment_after %}
-    <div class="attachment attachment-after">
+    <div>
       {{ attachment_after }}
     </div>
   {% endif %}
@@ -85,12 +81,12 @@
     {{ more }}
   {% endif %}
   {% if footer %}
-    <div class="view-footer">
+    <div>
       {{ footer }}
     </div>
   {% endif %}
   {% if feed_icons %}
-    <div class="feed-icons">
+    <div>
       {{ feed_icons }}
     </div>
   {% endif %}
diff --git a/core/modules/views/tests/modules/views_test_data/templates/views-view--frontpage.html.twig b/core/modules/views/tests/modules/views_test_data/templates/views-view--frontpage.html.twig
index 1d7ae51..7b97966 100644
--- a/core/modules/views/tests/modules/views_test_data/templates/views-view--frontpage.html.twig
+++ b/core/modules/views/tests/modules/views_test_data/templates/views-view--frontpage.html.twig
@@ -11,7 +11,7 @@
  *     - view-[css_name]
  *     - view-id-[view_name]
  *     - view-display-id-[display_name]
- *     - view-dom-id-[dom_id]
+ *     - js-view-dom-id-[dom_id]
  * - css_name: A css-safe version of the view name.
  * - css_class: The user-specified classes names, if any.
  * - header: The optional header.
diff --git a/core/modules/views/tests/src/Unit/Controller/ViewAjaxControllerTest.php b/core/modules/views/tests/src/Unit/Controller/ViewAjaxControllerTest.php
index f93a16b..dc5a898 100644
--- a/core/modules/views/tests/src/Unit/Controller/ViewAjaxControllerTest.php
+++ b/core/modules/views/tests/src/Unit/Controller/ViewAjaxControllerTest.php
@@ -264,7 +264,7 @@ public function testAjaxViewWithPager() {
 
     $commands = $this->getCommands($response);
     $this->assertEquals('viewsScrollTop', $commands[0]['command']);
-    $this->assertEquals('.view-dom-id-' . $dom_id, $commands[0]['selector']);
+    $this->assertEquals('.js-view-dom-id-' . $dom_id, $commands[0]['selector']);
 
     $this->assertViewResultCommand($response, 1);
   }
diff --git a/core/modules/views_ui/src/Tests/PreviewTest.php b/core/modules/views_ui/src/Tests/PreviewTest.php
index ff10213..e52802f 100644
--- a/core/modules/views_ui/src/Tests/PreviewTest.php
+++ b/core/modules/views_ui/src/Tests/PreviewTest.php
@@ -119,7 +119,7 @@ public function testPreviewWithPagersUI() {
     $this->getPreviewAJAX('test_pager_full', 'default', 5);
 
     // Test that the pager is present and rendered.
-    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
+    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'js-pager__items'));
     $this->assertTrue(!empty($elements), 'Full pager found.');
 
     // Verify elements and links to pages.
@@ -145,7 +145,7 @@ public function testPreviewWithPagersUI() {
     $this->clickPreviewLinkAJAX($elements[0]['href'], 5);
 
     // Test that the pager is present and rendered.
-    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
+    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'js-pager__items'));
     $this->assertTrue(!empty($elements), 'Full pager found.');
 
     // Verify elements and links to pages.
@@ -177,7 +177,7 @@ public function testPreviewWithPagersUI() {
     $this->getPreviewAJAX('test_mini_pager', 'default', 3);
 
     // Test that the pager is present and rendered.
-    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
+    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'js-pager__items'));
     $this->assertTrue(!empty($elements), 'Mini pager found.');
 
     // Verify elements and links to pages.
@@ -193,7 +193,7 @@ public function testPreviewWithPagersUI() {
     $this->clickPreviewLinkAJAX($elements[0]['href'], 3);
 
     // Test that the pager is present and rendered.
-    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
+    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'js-pager__items'));
     $this->assertTrue(!empty($elements), 'Mini pager found.');
 
     // Verify elements and links to pages.
diff --git a/core/themes/bartik/css/components/pager.css b/core/themes/bartik/css/components/pager.css
index cebaeda..a6e43ad 100644
--- a/core/themes/bartik/css/components/pager.css
+++ b/core/themes/bartik/css/components/pager.css
@@ -4,7 +4,7 @@
  */
 
 /* Using .pager selector on the first one to override .region-content ul. */
-.pager .pager__items {
+.pager .js-pager__items {
   padding: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
diff --git a/core/themes/classy/templates/navigation/pager.html.twig b/core/themes/classy/templates/navigation/pager.html.twig
index 298210e..8bc0c0e 100644
--- a/core/themes/classy/templates/navigation/pager.html.twig
+++ b/core/themes/classy/templates/navigation/pager.html.twig
@@ -32,7 +32,7 @@
 {% if items %}
   <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
     <h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
-    <ul class="pager__items">
+    <ul class="js-pager__items">
       {# Print first item if we are not on the first page. #}
       {% if items.first %}
         <li class="pager__item pager__item--first">
diff --git a/core/themes/classy/templates/views/views-mini-pager.html.twig b/core/themes/classy/templates/views/views-mini-pager.html.twig
index ba0dbb5..14e1c06 100644
--- a/core/themes/classy/templates/views/views-mini-pager.html.twig
+++ b/core/themes/classy/templates/views/views-mini-pager.html.twig
@@ -12,7 +12,7 @@
 {% if items.previous or items.next %}
   <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
     <h4 class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
-    <ul class="pager__items">
+    <ul class="js-pager__items">
       {% if items.previous %}
         <li class="pager__item pager__item--previous">
           <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes }}>
diff --git a/core/themes/classy/templates/views/views-view.html.twig b/core/themes/classy/templates/views/views-view.html.twig
index f7fdf90..f0ed63c 100644
--- a/core/themes/classy/templates/views/views-view.html.twig
+++ b/core/themes/classy/templates/views/views-view.html.twig
@@ -36,7 +36,7 @@
     'view-' ~ id|clean_class,
     'view-id-' ~ id,
     'view-display-id-' ~ display_id,
-    dom_id ? 'view-dom-id-' ~ dom_id,
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
   ]
 %}
 <div{{ attributes.addClass(classes) }}>
diff --git a/core/themes/seven/css/components/pager.css b/core/themes/seven/css/components/pager.css
index 6a84de3..ab552d1 100644
--- a/core/themes/seven/css/components/pager.css
+++ b/core/themes/seven/css/components/pager.css
@@ -2,11 +2,11 @@
  * @file
  * Styles for Seven's Pagination.
  */
-.pager__items {
+.js-pager__items {
   margin: 0.25em 0 0.25em 1.5em; /* LTR */
   padding: 0;
 }
-[dir="rtl"] .pager__items {
+[dir="rtl"] .js-pager__items {
   margin: 0.25em 1.5em 0.25em 0;
 }
 .pager__item {