diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index cc7ecc8..bbf3d4d 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2021,37 +2021,18 @@ function template_preprocess_region(&$variables) {
 function template_preprocess_field(&$variables, $hook) {
   $element = $variables['element'];
 
+  // Creating variables for the template.
+  $variables['entity_type'] = $element['#entity_type'];
+  $variables['field_name'] = $element['#field_name'];
+  $variables['field_type'] = $element['#field_type'];
+  $variables['label_display'] = $element['#label_display'];
+
   $variables['label_hidden'] = ($element['#label_display'] == 'hidden');
   // Always set the field label - allow themes to decide whether to display it.
   // In addition the label should be rendered but hidden to support screen
   // readers.
   $variables['label'] = String::checkPlain($element['#title']);
 
-  // Add default CSS classes. Since there can be many fields rendered on a page,
-  // save some overhead by calling strtr() directly instead of
-  // drupal_html_class().
-  $variables['entity_type_css'] = strtr($element['#entity_type'], '_', '-');
-  $variables['field_name_css'] = strtr($element['#field_name'], '_', '-');
-  $variables['field_type_css'] = strtr($element['#field_type'], '_', '-');
-  $variables['attributes']['class'] = array(
-    'field',
-    'field-' . $variables['entity_type_css'] . '--' . $variables['field_name_css'],
-    'field-name-' . $variables['field_name_css'],
-    'field-type-' . $variables['field_type_css'],
-    'field-label-' . $element['#label_display'],
-  );
-
-  // Add a "clearfix" class to the wrapper since we float the label and the
-  // field items in field.module.css if the label is inline.
-  if ($element['#label_display'] == 'inline') {
-    $variables['attributes']['class'][] = 'clearfix';
-  }
-
-  // Hide labels visually, but display them to screenreaders if applicable.
-  if ($element['#label_display'] == 'visually_hidden') {
-    $variables['title_attributes']['class'][] = 'visually-hidden';
-  }
-
   static $default_attributes;
   if (!isset($default_attributes)) {
     $default_attributes = new Attribute;
diff --git a/core/modules/comment/comment.module b/core/modules/comment/comment.module
index 7b21340..4bf9c8a 100644
--- a/core/modules/comment/comment.module
+++ b/core/modules/comment/comment.module
@@ -836,17 +836,12 @@ function comment_preprocess_field(&$variables) {
     $variables['comment_display_mode'] = $element[0]['#comment_display_mode'];
     $variables['comment_type'] = $element[0]['#comment_type'];
 
-    // Adjust a comment field's attributes.
-    $variables['attributes']['class'][] = 'comment-wrapper';
-    $variables['title_attributes']['class'][] = 'title';
-
     // Append additional attributes (eg. RDFa) from the first field item.
     $variables['attributes'] += $variables['items'][0]['attributes']->storage();
 
     // Create separate variables for the comments and comment form.
     $variables['comments'] = $element[0]['comments'];
     $variables['comment_form'] = $element[0]['comment_form'];
-    $variables['content_attributes']['class'] = array('title', 'comment-form__title');
   }
 }
 
diff --git a/core/modules/comment/templates/field--comment.html.twig b/core/modules/comment/templates/field--comment.html.twig
index 9aae572..b90aaa1 100644
--- a/core/modules/comment/templates/field--comment.html.twig
+++ b/core/modules/comment/templates/field--comment.html.twig
@@ -17,22 +17,43 @@
  * - comment_form: The 'Add new comment' form.
  * - comment_display_mode: Is the comments are threaded.
  * - comment_type: The comment type bundle ID for the comment field.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display of the label for the field.
  *
  * @see template_preprocess_field()
  * @see comment_preprocess_field()
  */
 #}
-<section{{ attributes }}>
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name|clean_class,
+    'field-name-' ~ field_name|clean_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+    'comment-wrapper',
+  ]
+%}
+{%
+  set title_classes = [
+    'title',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+<section{{ attributes.addClass(classes) }}>
   {% if comments and not label_hidden %}
     {{ title_prefix }}
-    <h2{{ title_attributes }}>{{ label }}</h2>
+    <h2{{ title_attributes.addClass(title_classes) }}>{{ label }}</h2>
     {{ title_suffix }}
   {% endif %}
 
   {{ comments }}
 
   {% if comment_form %}
-    <h2{{ content_attributes }}>{{ 'Add new comment'|t }}</h2>
+    <h2{{ content_attributes.addClass('title', 'comment-form__title') }}>{{ 'Add new comment'|t }}</h2>
     {{ comment_form }}
   {% endif %}
 
diff --git a/core/modules/node/templates/field--node--created.html.twig b/core/modules/node/templates/field--node--created.html.twig
index 5799a6c..3100b8d 100644
--- a/core/modules/node/templates/field--node--created.html.twig
+++ b/core/modules/node/templates/field--node--created.html.twig
@@ -11,12 +11,24 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
  *
  * @see field.html.twig
  *
  * @ingroup themeable
  */
 #}
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name|clean_class,
+    'field-name-' ~ field_name|clean_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+  ]
+%}
 <span{{ attributes }}>
   {%- for item in items -%}
     {{ item.content }}
diff --git a/core/modules/node/templates/field--node--title.html.twig b/core/modules/node/templates/field--node--title.html.twig
index 3f37f83..6c420e6 100644
--- a/core/modules/node/templates/field--node--title.html.twig
+++ b/core/modules/node/templates/field--node--title.html.twig
@@ -11,13 +11,25 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
  *
  * @see field.html.twig
  *
  * @ingroup themeable
  */
 #}
-<span{{ attributes }}>
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name|clean_class,
+    'field-name-' ~ field_name|clean_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
   {%- for item in items -%}
     {{ item.content }}
   {%- endfor -%}
diff --git a/core/modules/node/templates/field--node--uid.html.twig b/core/modules/node/templates/field--node--uid.html.twig
index c4318a6..d1f96bd 100644
--- a/core/modules/node/templates/field--node--uid.html.twig
+++ b/core/modules/node/templates/field--node--uid.html.twig
@@ -11,12 +11,24 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
  *
  * @see field.html.twig
  *
  * @ingroup themeable
  */
 #}
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name|clean_class,
+    'field-name-' ~ field_name|clean_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+  ]
+%}
 <span{{ attributes }}>
   {%- for item in items -%}
     {{ item.content }}
diff --git a/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
index 4217b4f..1cfbc47 100644
--- a/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -24,15 +24,35 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display of the label for the field.
  *
  * @see template_preprocess_field()
  *
  * @ingroup themeable
  */
 #}
-<div{{ attributes }}>
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name|clean_class,
+    'field-name-' ~ field_name|clean_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field-label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
   {% if not label_hidden %}
-    <div{{ title_attributes.addClass('field-label') }}>{{ label }}:&nbsp;</div>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}:&nbsp;</div>
   {% endif %}
   <div{{ content_attributes.addClass('field-items') }}>
     {% for item in items %}
diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index db027be..057d337 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -135,21 +135,6 @@ function bartik_preprocess_menu(&$variables) {
 }
 
 /**
- * Implements hook_preprocess_HOOK() for field.html.twig.
- *
- * @see template_preprocess_field()
- */
-function bartik_preprocess_field(&$variables) {
-  $element = $variables['element'];
-  if ($element['#field_type'] == 'taxonomy_term_reference') {
-    $variables['title_attributes']['class'][] = 'field-label';
-    if ($variables['element']['#label_display'] == 'inline') {
-      $variables['title_attributes']['class'][] = 'inline';
-    }
-  }
-}
-
-/**
  * Helper function for handling the site name and slogan.
  */
 function _bartik_process_page(&$variables) {
diff --git a/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig b/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig
index f1289ee..7bb5946 100644
--- a/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig
+++ b/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig
@@ -12,14 +12,34 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display of the label for the field.
  *
  * @see template_preprocess_field()
  * @see bartik_preprocess_field()
  */
 #}
-<div{{ attributes.addClass('clearfix') }}>
+{%
+  set classes = [
+    'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name|clean_class,
+    'field-name-' ~ field_name|clean_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+    'clearfix',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
   {% if not label_hidden %}
-    <h3{{ title_attributes }}>{{ label }}: </h3>
+    {%
+      set title_classes = [
+        'field-label',
+        label_display == 'inline' ? 'inline',
+      ]
+    %}
+    <h3{{ title_attributes.addClass(classes) }}>{{ label }}: </h3>
   {% endif %}
   <ul{{ content_attributes.addClass('links', 'field-items') }}>
     {% for item in items %}