diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index dfee854..2eba338 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1538,9 +1538,15 @@ function template_preprocess_field(&$variables, $hook) {
 
   // 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.
@@ -1552,6 +1558,18 @@ function template_preprocess_field(&$variables, $hook) {
   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'], (array) $element['#items'][0]->_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
diff --git a/core/lib/Drupal/Core/Field/WidgetBase.php b/core/lib/Drupal/Core/Field/WidgetBase.php
index e333df3..fa5f1a3 100644
--- a/core/lib/Drupal/Core/Field/WidgetBase.php
+++ b/core/lib/Drupal/Core/Field/WidgetBase.php
@@ -127,9 +127,9 @@ public function form(FieldItemListInterface $items, array &$form, FormStateInter
       '#parents' => array_merge($parents, array($field_name . '_wrapper')),
       '#attributes' => array(
         'class' => array(
-          'field-type-' . Html::getClass($this->fieldDefinition->getType()),
-          'field-name-' . Html::getClass($field_name),
-          'field-widget-' . Html::getClass($this->getPluginId()),
+          'field--type-' . Html::getClass($this->fieldDefinition->getType()),
+          'field--name-' . Html::getClass($field_name),
+          'field--widget-' . Html::getClass($this->getPluginId()),
         ),
       ),
       'widget' => $elements,
diff --git a/core/modules/image/src/Tests/ImageFieldDisplayTest.php b/core/modules/image/src/Tests/ImageFieldDisplayTest.php
index c112437..f0f8612 100644
--- a/core/modules/image/src/Tests/ImageFieldDisplayTest.php
+++ b/core/modules/image/src/Tests/ImageFieldDisplayTest.php
@@ -332,7 +332,7 @@ function testImageFieldDefaultImage() {
     $this->drupalGet('node/' . $node->id());
     // Verify that no image is displayed on the page by checking for the class
     // that would be used on the image field.
-    $this->assertNoPattern('<div class="(.*?)field-name-' . strtr($field_name, '_', '-') . '(.*?)">', 'No image displayed when no image is attached and no default image specified.');
+    $this->assertNoPattern('<div class="(.*?)field--name-' . strtr($field_name, '_', '-') . '(.*?)">', 'No image displayed when no image is attached and no default image specified.');
     $cache_tags_header = $this->drupalGetHeader('X-Drupal-Cache-Tags');
     $this->assertTrue(!preg_match('/ image_style\:/', $cache_tags_header), 'No image style cache tag found.');
 
diff --git a/core/modules/search/src/Tests/SearchExcerptTest.php b/core/modules/search/src/Tests/SearchExcerptTest.php
index 6bea2cb..96d5489 100644
--- a/core/modules/search/src/Tests/SearchExcerptTest.php
+++ b/core/modules/search/src/Tests/SearchExcerptTest.php
@@ -69,7 +69,7 @@ function testSearchExcerpt() {
 
     // The node body that will produce this rendered $text is:
     // 123456789 HTMLTest +123456789+&lsquo;  +&lsquo;  +&lsquo;  +&lsquo;  +12345678  &nbsp;&nbsp;  +&lsquo;  +&lsquo;  +&lsquo;   &lsquo;
-    $text = "<div class=\"field field-name-body field-type-text-with-summary field-label-hidden\"><div class=\"field-items\"><div class=\"field-item even\" property=\"content:encoded\"><p>123456789 HTMLTest +123456789+‘  +‘  +‘  +‘  +12345678      +‘  +‘  +‘   ‘</p>\n</div></div></div> ";
+    $text = "<div class=\"field field--name-body field-type-text-with-summary field-label-hidden\"><div class=\"field-items\"><div class=\"field-item even\" property=\"content:encoded\"><p>123456789 HTMLTest +123456789+‘ +‘ +‘ +‘ +12345678    +‘ +‘ +‘ ‘</p>\n</div></div></div> ";
     $result = search_excerpt('HTMLTest', $text);
     $this->assertFalse(empty($result),  'Rendered Multi-byte HTML encodings are not corrupted in search excerpts');
   }
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index f7af1e4..7bc7147 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -559,19 +559,20 @@ ul.tabs {
 }
 
 /* Field display */
-.field .field-label {
+.field__label {
   font-weight: bold;
+  vertical-align: top;
 }
-.field-label-inline .field-label,
-.field-label-inline .field-items {
-  float:left; /*LTR*/
-  margin-right: 0.5em; /*LTR*/
+.field--label-inline .field__label,
+.field--label-inline > .field__item,
+.field--label-inline .field__items {
+  display: inline-block;
+  padding-right: 0.5em;
 }
-[dir="rtl"] .field-label-inline .field-label,
-[dir="rtl"] .field-label-inline .field-items {
-  float: right;
-  margin-left: 0.5em;
-  margin-right: 0;
+[dir="rtl"] .field--label-inline .field__label,
+[dir="rtl"] .field--label-inline .field__items {
+  padding-left: 0.5em;
+  padding-right: 0;
 }
 .field-label-inline .field-label::after {
   content: ':';
diff --git a/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
index 0745f84..f30f857 100644
--- a/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -28,6 +28,9 @@
  * - 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.
@@ -38,30 +41,54 @@
  * @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',
-  ]
-%}
-{%
-  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>
-  {% endif %}
-  <div{{ content_attributes.addClass('field-items') }}>
+{% if multiple and not label_hidden %}
+  <div{{ attributes }}>
+    <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>
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
     {% endfor %}
+    </div>
   </div>
-</div>
+{% elseif multiple and label_hidden %}
+  {% for item in items %}
+    <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+  {% endfor %}
+{% elseif not multiple and not label_hidden %}
+  <div{{ attributes }}>
+    <div {{ title_attributes.addClass('field__label') }}>{{ label }}:</div>
+    {% for item in items %}
+      <div {{ content_attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  </div>
+{% elseif not multiple and label_hidden %}
+  <div{{ attributes }}>
+    {% 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',
+      ]
+    %}
+    {%
+      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>
+      {% endif %}
+      <div{{ content_attributes.addClass('field-items') }}>
+        {% for item in items %}
+          <div{{ item.attributes.addClass('field-item') }}>{{ item.content }}</div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+{% endif %}