diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index c63f679..ad3a075 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2372,9 +2372,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']);
@@ -2396,7 +2398,7 @@ function template_preprocess_region(&$variables) {
 function template_preprocess_field(&$variables, $hook) {
   $element = $variables['element'];
 
-  $variables['label_hidden'] = ($element['#label_display'] == 'hidden');
+  $variables['label_visible'] = ($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.
@@ -2415,24 +2417,14 @@ 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';
-  }
+  //we want to know if the field is single or multiple
+  $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 f397a5a..56dfdd4 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -613,16 +613,16 @@ table tr.error {
 }
 
 /* Field display */
-.field .field-label {
+.field__label {
   font-weight: bold;
 }
-.field-label-inline .field-label,
-.field-label-inline .field-items {
+.field-label--inline .field__label,
+.field-label--inline .field__items {
   float:left; /*LTR*/
   padding-right: 0.5em;
 }
-[dir="rtl"] .field-label-inline .field-label,
-[dir="rtl"] .field-label-inline .field-items {
+[dir="rtl"] .field-label--inline .field__label,
+[dir="rtl"] .field-label--inline .field__items {
   float: right;
   padding-left: 0.5em;
 }
diff --git a/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
index a0d527a..85530a3 100644
--- a/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -17,7 +17,7 @@
  *
  * 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.
@@ -29,13 +29,79 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes }}>
-  {% if not label_hidden %}
-    <div class="field-label"{{ title_attributes }}>{{ label }}:&nbsp;</div>
-  {% endif %}
-  <div class="field-items"{{ content_attributes }}>
+
+{#
+We want to make it easy for the themer to remove & add css classes easy.
+Instead of hiding these as a string in the preprocess, they are done inside of
+the tempate file {{ attributes.class }} is providing a placeholder for mddules
+that wants to add classes to a field.
+#}
+{% set cssclass %}
+field field-name--{{ field_name }} field-type--{{ field_type }} field-label--{{ field_label }} {{ attributes.class}}
+{% endset %}
+
+{% if multiple and label_visible %}
+{#
+  First we check if its a multiple value field and if it have a visible label.
+    <div class="field field--multiple {{ cssclass }}">
+      <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="field--multiple {{ cssclass }}"{{ attributes }}>
+    <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 not label_visible %}
+{#
+  We check if its a multiple value field and if it have a visible label.
+    <div class="field field--multiple field-items {{ cssclass }}">
+        <div class="field_item">Data</div>
+        <div class="field_item">Data</div>
+      </div>
+    </div>
+#}
+  <div class="field--multiple field__items {{ cssclass }}"{{ attributes }}{{ content_attributes }}>
+    {% for delta, item in items %}
+      <div class="field__item"{{ item_attributes[delta] }}>{{ item }}</div>
+    {% endfor %}
+  </div>
+
+{% elseif not multiple and label_visible %}
+{#
+  We Check if its a single field and it have its label visbile
+    <div class="field field--single {{ cssclass }}">
+      <div class="field_label">Data</div>
+      <div class="field_item">Data</div>
+    </div>
+#}
+  <div class="field--single{{ cssclass }}"{{ attributes }}>
+    <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 not label_visible %}
+{#
+  Now check if the field is a single field and dont have a label shown
+    <div class="field field--single field__item{{ cssclass }}">
+      data
+    </div>
+  The holy grail of single field data!
+#}
+  {% for delta, item in items %}
+    <div class="field--single field__item {{ cssclass }}"{{ 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..0aace8e 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,46 @@ h1#page-title {
   color: #68696b;
   margin-bottom: -5px;
 }
-.submitted .field-name-field-user-picture img {
+.submitted .field-name--field-user-picture img {
   float: left; /* LTR */
   margin: 1px 20px 0 0; /* LTR */
 }
-[dir="rtl"] .submitted .field-name-field-user-picture img {
+[dir="rtl"] .submitted .field-name--field-user-picture img {
   float: right;
   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 +753,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 +775,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 +1222,7 @@ div.messages {
 
 /* -------------- User Profile   -------------- */
 
-.profile .field-name-field-user-picture {
+.profile .field-name--field-user-picture {
   float: none;
 }