diff --git a/core/modules/block_content/js/block_content.js b/core/modules/block_content/js/block_content.js
index de36d4b..8d4c47b 100644
--- a/core/modules/block_content/js/block_content.js
+++ b/core/modules/block_content/js/block_content.js
@@ -12,13 +12,13 @@
       var $context = $(context);
       $context.find('.block-content-form-revision-information').drupalSetSummary(function (context) {
         var $revisionContext = $(context);
-        var revisionCheckbox = $revisionContext.find('.form-item-revision input');
+        var revisionCheckbox = $revisionContext.find('.js-form-item-revision input');
 
         // Return 'New revision' if the 'Create new revision' checkbox is checked,
         // or if the checkbox doesn't exist, but the revision log does. For users
         // without the "Administer content" permission the checkbox won't appear,
         // but the revision log will if the content type is set to auto-revision.
-        if (revisionCheckbox.is(':checked') || (!revisionCheckbox.length && $revisionContext.find('.form-item-revision-log textarea').length)) {
+        if (revisionCheckbox.is(':checked') || (!revisionCheckbox.length && $revisionContext.find('.js-form-item-revision-log textarea').length)) {
           return Drupal.t('New revision');
         }
 
@@ -28,13 +28,13 @@
       $context.find('fieldset.block-content-translation-options').drupalSetSummary(function (context) {
         var $translationContext = $(context);
         var translate;
-        var $checkbox = $translationContext.find('.form-item-translation-translate input');
+        var $checkbox = $translationContext.find('.js-form-item-translation-translate input');
 
         if ($checkbox.size()) {
           translate = $checkbox.is(':checked') ? Drupal.t('Needs to be updated') : Drupal.t('Does not need to be updated');
         }
         else {
-          $checkbox = $translationContext.find('.form-item-translation-retranslate input');
+          $checkbox = $translationContext.find('.js-form-item-translation-retranslate input');
           translate = $checkbox.is(':checked') ? Drupal.t('Flag other translations as outdated') : Drupal.t('Do not flag other translations as outdated');
         }
 
diff --git a/core/modules/ckeditor/js/ckeditor.admin.js b/core/modules/ckeditor/js/ckeditor.admin.js
index ff75541..260430c 100644
--- a/core/modules/ckeditor/js/ckeditor.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.admin.js
@@ -16,7 +16,7 @@
         var $textarea = $configurationForm
           // Hide the textarea that contains the serialized representation of the
           // CKEditor configuration.
-          .find('.form-item-editor-settings-toolbar-button-groups')
+          .find('.js-form-item-editor-settings-toolbar-button-groups')
           .hide()
           // Return the textarea child node from this expression.
           .find('textarea');
diff --git a/core/modules/comment/comment-entity-form.js b/core/modules/comment/comment-entity-form.js
index b41ab84..6e639bc 100644
--- a/core/modules/comment/comment-entity-form.js
+++ b/core/modules/comment/comment-entity-form.js
@@ -11,7 +11,7 @@
     attach: function (context) {
       var $context = $(context);
       $context.find('fieldset.comment-entity-settings-form').drupalSetSummary(function (context) {
-        return Drupal.checkPlain($(context).find('.form-item-comment input:checked').next('label').text());
+        return Drupal.checkPlain($(context).find('.js-form-item-comment input:checked').next('label').text());
       });
     }
   };
diff --git a/core/modules/field_ui/field_ui.js b/core/modules/field_ui/field_ui.js
index 3ee0dab..aaf6b41 100644
--- a/core/modules/field_ui/field_ui.js
+++ b/core/modules/field_ui/field_ui.js
@@ -16,9 +16,9 @@
         // "re-use existing" can never be filled and submitted at the same time.
         // The actual validation will happen server-side.
         $form.find(
-          '.form-item-label label,' +
-          '.form-item-field-name label,' +
-          '.form-item-existing-storage-label label')
+          '.js-form-item-label label,' +
+          '.js-form-item-field-name label,' +
+          '.js-form-item-existing-storage-label label')
           .addClass('form-required');
 
         var $newFieldType = $form.find('select[name="new_storage_type"]');
diff --git a/core/modules/language/config/optional/tour.tour.language.yml b/core/modules/language/config/optional/tour.tour.language.yml
index 7cca3e5..ffc855d 100644
--- a/core/modules/language/config/optional/tour.tour.language.yml
+++ b/core/modules/language/config/optional/tour.tour.language.yml
@@ -34,7 +34,7 @@ tips:
     body: '<p>You can change the default language of the site by choosing one of your configured languages as default. The site will use the default language in situations where no choice is made but a language should be set, for example as the language of the displayed interface.</p>'
     weight: 4
     attributes:
-      data-class: form-item-site-default-language
+      data-class: js-form-item-site-default-language
   language-operations:
     id: language-operations
     plugin: text
diff --git a/core/modules/menu_ui/menu_ui.js b/core/modules/menu_ui/menu_ui.js
index 36fb1d6..87d443e 100644
--- a/core/modules/menu_ui/menu_ui.js
+++ b/core/modules/menu_ui/menu_ui.js
@@ -6,8 +6,8 @@
     attach: function (context) {
       $(context).find('.menu-link-form').drupalSetSummary(function (context) {
         var $context = $(context);
-        if ($context.find('.form-item-menu-enabled input').is(':checked')) {
-          return Drupal.checkPlain($context.find('.form-item-menu-title input').val());
+        if ($context.find('.js-form-item-menu-enabled input').is(':checked')) {
+          return Drupal.checkPlain($context.find('.js-form-item-menu-title input').val());
         }
         else {
           return Drupal.t('Not in menu');
@@ -26,9 +26,9 @@
         var $this = $(this);
         // Try to find menu settings widget elements as well as a 'title' field in
         // the form, but play nicely with user permissions and form alterations.
-        var $checkbox = $this.find('.form-item-menu-enabled input');
-        var $link_title = $context.find('.form-item-menu-title input');
-        var $title = $this.closest('form').find('.form-item-title-0-value input');
+        var $checkbox = $this.find('.js-form-item-menu-enabled input');
+        var $link_title = $context.find('.js-form-item-menu-title input');
+        var $title = $this.closest('form').find('.js-form-item-title-0-value input');
         // Bail out if we do not have all required fields.
         if (!($checkbox.length && $link_title.length && $title.length)) {
           return;
diff --git a/core/modules/node/content_types.js b/core/modules/node/content_types.js
index c77a2c3..6c4e3dd 100644
--- a/core/modules/node/content_types.js
+++ b/core/modules/node/content_types.js
@@ -29,7 +29,7 @@
       $('#edit-language', context).drupalSetSummary(function (context) {
         var vals = [];
 
-        vals.push($(".form-item-language-configuration-langcode select option:selected", context).text());
+        vals.push($(".js-form-item-language-configuration-langcode select option:selected", context).text());
 
         $('input:checked', context).next('label').each(function () {
           vals.push(Drupal.checkPlain($(this).text()));
diff --git a/core/modules/node/node.js b/core/modules/node/node.js
index 60db08f..67f350e 100644
--- a/core/modules/node/node.js
+++ b/core/modules/node/node.js
@@ -12,13 +12,13 @@
       var $context = $(context);
       $context.find('.node-form-revision-information').drupalSetSummary(function (context) {
         var $revisionContext = $(context);
-        var revisionCheckbox = $revisionContext.find('.form-item-revision input');
+        var revisionCheckbox = $revisionContext.find('.js-form-item-revision input');
 
         // Return 'New revision' if the 'Create new revision' checkbox is checked,
         // or if the checkbox doesn't exist, but the revision log does. For users
         // without the "Administer content" permission the checkbox won't appear,
         // but the revision log will if the content type is set to auto-revision.
-        if (revisionCheckbox.is(':checked') || (!revisionCheckbox.length && $revisionContext.find('.form-item-revision-log textarea').length)) {
+        if (revisionCheckbox.is(':checked') || (!revisionCheckbox.length && $revisionContext.find('.js-form-item-revision-log textarea').length)) {
           return Drupal.t('New revision');
         }
 
@@ -52,13 +52,13 @@
       $context.find('fieldset.node-translation-options').drupalSetSummary(function (context) {
         var $translationContext = $(context);
         var translate;
-        var $checkbox = $translationContext.find('.form-item-translation-translate input');
+        var $checkbox = $translationContext.find('.js-form-item-translation-translate input');
 
         if ($checkbox.size()) {
           translate = $checkbox.is(':checked') ? Drupal.t('Needs to be updated') : Drupal.t('Does not need to be updated');
         }
         else {
-          $checkbox = $translationContext.find('.form-item-translation-retranslate input');
+          $checkbox = $translationContext.find('.js-form-item-translation-retranslate input');
           translate = $checkbox.is(':checked') ? Drupal.t('Flag other translations as outdated') : Drupal.t('Do not flag other translations as outdated');
         }
 
diff --git a/core/modules/options/src/Tests/OptionsWidgetsTest.php b/core/modules/options/src/Tests/OptionsWidgetsTest.php
index b8cf90e..c56a105 100644
--- a/core/modules/options/src/Tests/OptionsWidgetsTest.php
+++ b/core/modules/options/src/Tests/OptionsWidgetsTest.php
@@ -477,8 +477,8 @@ function testEmptyValue() {
 
     // Display form: check that _none options are present and has label.
     $this->drupalGet('entity_test/manage/' . $entity->id());
-    $this->assertTrue($this->xpath('//div[@id=:id]//div[@class=:class]//input[@value=:value]', array(':id' => 'edit-card-1', ':class' => 'form-item form-type-radio form-item-card-1', ':value' => '_none')), 'A test radio button has a "None" choice.');
-    $this->assertTrue($this->xpath('//div[@id=:id]//div[@class=:class]//label[@for=:for and text()=:label]', array(':id' => 'edit-card-1', ':class' => 'form-item form-type-radio form-item-card-1', ':for' => 'edit-card-1-none', ':label' => 'N/A')), 'A test radio button has a "N/A" choice.');
+    $this->assertTrue($this->xpath('//div[@id=:id]//div[@class=:class]//input[@value=:value]', array(':id' => 'edit-card-1', ':class' => 'form-item form-type-radio js-form-item-card-1 form-item-card-1', ':value' => '_none')), 'A test radio button has a "None" choice.');
+    $this->assertTrue($this->xpath('//div[@id=:id]//div[@class=:class]//label[@for=:for and text()=:label]', array(':id' => 'edit-card-1', ':class' => 'form-item form-type-radio js-form-item-card-1 form-item-card-1', ':for' => 'edit-card-1-none', ':label' => 'N/A')), 'A test radio button has a "N/A" choice.');
 
     // Change it to the select widget.
     entity_get_form_display('entity_test', 'entity_test', 'default')
diff --git a/core/modules/path/path.js b/core/modules/path/path.js
index aa91bb2..29a8543 100644
--- a/core/modules/path/path.js
+++ b/core/modules/path/path.js
@@ -9,7 +9,7 @@
   Drupal.behaviors.pathDetailsSummaries = {
     attach: function (context) {
       $(context).find('.path-form').drupalSetSummary(function (context) {
-        var path = $('.form-item-path-0-alias input').val();
+        var path = $('.js-form-item-path-0-alias input').val();
 
         return path ?
           Drupal.t('Alias: @alias', {'@alias': path}) :
diff --git a/core/modules/system/src/Tests/Form/ElementsLabelsTest.php b/core/modules/system/src/Tests/Form/ElementsLabelsTest.php
index db5dbee..237391c 100644
--- a/core/modules/system/src/Tests/Form/ElementsLabelsTest.php
+++ b/core/modules/system/src/Tests/Form/ElementsLabelsTest.php
@@ -71,7 +71,7 @@ function testFormLabels() {
     $elements = $this->xpath('//label[@for="edit-form-textfield-test-title-no-show"]');
     $this->assertFalse(isset($elements[0]), 'No label tag when title set not to display.');
 
-    $elements = $this->xpath('//div[contains(@class, "form-item-form-textfield-test-title-invisible") and contains(@class, "form-no-label")]');
+    $elements = $this->xpath('//div[contains(@class, "js-form-item-form-textfield-test-title-invisible") and contains(@class, "form-no-label")]');
     $this->assertTrue(isset($elements[0]), 'Field class is form-no-label when there is no label.');
 
     // Check #field_prefix and #field_suffix placement.
@@ -82,10 +82,10 @@ function testFormLabels() {
     $this->assertTrue(isset($elements[0]), 'Properly places the #field_suffix element immediately after the form field.');
 
     // Check #prefix and #suffix placement.
-    $elements = $this->xpath('//div[@id="form-test-textfield-title-prefix"]/following-sibling::div[contains(@class, \'form-item-form-textfield-test-title\')]');
+    $elements = $this->xpath('//div[@id="form-test-textfield-title-prefix"]/following-sibling::div[contains(@class, \'js-form-item-form-textfield-test-title\')]');
     $this->assertTrue(isset($elements[0]), 'Properly places the #prefix element before the form item.');
 
-    $elements = $this->xpath('//div[@id="form-test-textfield-title-suffix"]/preceding-sibling::div[contains(@class, \'form-item-form-textfield-test-title\')]');
+    $elements = $this->xpath('//div[@id="form-test-textfield-title-suffix"]/preceding-sibling::div[contains(@class, \'js-form-item-form-textfield-test-title\')]');
     $this->assertTrue(isset($elements[0]), 'Properly places the #suffix element before the form item.');
 
     // Check title attribute for radios and checkboxes.
diff --git a/core/modules/system/src/Tests/Form/RebuildTest.php b/core/modules/system/src/Tests/Form/RebuildTest.php
index e993b49..73cd109 100644
--- a/core/modules/system/src/Tests/Form/RebuildTest.php
+++ b/core/modules/system/src/Tests/Form/RebuildTest.php
@@ -109,7 +109,7 @@ function testPreserveFormActionAfterAJAX() {
 
     // Ensure that the form contains two items in the multi-valued field, so we
     // know we're testing a form that was correctly retrieved from cache.
-    $this->assert(count($this->xpath('//form[contains(@id, "node-page-form")]//div[contains(@class, "form-item-field-ajax-test")]//input[@type="text"]')) == 2, 'Form retained its state from cache.');
+    $this->assert(count($this->xpath('//form[contains(@id, "node-page-form")]//div[contains(@class, "js-form-item-field-ajax-test")]//input[@type="text"]')) == 2, 'Form retained its state from cache.');
 
     // Ensure that the form's action is correct.
     $forms = $this->xpath('//form[contains(@class, "node-page-form")]');
diff --git a/core/modules/system/src/Tests/System/ThemeTest.php b/core/modules/system/src/Tests/System/ThemeTest.php
index d5bb6f6..d1ff7aa 100644
--- a/core/modules/system/src/Tests/System/ThemeTest.php
+++ b/core/modules/system/src/Tests/System/ThemeTest.php
@@ -95,7 +95,7 @@ function testThemeSettings() {
 
       // Verify logo path examples.
       $elements = $this->xpath('//div[contains(@class, :item)]/div[@class=:description]/code', array(
-        ':item' => 'form-item-logo-path',
+        ':item' => 'js-form-item-logo-path',
         ':description' => 'description',
       ));
       // Expected default values (if all else fails).
diff --git a/core/modules/system/templates/form-element.html.twig b/core/modules/system/templates/form-element.html.twig
index a961801..0887466 100644
--- a/core/modules/system/templates/form-element.html.twig
+++ b/core/modules/system/templates/form-element.html.twig
@@ -49,7 +49,7 @@
   set classes = [
     'form-item',
     'form-type-' ~ type|clean_class,
-    'form-item-' ~ name|clean_class,
+    'js-form-item-' ~ name|clean_class,
     title_display not in ['after', 'before'] ? 'form-no-label',
     disabled == 'disabled' ? 'form-disabled',
   ]
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index 7f217dc..a95fbdc 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -432,7 +432,7 @@
       }
       var $context = $(context);
       var $table = $context.find('#views-rearrange-filters').once('views-rearrange-filters');
-      var $operator = $context.find('.form-item-filter-groups-operator').once('views-rearrange-filters');
+      var $operator = $context.find('.js-form-item-filter-groups-operator').once('views-rearrange-filters');
       if ($table.length) {
         new Drupal.viewsUi.RearrangeFilterHandler($table, $operator);
       }
@@ -775,7 +775,7 @@
   Drupal.behaviors.viewsFilterConfigSelectAll = {
     attach: function (context) {
       // Show the select all checkbox.
-      $(context).find('#views-ui-handler-form div.form-item-options-value-all').once('filterConfigSelectAll')
+      $(context).find('#views-ui-handler-form div.js-form-item-options-value-all').once('filterConfigSelectAll')
         .show()
         .find('input[type=checkbox]')
         .on('click', function () {
@@ -786,7 +786,7 @@
           });
         });
       // Uncheck the select all checkbox if any of the others are unchecked.
-      $('#views-ui-handler-form').find('div.form-type-checkbox').not($('.form-item-options-value-all'))
+      $('#views-ui-handler-form').find('div.form-type-checkbox').not($('.js-form-item-options-value-all'))
         .find('input[type=checkbox]')
         .on('click', function () {
           if ($(this).is('checked') === false) {
diff --git a/core/themes/classy/templates/form/form-element.html.twig b/core/themes/classy/templates/form/form-element.html.twig
index cf54c20..8b316c8 100644
--- a/core/themes/classy/templates/form/form-element.html.twig
+++ b/core/themes/classy/templates/form/form-element.html.twig
@@ -47,6 +47,7 @@
   set classes = [
     'form-item',
     'form-type-' ~ type|clean_class,
+    'js-form-item-' ~ name|clean_class,
     'form-item-' ~ name|clean_class,
     title_display not in ['after', 'before'] ? 'form-no-label',
     disabled == 'disabled' ? 'form-disabled',