diff --git a/vue/src/components/IngredientComponent.vue b/vue/src/components/IngredientComponent.vue
index 1403840e..d8e130ee 100644
--- a/vue/src/components/IngredientComponent.vue
+++ b/vue/src/components/IngredientComponent.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import {calculateAmount, ResolveUrlMixin, escapeCSS} from "@/utils/utils"
+import {calculateAmount, ResolveUrlMixin, EscapeCSSMixin} from "@/utils/utils"
 
 import Vue from "vue"
 import VueSanitize from "vue-sanitize"
@@ -57,7 +57,7 @@ export default {
         ingredient_factor: {type: Number, default: 1},
         detailed: {type: Boolean, default: true},
     },
-    mixins: [ResolveUrlMixin],
+    mixins: [ResolveUrlMixin, EscapeCSSMixin],
     data() {
         return {
             checked: false,
@@ -125,9 +125,6 @@ export default {
         // sends parent recipe ingredient to notify complete has been toggled
         done: function () {
             this.$emit("checked-state-changed", this.ingredient)
-        },
-        escapeCSS: function (classname) {
-            return CSS.escape(escapeCSS(classname))
         }
     },
 }
diff --git a/vue/src/components/KeywordsComponent.vue b/vue/src/components/KeywordsComponent.vue
index 3cc3ce23..ece13efd 100644
--- a/vue/src/components/KeywordsComponent.vue
+++ b/vue/src/components/KeywordsComponent.vue
@@ -15,11 +15,11 @@
 
 <script>
 
-import {ResolveUrlMixin, escapeCSS} from "@/utils/utils";
+import {ResolveUrlMixin, EscapeCSSMixin} from "@/utils/utils";
 
 export default {
     name: 'KeywordsComponent',
-    mixins: [ResolveUrlMixin],
+    mixins: [ResolveUrlMixin, EscapeCSSMixin],
     props: {
         recipe: Object,
         limit: Number,
@@ -36,9 +36,6 @@ export default {
     methods: {
         keywordClass: function(k) {
             return this.escapeCSS('_keywordname-' + k.label)
-        },
-        escapeCSS: function (classname) {
-            return CSS.escape(escapeCSS(classname))
         }
     }
 }
diff --git a/vue/src/components/StepComponent.vue b/vue/src/components/StepComponent.vue
index 4a9e901b..9585a3a7 100644
--- a/vue/src/components/StepComponent.vue
+++ b/vue/src/components/StepComponent.vue
@@ -122,18 +122,18 @@
 </template>
 
 <script>
-import {calculateAmount, GettextMixin, getUserPreference, escapeCSS} from "@/utils/utils"
+import {calculateAmount, GettextMixin, getUserPreference} from "@/utils/utils"
 import CompileComponent from "@/components/CompileComponent"
 import IngredientsCard from "@/components/IngredientsCard"
 import Vue from "vue"
 import moment from "moment"
-import {ResolveUrlMixin, calculateHourMinuteSplit} from "@/utils/utils"
+import {ResolveUrlMixin, calculateHourMinuteSplit, EscapeCSSMixin} from "@/utils/utils"
 
 Vue.prototype.moment = moment
 
 export default {
     name: "StepComponent",
-    mixins: [GettextMixin, ResolveUrlMixin],
+    mixins: [GettextMixin, ResolveUrlMixin, EscapeCSSMixin],
     components: {CompileComponent, IngredientsCard},
     props: {
         step: Object,
@@ -148,7 +148,8 @@ export default {
     },
     computed: {
         step_time: function() {
-            return calculateHourMinuteSplit(this.step.time)},
+            return calculateHourMinuteSplit(this.step.time)
+        },
         step_name: function() {
             if (this.step.name) {
                 return this.step.name
@@ -196,9 +197,6 @@ export default {
         },
         openPopover: function () {
             this.$refs[`id_reactive_popover_${this.step.id}`].$emit("open")
-        },
-        escapeCSS: function (classname) {
-            return CSS.escape(escapeCSS(classname))
         }
     },
 }
diff --git a/vue/src/utils/utils.js b/vue/src/utils/utils.js
index b4fb2e2e..bb959c95 100644
--- a/vue/src/utils/utils.js
+++ b/vue/src/utils/utils.js
@@ -317,8 +317,13 @@ export function calculateAmount(amount, factor) {
     }
 }
 
-export function escapeCSS(classname) {
-    return classname.replace(/\s+/g, "-").toLowerCase()
+/* Replace spaces by dashes, then use DOM method to escape special characters. Use for dynamically generated CSS classes*/
+export const EscapeCSSMixin = {
+    methods: {
+        escapeCSS: function(classname) {
+            return CSS.escape(classname.replace(/\s+/g, "-").toLowerCase())
+        }
+    }
 }
 
 export function roundDecimals(num) {