diff --git a/core/lib/Drupal/Core/Menu/MenuLinkTree.php b/core/lib/Drupal/Core/Menu/MenuLinkTree.php
index e4f03e9..40dfbbe 100644
--- a/core/lib/Drupal/Core/Menu/MenuLinkTree.php
+++ b/core/lib/Drupal/Core/Menu/MenuLinkTree.php
@@ -202,7 +202,7 @@ public function build(array $tree, $level = 0) {
     $items = array();
 
     foreach ($tree as $data) {
-      $class = array();
+      $class = ['menu-item'];
       /** @var \Drupal\Core\Menu\MenuLinkInterface $link */
       $link = $data->link;
       // Generally we only deal with visible links, but just in case.
@@ -212,14 +212,14 @@ public function build(array $tree, $level = 0) {
       // Set a class for the <li>-tag. Only set 'expanded' class if the link
       // also has visible children within the current tree.
       if ($data->hasChildren && !empty($data->subtree)) {
-        $class[] = 'expanded';
+        $class[] = 'menu-item--expanded';
       }
       elseif ($data->hasChildren) {
-        $class[] = 'collapsed';
+        $class[] = 'menu-item--collapsed';
       }
       // Set a class if the link is in the active trail.
       if ($data->inActiveTrail) {
-        $class[] = 'active-trail';
+        $class[] = 'menu-item--active-trail';
       }
 
       // Allow menu-specific theme overrides.
diff --git a/core/modules/book/src/BookManager.php b/core/modules/book/src/BookManager.php
index f81cfe7..f4bbcc9 100644
--- a/core/modules/book/src/BookManager.php
+++ b/core/modules/book/src/BookManager.php
@@ -503,27 +503,21 @@ public function bookTreeOutput(array $tree) {
 
     $num_items = count($items);
     foreach ($items as $i => $data) {
-      $class = array();
-      if ($i == 0) {
-        $class[] = 'first';
-      }
-      if ($i == $num_items - 1) {
-        $class[] = 'last';
-      }
+      $class = ['menu-item'];
       // Set a class for the <li>-tag. Since $data['below'] may contain local
       // tasks, only set 'expanded' class if the link also has children within
       // the current book.
       if ($data['link']['has_children'] && $data['below']) {
-        $class[] = 'expanded';
+        $class[] = 'menu-item--expanded';
       }
       elseif ($data['link']['has_children']) {
-        $class[] = 'collapsed';
+        $class[] = 'menu-item--collapsed';
       }
 
       // Set a class if the link is in the active trail.
       if ($data['link']['in_active_trail']) {
-        $class[] = 'active-trail';
-        $data['link']['localized_options']['attributes']['class'][] = 'active-trail';
+        $class[] = 'menu-item--active-trail';
+        $data['link']['localized_options']['attributes']['class'][] = 'menu-teim--active-trail';
       }
 
       // Allow book-specific theme overrides.
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 3271b65..f7af1e4 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -346,18 +346,18 @@ ul.menu {
   margin-right: 1em;
   text-align: right;
 }
-.menu .expanded {
+.menu-item--expanded {
   list-style-image: url(../../../misc/menu-expanded.png);
   list-style-type: circle;
 }
-.menu .collapsed {
+.menu-item--collapsed {
   list-style-image: url(../../../misc/menu-collapsed.png); /* LTR */
   list-style-type: disc;
 }
-[dir="rtl"] .menu .collapsed {
+[dir="rtl"] .menu-item--collapsed {
   list-style-image: url(../../../misc/menu-collapsed-rtl.png);
 }
-ul.menu li {
+.menu-item {
   padding-top: 0.2em;
   margin: 0;
 }
diff --git a/core/modules/system/src/Tests/Menu/AssertMenuActiveTrailTrait.php b/core/modules/system/src/Tests/Menu/AssertMenuActiveTrailTrait.php
index d217c66..fba46d4 100644
--- a/core/modules/system/src/Tests/Menu/AssertMenuActiveTrailTrait.php
+++ b/core/modules/system/src/Tests/Menu/AssertMenuActiveTrailTrait.php
@@ -36,7 +36,7 @@ protected function assertMenuActiveTrail($tree, $last_active) {
         $part_xpath = (!$i ? '//' : '/following-sibling::ul/descendant::');
         $part_xpath .= 'li[contains(@class, :class)]/a[contains(@href, :href) and contains(text(), :title)]';
         $part_args = array(
-          ':class' => 'active-trail',
+          ':class' => 'menu-item--active-trail',
           ':href' => Url::fromUri('base:' . $link_path)->toString(),
           ':title' => $link_title,
         );
@@ -55,7 +55,7 @@ protected function assertMenuActiveTrail($tree, $last_active) {
     $xpath_last_active = ($last_active ? 'and contains(@class, :class-active)' : '');
     $xpath .= 'li[contains(@class, :class-trail)]/a[contains(@href, :href) ' . $xpath_last_active . 'and contains(text(), :title)]';
     $args = array(
-      ':class-trail' => 'active-trail',
+      ':class-trail' => 'menu-item--active-trail',
       ':class-active' => 'active',
       ':href' => Url::fromUri('base:' . $active_link_path)->toString(),
       ':title' => $active_link_title,
diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/modules/toolbar/css/toolbar.menu.css
index 5e70a02..6c5a076 100644
--- a/core/modules/toolbar/css/toolbar.menu.css
+++ b/core/modules/toolbar/css/toolbar.menu.css
@@ -28,7 +28,7 @@
   margin-left: 3em;
   margin-right: 0;
 }
-.toolbar .toolbar-tray .active-trail > .toolbar-box a,
+.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
 .toolbar .toolbar-tray a.active {
   color: #000;
   font-weight: bold;
diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index c2388bc..c089186 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -21,18 +21,18 @@
  * Very specific overrides for Drupal system CSS.
  */
 .toolbar li,
-.toolbar .menu li,
 .toolbar .item-list,
 .toolbar .item-list li,
-.toolbar .menu li.expanded {
+.toolbar .menu-item,
+.toolbar .menu-item--expanded {
   list-style-type: none;
   list-style-image: none;
 }
-.toolbar .menu li {
+.toolbar .menu-item {
   padding-top: 0;
 }
 .toolbar .toolbar-bar .toolbar-tab,
-.toolbar .menu li {
+.toolbar .menu-item {
   display: block;
 }
 .toolbar .toolbar-bar .toolbar-tab.hidden {
@@ -169,7 +169,7 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   right: 0;
 }
 /* Hide secondary menus when the tray is horizontal. */
-.toolbar-oriented .toolbar-tray-horizontal .menu li ul {
+.toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
   display: none;
 }
 /* When the configured standard breakpoint is active and the tray is in a
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index d143a0b..8946e5f 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -102,33 +102,33 @@
 .toolbar .menu {
   background-color: #ffffff;
 }
-.toolbar .toolbar-tray-horizontal .menu li + li {
+.toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
   border-left: 1px solid #dddddd; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu li + li {
+[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
   border-left: 0 none ;
   border-right: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-horizontal .menu li:last-child {
+.toolbar .toolbar-tray-horizontal .menu-item:last-child {
   border-right: 1px solid #dddddd; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu li:last-child {
+[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item:last-child {
   border-left: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-vertical .menu li + li {
+.toolbar .toolbar-tray-vertical .menu-item + .menu-item {
   border-top: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-vertical .menu li:last-child {
+.toolbar .toolbar-tray-vertical .menu-item:last-child {
   border-bottom: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-vertical .menu .menu li {
+.toolbar .toolbar-tray-vertical .menu-item .menu-item {
   border: 0 none;
 }
 .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 {
+.toolbar .toolbar-tray-vertical .menu-item:last-child > ul {
   border-bottom: 0;
 }
 .toolbar .toolbar-tray-vertical .menu .menu .menu .menu {
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index 692cd7f..c14d0d4 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -137,7 +137,7 @@
      * On page load, open the active menu item.
      *
      * Marks the trail of the active link in the menu back to the root of the
-     * menu with .active-trail.
+     * menu with .menu-item--active-trail.
      *
      * @param {jQuery} $menu
      *   The root of the menu.
@@ -148,8 +148,8 @@
         activeItem = location.pathname;
       }
       if (activeItem) {
-        var $activeItem = $menu.find('a[href="' + activeItem + '"]').addClass('active');
-        var $activeTrail = $activeItem.parentsUntil('.root', 'li').addClass('active-trail');
+        var $activeItem = $menu.find('a[href="' + activeItem + '"]').addClass('menu-item--active');
+        var $activeTrail = $activeItem.parentsUntil('.root', 'li').addClass('menu-item--active-trail');
         toggleList($activeTrail, true);
       }
     }
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 7689d57..aebb8e1 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -8,8 +8,8 @@ body {
 }
 #page,
 #main-wrapper,
-.region-primary-menu .menu li a.active,
-.region-primary-menu .menu li .active-trail a {
+.region-primary-menu .menu-item a.active,
+.region-primary-menu .menu-item .menu-item--active-trail a {
   background: #ffffff;
 }
 .tabs ul.primary li a.active {
@@ -53,7 +53,7 @@ a:active,
 .site-branding-block,
 #name-and-slogan a,
 .site-branding-block a,
-.region-secondary-menu .menu li a {
+.region-secondary-menu .menu-item a {
   color: #fffeff;
 }
 
diff --git a/core/themes/bartik/css/components/footer.css b/core/themes/bartik/css/components/footer.css
index 2bac459..4dca1ff 100644
--- a/core/themes/bartik/css/components/footer.css
+++ b/core/themes/bartik/css/components/footer.css
@@ -104,36 +104,36 @@
   clear: both;
 }
 #site-footer__bottom .menu ,
-#site-footer__bottom .menu li {
+#site-footer__bottom .menu-item {
   list-style: none;
   margin: 0;
   padding: 0;
 }
-#site-footer__bottom .menu li a {
+#site-footer__bottom .menu-item a {
   float: left; /* LTR */
   padding: 0 12px;
   display: block;
   border-right: 1px solid #555; /* LTR */
   border-color: rgba(255, 255, 255, 0.15);
 }
-[dir="rtl"] #site-footer__bottom .menu li a {
+[dir="rtl"] #site-footer__bottom .menu-item a {
   float: right;
   border-left: 1px solid #555;
   border-color: rgba(255, 255, 255, 0.15);
   border-right: none;
 }
-#site-footer__bottom .menu li:first-child a {
+#site-footer__bottom .menu-item:first-child a {
   padding-left: 0; /* LTR */
 }
-[dir="rtl"] #site-footer__bottom .menu li:first-child a {
+[dir="rtl"] #site-footer__bottom .menu-item:first-child a {
   padding-right: 0;
   padding-left: 12px;
 }
-#site-footer__bottom .menu li:last-child a {
+#site-footer__bottom .menu-item:last-child a {
   padding-right: 0; /* LTR */
   border-right: none; /* LTR */
 }
-[dir="rtl"] #site-footer__bottom .menu li:last-child a {
+[dir="rtl"] #site-footer__bottom .menu-item:last-child a {
   padding-left: 0;
   border-left: none;
 }
diff --git a/core/themes/bartik/css/components/primary-menu.css b/core/themes/bartik/css/components/primary-menu.css
index 5a37172..4b1ac3b 100644
--- a/core/themes/bartik/css/components/primary-menu.css
+++ b/core/themes/bartik/css/components/primary-menu.css
@@ -12,7 +12,7 @@
 [dir="rtl"] .region-primary-menu .menu {
   text-align: right;
 }
-.region-primary-menu .menu li {
+.region-primary-menu .menu-item {
   float: none;
   list-style: none;
   margin: 0;
@@ -44,7 +44,7 @@
   background: #b3b3b3;
   background: rgba(255, 255, 255, 1);
 }
-.region-primary-menu .menu li a.active {
+.region-primary-menu .menu-item a.active {
   border-bottom: none;
 }
 
@@ -97,11 +97,11 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-t
   display: block;
 }
 
-body:not(:target) .region-primary-menu .menu li {
+body:not(:target) .region-primary-menu .menu-item {
   height: 0;
   overflow: hidden;
 }
-body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu li {
+body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-item {
   height: auto;
   overflow: visible;
 }
@@ -115,8 +115,8 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu l
     padding: 0;
     text-align: center;
   }
-  .region-primary-menu .menu li,
-  body:not(:target) .region-primary-menu .menu li {
+  .region-primary-menu .menu-item,
+  body:not(:target) .region-primary-menu .menu-item {
     float: left; /* LTR */
     margin-right: 5px; /* LTR */
     padding: 0;
@@ -125,16 +125,16 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu l
     height: auto;
     overflow: visible;
   }
-  [dir="rtl"] .region-primary-menu .menu li,
-  [dir="rtl"] body:not(:target) .region-primary-menu .menu li {
+  [dir="rtl"] .region-primary-menu .menu-item,
+  [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
     float: right;
     margin-left: 5px;
     margin-right: 0;
   }
-  .region-primary-menu .menu li:nth-child(3n) {
+  .region-primary-menu .menu-item:nth-child(3n) {
     margin-right: -5px; /* LTR */
   }
-  [dir="rtl"] .region-primary-menu .menu li:nth-child(3n) {
+  [dir="rtl"] .region-primary-menu .menu-item:nth-child(3n) {
     margin-left: -5px;
     margin-right: 0;
   }
@@ -156,8 +156,8 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu l
     margin: 0;
     padding: 0 15px;
   }
-  .region-primary-menu .menu li,
-  body:not(:target) .region-primary-menu .menu li {
+  .region-primary-menu .menu-item,
+  body:not(:target) .region-primary-menu .menu-item {
     float: left; /* LTR */
     list-style: none;
     padding: 0 1px;
@@ -166,8 +166,8 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu l
     height: auto;
     overflow: visible;
   }
-  [dir="rtl"] .region-primary-menu .menu li,
-  [dir="rtl"] body:not(:target) .region-primary-menu .menu li {
+  [dir="rtl"] .region-primary-menu .menu-item,
+  [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
     float: right;
   }
   .region-primary-menu .menu a {
@@ -181,8 +181,8 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu l
     float: right;
     padding: 0.7em 0.8em;
   }
-  .featured .region-primary-menu .menu li a:active,
-  .featured .region-primary-menu .menu li a.active {
+  .featured .region-primary-menu .menu-item a:active,
+  .featured .region-primary-menu .menu-item a.active {
     background: #f0f0f0;
     background: rgba(240, 240, 240, 1.0);
   }
diff --git a/core/themes/bartik/css/components/secondary-menu.css b/core/themes/bartik/css/components/secondary-menu.css
index 6c4476b..0bf73ff 100644
--- a/core/themes/bartik/css/components/secondary-menu.css
+++ b/core/themes/bartik/css/components/secondary-menu.css
@@ -9,7 +9,7 @@
 [dir="rtl"] .region-secondary-menu .menu {
   text-align: left;
 }
-.region-secondary-menu .menu li {
+.region-secondary-menu .menu-item {
   margin: 0;
   padding: 0;
   display: inline;