diff --git a/src/ui/views/ui_app.jade b/src/ui/views/ui_app.jade
index 262ea898933d2..975dec6ecd77a 100644
--- a/src/ui/views/ui_app.jade
+++ b/src/ui/views/ui_app.jade
@@ -116,17 +116,19 @@ block content
         .kibanaWelcomeLogo
       .kibanaLoader__content
         | Loading Kibana
-    .kibanaLoadingMessage.
-      Give me a moment here. I’m loading a whole bunch of code. Don’t worry, all this
-      good stuff will be cached up for next time!
+    .kibanaLoadingMessage(
+      data-remove-message-when-embedded
+    )
+      | Give me a moment here. I’m loading a whole bunch of code. Don’t worry, all this
+      | good stuff will be cached up for next time!
 
   script.
     window.onload = function () {
 
       var hideLoadingMessage = /#.*[?&]embed(&|$|=true)/.test(window.location.href);
       if (hideLoadingMessage) {
-        var loading = document.querySelector('.kibanaWelcomeView');
-        loading.removeChild(loading.lastChild);
+        var loadingMessage = document.querySelector('[data-remove-message-when-embedded]');
+        loadingMessage.parentNode.removeChild(loadingMessage);
       }
 
       var buildNum = #{kibanaPayload.buildNum};
diff --git a/style_guides/css_style_guide.md b/style_guides/css_style_guide.md
index 1aed04bc3d33b..f617f5a62ee7f 100644
--- a/style_guides/css_style_guide.md
+++ b/style_guides/css_style_guide.md
@@ -2,6 +2,7 @@
 # CSS Style Guide
 
 - [CSS Style Guide](#css-style-guide)
+  - [Selecting elements](#selecting-elements)
   - [Using the preprocessor](#using-the-preprocessor)
     - [Don't build concatenated selector names](#dont-build-concatenated-selector-names)
     - [Avoid nested selectors](#avoid-nested-selectors)
@@ -15,6 +16,23 @@
     - [How to apply DRY](#how-to-apply-dry)
       - [Compelling reasons for using mixins](#compelling-reasons-for-using-mixins)
 
+## Selecting elements
+
+References to CSS selectors within JavaScript are difficult to discover, making it easy to accidentally
+break the UI when refactoring markup or CSS.
+
+Instead, add a `data` attribute with a unique and descriptive name and select the element using that.
+
+```html
+<div data-welcome-message>Hello, world</div>
+```
+
+```javascript
+const welcomeMessage = document.querySelector('[data-welcome-message]');
+```
+
+This uncouples our CSS from our JavaScript, making it easy to change each independently of the other.
+
 ## Using the preprocessor
 
 ### Don't build concatenated selector names