diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 5c16ef8..22616e1 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2371,10 +2371,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'] = strtr($element['#entity_type'], '_', '-');
-  $variables['field_name'] = strtr($element['#field_name'], '_', '-');
-  $variables['field_type'] = strtr($element['#field_type'], '_', '-');
-  $variables['label_display'] = strtr($element['#label_display'], '_', '-');
+  $variables['css_entity_type'] = strtr($element['#entity_type'], '_', '-');
+  $variables['css_field_name'] = strtr($element['#field_name'], '_', '-');
+  $variables['css_field_type'] = strtr($element['#field_type'], '_', '-');
+  $variables['css_label_display'] = strtr($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/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
index 99487b9..19a97b6 100644
--- a/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -23,16 +23,16 @@
  * - items: List of all the field items.
  * - item_attributes: List of HTML attributes for each item.
  * - attributes: HTML attributes for the containing element.
- * - entity_type: The entity type to which the field belongs.
- * - field_name: The name of the field
- * - field_type: The type of the field.
- * - field_label: The display of the label for the field.
+ * - css_entity_type: The entity type to which the field belongs, in a CSS friendly format.
+ * - css_field_name: The name of the field, in a CSS friendly format.
+ * - css_field_type: The type of the field, in a CSS friendly format.
+ * - css_label_display: The display of the label for the field, in a CSS friendly format..
  * @see template_preprocess_field()
  *
  * @ingroup themeable
  */
 #}
-<div class="field field-{{ entity_type }}--{{ field_name }} field-name-{{ field_name }} field-type-{{ field_type }} field-label-{{ label_display }}{{ (attributes.class is defined) ? ' ' ~ attributes.class  : '' }}"{{ attributes }}>
+<div class="field field-{{ css_entity_type }}--{{ css_field_name }} field-name-{{ css_field_name }} field-type-{{ css_field_type }} field-label-{{ css_label_display }}{{ (attributes.class is defined) ? ' ' ~ attributes.class  : '' }}"{{ attributes }}>
   {% if not label_hidden %}
     <div class="field-label"{{ title_attributes }}>{{ label }}:&nbsp;</div>
   {% endif %}