Use data attribute to select loading message, instead of CSS class… (#…

…9248) * Use uniquely and semantically named data attribute to select loading message, instead of CSS class since that creates a brittle coupling between JS and CSS. * Formalize this rule in the CSS style guide.
elastic · Nov 29, 2016 · 7cdd298 · 7cdd298
1 parent 4d6e0d7
commit 7cdd298
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git 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&rsquo;m loading a whole bunch of code. Don&rsquo;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&rsquo;m loading a whole bunch of code. Don&rsquo;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
@@ -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