diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 52ce316..0705401 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2396,9 +2396,11 @@ function template_preprocess_install_page(&$variables) {
  *   - elements: An associative array containing properties of the region.
  */
 function template_preprocess_region(&$variables) {
+  $elements = $variables['elements'];
+
   // Create the $content variable that templates expect.
-  $variables['content'] = $variables['elements']['#children'];
-  $variables['region'] = $variables['elements']['#region'];
+  $variables['content'] = $elements['#children'];
+  $variables['region'] = $elements['#region'];
 
   $variables['attributes']['class'][] = 'region';
   $variables['attributes']['class'][] = drupal_html_class('region-' . $variables['region']);
@@ -2439,24 +2441,15 @@ function template_preprocess_field(&$variables, $hook) {
     $delta++;
   }
 
-  // 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';
+  // Are there multiple field items.
+  if ( isset($element['#items']) && is_object($element['#items']) ){
+    $variables['multiple'] = $element['#items']->getFieldDefinition()->isMultiple();
   }
+  // Add default CSS class names. Since there can be many fields rendered on a
+  // page, save some overhead by calling strtr()
+  $variables['field_name'] = strtr($element['#field_name'], '_', '-');
+  $variables['field_type'] = strtr($element['#field_type'], '_', '-');
+  $variables['field_label'] = strtr($element['#label_display'], '_', '-');
 
   static $default_attributes;
   if (!isset($default_attributes)) {
diff --git a/core/modules/options/lib/Drupal/options/Tests/OptionsFieldUITest.php b/core/modules/options/lib/Drupal/options/Tests/OptionsFieldUITest.php
index dd6d13e..0bd1721 100644
--- a/core/modules/options/lib/Drupal/options/Tests/OptionsFieldUITest.php
+++ b/core/modules/options/lib/Drupal/options/Tests/OptionsFieldUITest.php
@@ -340,7 +340,7 @@ function testNodeDisplay() {
         $output = '1';
       }
 
-      $elements = $this->xpath('//div[text()="' . $output . '"]');
+      $elements = $this->xpath('//div[text()=:output]', array(':output' => $output));
       $this->assertEqual(count($elements), 1, 'Correct options found.');
     }
   }
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 01ee3d1..b1072f0 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -614,17 +614,18 @@ table tr.error {
 }
 
 /* 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*/
+.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;
+[dir="rtl"] .field--label-inline .field__label,
+[dir="rtl"] .field--label-inline .field__items {
   padding-left: 0.5em;
 }
 
diff --git a/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
index a0d527a..837ffed 100644
--- a/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -17,25 +17,90 @@
  *
  * Available variables:
  * - attributes: HTML attributes for the containing element.
- * - label_hidden: Whether to show the field label or not.
+ * - label_visible: Whether to show the field label or not.
  * - title_attributes: HTML attributes for the title.
  * - label: The label for the field.
  * - content_attributes: HTML attributes for the content.
  * - items: List of all the field items.
  * - item_attributes: List of HTML attributes for each item.
+ * - field_type:
+ * - field_name:
+ * - field_label:
  *
  * @see template_preprocess_field()
  *
  * @ingroup themeable
  */
 #}
-<div{{ attributes }}>
-  {% if not label_hidden %}
-    <div class="field-label"{{ title_attributes }}>{{ label }}:&nbsp;</div>
-  {% endif %}
-  <div class="field-items"{{ content_attributes }}>
+
+{#
+{{ attributes.class }} provides a way for modules to add classes to fields
+dynamically.
+#}
+{% set classes %}
+field field--name-{{ field_name }} field--type-{{ field_type }} field--label-{{ field_label }}{{ attributes.class }}
+{% endset %}
+
+{% if multiple and not label_hidden %}
+{#
+  the field is a multiple value field with a visible label
+  Finale markup pattern:
+  <div class="{{ classes }}field--multiple">
+    <div class="field__label">Label</div>
+    <div class="field-items">
+      <div class="field_item">Data</div>
+      <div class="field_item">Data</div>
+    </div>
+  </div>
+#}
+  <div class="{{ classes }}"{{ attributes|without('class') }}>
+    <div class="field__label"{{ title_attributes }}>{{ label }}:</div>
+    <div class="field__items"{{ content_attributes }}>
+      {% for delta, item in items %}
+        <div class="field__item"{{ item_attributes[delta] }}>{{ item }}</div>
+      {% endfor %}
+    </div>
+  </div>
+
+{% elseif multiple and label_hidden %}
+{#
+  We check if its a multiple value field and if its label is hidden
+  <div class="{{ classes }}field-items">
+      <div class="field_item">Data</div>
+      <div class="field_item">Data</div>
+    </div>
+  </div>
+#}
+  <div class="{{ classes }}field__items"{{ attributes|without('class') }}{{ content_attributes }}>
+    {% for delta, item in items %}
+      <div class="field__item"{{ item_attributes[delta] }}>{{ item }}</div>
+    {% endfor %}
+  </div>
+
+{% elseif not multiple and not label_hidden %}
+{#
+  The field is a single field with the label visible
+  <div class="{{ classes }}">
+    <div class="field_label">Data</div>
+    <div class="field_item">Data</div>
+  </div>
+#}
+  <div class="{{ classes }}"{{ attributes|without('class') }}>
+    <div class="field__label"{{ title_attributes }}>{{ label }}:</div>
     {% for delta, item in items %}
-      <div class="field-item"{{ item_attributes[delta] }}>{{ item }}</div>
+      <div class="field__item"{{ content_attributes }}{{ item_attributes[delta] }}>{{ item }}</div>
     {% endfor %}
   </div>
-</div>
+
+{% elseif not multiple and label_hidden %}
+{#
+  The field is a single field with no label
+  <div class="{{ classes }}field__item">
+    data
+  </div>
+#}
+  {% for delta, item in items %}
+    <div class="{{ classes }} field__item"{{ attributes|without('class') }}{{ content_attributes }}{{ item_attributes[delta] }}>{{ item }}</div>
+  {% endfor %}
+
+{% endif %}
diff --git a/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php b/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php
index d07ab4a..5d20b3c 100644
--- a/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php
+++ b/core/modules/taxonomy/lib/Drupal/taxonomy/Tests/TermTest.php
@@ -349,12 +349,12 @@ function testTermInterface() {
     $this->assertText($edit['description[0][value]'], 'The randomly generated term description is present.');
 
     // Did this page request display a 'term-listing-heading'?
-    $this->assertTrue($this->xpath('//div[contains(@class, "field-taxonomy-term--description")]'), 'Term page displayed the term description element.');
+    $this->assertTrue($this->xpath('//div[contains(@class,"taxonomy-term")] //div[contains(@class, "field-name--description")]'), 'Term page displayed the term description element.');
     // Check that it does NOT show a description when description is blank.
     $term->setDescription(NULL);
     $term->save();
     $this->drupalGet('taxonomy/term/' . $term->id());
-    $this->assertFalse($this->xpath('//div[contains(@class, "field-taxonomy-term--description")]'), 'Term page did not display the term description when description was blank.');
+    $this->assertFalse($this->xpath('//div[contains(@class,"taxonomy-term")] //div[contains(@class, "field-name--description")]'), 'Term page did not display the term description when description was blank.');
 
     // Check that the description value is processed.
     $value = $this->randomName();
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 663d60c..1521448 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -120,7 +120,7 @@ ul.contextual-links,
 ul.links,
 ul.primary,
 .item-list .pager,
-div.field-type-taxonomy-term-reference,
+.field-type--taxonomy-term-reference,
 div.messages,
 div.meta,
 p.comment-time,
@@ -702,46 +702,44 @@ h1#page-title {
   color: #68696b;
   margin-bottom: -5px;
 }
-.submitted .field-name-field-user-picture img {
-  float: left; /* LTR */
+.submitted .field-name--field-user-picture img {
   margin: 1px 20px 0 0; /* LTR */
 }
-[dir="rtl"] .submitted .field-name-field-user-picture img {
-  float: right;
+[dir="rtl"] .submitted .field-name--field-user-picture img {
   margin-left: 20px;
   margin-right: 0;
 }
-.field-type-taxonomy-term-reference {
+.field-type--taxonomy-term-reference {
   margin: 0 0 1.2em;
 }
-.field-type-taxonomy-term-reference .field-label {
+.field-type--taxonomy-term-reference .field__label {
   font-weight: normal;
   margin: 0;
   padding-right: 5px; /* LTR */
 }
-[dir="rtl"] .field-type-taxonomy-term-reference .field-label {
+[dir="rtl"] .field--type-taxonomy-term-reference .field__label {
   padding-left: 5px;
   padding-right: 0;
 }
-.field-type-taxonomy-term-reference .field-label,
-.field-type-taxonomy-term-reference ul.links {
+.field-type--taxonomy-term-reference .field__label,
+.field-type--taxonomy-term-reference ul.links {
   font-size: 0.8em;
 }
-.view-mode-teaser .field-type-taxonomy-term-reference .field-label,
-.view-mode-teaser .field-type-taxonomy-term-reference ul.links {
+.view-mode-teaser .field-type--taxonomy-term-reference .field__label,
+.view-mode-teaser .field-type--taxonomy-term-reference ul.links {
   font-size: 0.821em;
 }
-.field-type-taxonomy-term-reference ul.links {
+.field-type--taxonomy-term-reference ul.links {
   padding: 0;
   margin: 0;
   list-style: none;
 }
-.field-type-taxonomy-term-reference ul.links li {
+.field-type--taxonomy-term-reference ul.links li {
   float: left; /* LTR */
   padding: 0 1em 0 0; /* LTR */
   white-space: nowrap;
 }
-[dir="rtl"] .field-type-taxonomy-term-reference ul.links li {
+[dir="rtl"] .field-type--taxonomy-term-reference ul.links li {
   padding: 0 0 0 1em;
   float: right;
 }
@@ -753,8 +751,8 @@ h1#page-title {
   margin-right: 236px;
   margin-left: 0;
 }
-.field-type-image img,
-.field-name-field-user-picture img {
+.field-type--image img,
+.field-name--field-user-picture img {
   margin: 0 0 1em;
 }
 ul.links {
@@ -775,10 +773,10 @@ ul.links {
 .comment h2.title {
   margin-bottom: 1em;
 }
-.comment .field-name-field-user-picture img {
+.comment .field-name--field-user-picture img {
   margin-left: 0; /* LTR */
 }
-[dir="rtl"] .comment .field-name-field-user-picture img {
+[dir="rtl"] .comment .field-name--field-user-picture img {
   margin-right: 0;
 }
 .comment {
@@ -1222,7 +1220,7 @@ div.messages {
 
 /* -------------- User Profile   -------------- */
 
-.profile .field-name-field-user-picture {
+.profile .field-name--field-user-picture {
   float: none;
 }