diff -u b/core/includes/theme.inc b/core/includes/theme.inc
--- b/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1523,15 +1523,9 @@
 
   // Creating variables for the template.
   $variables['entity_type'] = $element['#entity_type'];
-  $variables['field_name'] = strtr($element['#field_name'], '_', '-');
-  $variables['field_type'] = strtr($element['#field_type'], '_', '-');
-  $variables['field_label'] = strtr($element['#label_display'], '_', '-');
+  $variables['field_name'] = $element['#field_name'];
+  $variables['field_type'] = $element['#field_type'];
   $variables['label_display'] = $element['#label_display'];
-   // Are there multiple field items.
-  $variables['multiple'] = FALSE;
-  if (isset($element['#items']) && is_callable($element['#items'], 'getFieldDefinition') && is_callable($element['#items']->getFieldDefinition(), 'isMultiple')) {
-    $variables['multiple'] = $element['#items']->getFieldDefinition()->isMultiple();
-  }
 
   $variables['label_hidden'] = ($element['#label_display'] == 'hidden');
   // Always set the field label - allow themes to decide whether to display it.
@@ -1543,18 +1537,6 @@
   if (!isset($default_attributes)) {
     $default_attributes = new Attribute;
   }
-  // Merge the attributes when its a multiple fields with hidden label
-  if ($element['#label_display'] == 'hidden' && $variables['multiple']) {
-    $variables['attributes'] = NestedArray::mergeDeep($variables['attributes'], $variables['content_attributes']);
-  }
-  // Merge the attributes when its a single field with a label
-  if ($element['#label_display'] != 'hidden' && !$variables['multiple'] && is_object($element['#items'][0])) {
-    $variables['content_attributes'] = NestedArray::mergeDeep($variables['content_attributes'], (array) $element['#items'][0]->_attributes);
-  }
-  // Merge the attributes when its a single field with hidden label
-  if ($element['#label_display'] == 'hidden' && !$variables['multiple'] && is_object($element['#items'][0])) {
-    $variables['attributes'] = NestedArray::mergeDeep($variables['attributes'], $variables['content_attributes']);
-  }
 
   // We want other preprocess functions and the theme implementation to have
   // fast access to the field item render arrays. The item render array keys
@@ -1566,9 +1548,15 @@
 
   // Creating variables for the template.
   $variables['entity_type'] = $element['#entity_type'];
-  $variables['field_name'] = $element['#field_name'];
-  $variables['field_type'] = $element['#field_type'];
+  $variables['field_name'] = strtr($element['#field_name'], '_', '-');
+  $variables['field_type'] = strtr($element['#field_type'], '_', '-');
+  $variables['field_label'] = strtr($element['#label_display'], '_', '-');
   $variables['label_display'] = $element['#label_display'];
+   // Are there multiple field items.
+  $variables['multiple'] = FALSE;
+  if (isset($element['#items']) && is_callable($element['#items'], 'getFieldDefinition') && is_callable($element['#items']->getFieldDefinition(), 'isMultiple')) {
+    $variables['multiple'] = $element['#items']->getFieldDefinition()->isMultiple();
+  }
 
   $variables['label_hidden'] = ($element['#label_display'] == 'hidden');
   // Always set the field label - allow themes to decide whether to display it.
@@ -1580,6 +1568,18 @@
   if (!isset($default_attributes)) {
     $default_attributes = new Attribute;
   }
+  // Merge the attributes when its a multiple fields with hidden label
+  if ($element['#label_display'] == 'hidden' && $variables['multiple']) {
+    $variables['attributes'] = NestedArray::mergeDeep($variables['attributes'], $variables['content_attributes']);
+  }
+  // Merge the attributes when its a single field with a label
+  if ($element['#label_display'] != 'hidden' && !$variables['multiple'] && is_object($element['#items'][0])) {
+    $variables['content_attributes'] = NestedArray::mergeDeep($variables['content_attributes'], (array) $element['#items'][0]->_attributes);
+  }
+  // Merge the attributes when its a single field with hidden label
+  if ($element['#label_display'] == 'hidden' && !$variables['multiple'] && is_object($element['#items'][0])) {
+    $variables['attributes'] = NestedArray::mergeDeep($variables['attributes'], $variables['content_attributes']);
+  }
 
   // We want other preprocess functions and the theme implementation to have
   // fast access to the field item render arrays. The item render array keys
reverted:
--- b/core/themes/classy/templates/field/field.html.twig
+++ a/core/themes/classy/templates/field/field.html.twig
@@ -1,7 +1,7 @@
 {#
 /**
  * @file
+ * Theme override for a field.
- * Default theme implementation for a field.
  *
  * To override output, copy the "field.html.twig" from the templates directory
  * to your theme's directory and customize it, just like customizing other
@@ -28,75 +28,38 @@
  * - items: List of all the field items. Each item contains:
  *   - attributes: List of HTML attributes for each item.
  *   - content: The field item's content.
- * - field_type: @todo: needs description
- * - field_name: @todo: needs description
- * - field_label: @todo: needs description
  * - 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 settings for the label.
  *
  * @see template_preprocess_field()
- *
- * @ingroup themeable
  */
 #}
+{% set field_name_class = field_name|clean_class %}
-
 {%
   set classes = [
     'field',
+    'field-' ~ entity_type|clean_class ~ '--' ~ field_name_class,
+    'field-name-' ~ field_name_class,
+    'field-type-' ~ field_type|clean_class,
+    'field-label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
-    'field--type-' ~ field_type|clean_class,
-    'field--name-' ~ field_name|clean_class,
-    'field--label-' ~ label_display,
   ]
 %}
+{%
+  set title_classes = [
+    'field-label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {% if not label_hidden %}
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
-{#
-The field template is divided into 4 different variations all depending
-on how the field is configured.
-We create 4 variations of the markup to prevent divits & make it easier to
-modify later on
-* Label & multiple fields
-*
-#}
-{% if not label_hidden %}
-{# The field have a label. #}
-  {% if multiple %}
-    {# Multiple items field with a label #}
-    <div{{ attributes.addClass(classes) }}>
-      <div{{ title_attributes.addClass('field__label') }}>{{ label }}:</div>
-      <div{{ content_attributes.addClass('field__items') }}>
-      {% for item in items %}
-        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
-      {% endfor %}
-      </div>
-    </div>
-
-  {% else %}
-    {# Single item field with a label #}
-    <div{{ attributes.addClass(classes) }}>
-      <div{{ title_attributes.addClass('field__label') }}>{{ label }}:</div>
-      {% for item in items %}
-        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
-      {% endfor %}
-    <div>
   {% endif %}
+  <div{{ content_attributes.addClass('field-items') }}>
-
-{% else %}
-{# The field have no label. #}
-  {% if multiple %}
-    {# Multiple items field with no label #}
-    <div{{ attributes.addClass(classes).addClass('field__items') }}>
-      {% for item in items %}
-      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
-      {% endfor %}
-    </div>
-
-  {% else %}
-    {# single item field with no label #}
     {% for item in items %}
+      <div{{ item.attributes.addClass('field-item') }}>{{ item.content }}</div>
-      <div{{ item.attributes.addClass(classes).addClass('field__item') }}>{{ item.content }}</div>
     {% endfor %}
+  </div>
+</div>
-  {% endif %}
-
-{% endif %}
-
only in patch2:
unchanged:
--- a/core/modules/field/src/Tests/EntityReference/EntityReferenceFormatterTest.php
+++ b/core/modules/field/src/Tests/EntityReference/EntityReferenceFormatterTest.php
@@ -184,17 +184,16 @@ public function testEntityFormatter() {
 
     // Test the first field item.
     $expected_rendered_name_field_1 = '<div class="field field-entity-test--name field-name-name field-type-string field-label-hidden">
-    <div class="field-items">
-          <div class="field-item">' . $this->referencedEntity->label() . '</div>
-      </div>
-</div>
+        <div class="field__items">
+              <div class="field__item">' . $this->referencedEntity->label() . '</div>
+            </div>
+  </div>
 ';
+
     $expected_rendered_body_field_1 = '<div class="field field-entity-test--body field-name-body field-type-text field-label-above">
-      <div class="field-label">Body</div>
-    <div class="field-items">
-          <div class="field-item"><p>Hello, world!</p></div>
-      </div>
-</div>
+          <div class="field__label">Body:</div>
+              <div class="field__item"><p>Hello, world!</p></div>
+        </div>
 ';
     drupal_render($build[0]);
     $this->assertEqual($build[0]['#markup'], 'default | ' . $this->referencedEntity->label() .  $expected_rendered_name_field_1 . $expected_rendered_body_field_1, sprintf('The markup returned by the %s formatter is correct for an item with a saved entity.', $formatter));
only in patch2:
unchanged:
--- a/core/modules/system/src/Tests/Ajax/MultiFormTest.php
+++ b/core/modules/system/src/Tests/Ajax/MultiFormTest.php
@@ -59,8 +59,8 @@ function testMultiForm() {
     // desired elements.
     $field_name = 'field_ajax_test';
     $field_xpaths = array(
-      'node-page-form' => '//form[@id="node-page-form"]//div[contains(@class, "field-name-field-ajax-test")]',
-      'node-page-form--2' => '//form[@id="node-page-form--2"]//div[contains(@class, "field-name-field-ajax-test")]',
+      'node-page-form' => '//form[@id="node-page-form"]//div[contains(@class, "field--name-field-ajax-test")]',
+      'node-page-form--2' => '//form[@id="node-page-form--2"]//div[contains(@class, "field--name-field-ajax-test")]',
     );
     $button_name = $field_name . '_add_more';
     $button_value = t('Add another item');
only in patch2:
unchanged:
--- a/core/modules/system/src/Tests/Form/RebuildTest.php
+++ b/core/modules/system/src/Tests/Form/RebuildTest.php
@@ -97,7 +97,7 @@ function testPreserveFormActionAfterAJAX() {
     // field items in the field for which we just added an item.
     $this->drupalGet('node/add/page');
     $this->drupalPostAjaxForm(NULL, array(), array('field_ajax_test_add_more' => t('Add another item')), 'system/ajax', array(), array(), 'node-page-form');
-    $this->assert(count($this->xpath('//div[contains(@class, "field-name-field-ajax-test")]//input[@type="text"]')) == 2, 'AJAX submission succeeded.');
+    $this->assert(count($this->xpath('//div[contains(@class, "field--name-field-ajax-test")]//input[@type="text"]')) == 2, 'AJAX submission succeeded.');
 
     // Submit the form with the non-Ajax "Save" button, leaving the title field
     // blank to trigger a validation error, and ensure that a validation error