diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 4d134b5..172d8e3 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2398,16 +2398,10 @@ function template_preprocess_field(&$variables, $hook) {
   // 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'],
-  );
+  $variables['entity_type'] = $element['#entity_type'];
+  $variables['field_name'] = $element['#field_name'];
+  $variables['field_type'] = $element['#field_type'];
+  $variables['label_display'] = $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') {
diff --git a/core/modules/comment/templates/field--comment.html.twig b/core/modules/comment/templates/field--comment.html.twig
index 9aae572..5aaa7b0 100644
--- a/core/modules/comment/templates/field--comment.html.twig
+++ b/core/modules/comment/templates/field--comment.html.twig
@@ -22,7 +22,19 @@
  * @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
+    'comment-wrapper'
+  ]
+%}
+
+<section{{ attributes.addClass(classes) }}>
   {% if comments and not label_hidden %}
     {{ title_prefix }}
     <h2{{ title_attributes }}>{{ label }}</h2>
diff --git a/core/modules/node/templates/field--node--title.html.twig b/core/modules/node/templates/field--node--title.html.twig
index 25432c0..4bfc166 100644
--- a/core/modules/node/templates/field--node--title.html.twig
+++ b/core/modules/node/templates/field--node--title.html.twig
@@ -15,4 +15,15 @@
  * @ingroup themeable
  */
 #}
-<span{{ attributes }}>{{ items }}</span>
+
+{%
+  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) }}>{{ items }}</span>
diff --git a/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
index d38b028..fdf45c4 100644
--- a/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -23,17 +23,32 @@
  * - content_attributes: HTML attributes for the content.
  * - items: List of all the field items.
  * - item_attributes: List of HTML attributes for each item.
+ * - 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
+  ]
+%}
+
+<div{{ attributes.addClass(classes) }}>
   {% if not label_hidden %}
-    <div class="field-label{% if title_attributes.class %} {{ title_attributes.class }}{% endif %}"{{ title_attributes|without('class') }}>{{ label }}:&nbsp;</div>
+    <div{{ title_attributes.addClass('field-label') }}>{{ label }}:&nbsp;</div>
   {% endif %}
-  <div class="field-items"{{ content_attributes }}>
+  <div{{ content_attributes.addClass('field-items') }}>
     {% for delta, item in items %}
       <div class="field-item"{{ item_attributes[delta] }}>{{ item }}</div>
     {% endfor %}
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 4c579ee..2307cf9 100644
--- a/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig
+++ b/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig
@@ -16,7 +16,18 @@
  * @see bartik_preprocess_field()
  */
 #}
-<div class="{{ attributes.class }} clearfix"{{ attributes|without('class') }}>
+{%
+  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>
   {% endif %}