Use uniquely and semantically named data attribute instead of data-id.

cjcenizal · cjcenizal · commit 0b426286f5d0 · 2016-11-29T13:24:54.000-07:00
diff --git a/src/ui/views/ui_app.jade b/src/ui/views/ui_app.jade
@@ -110,16 +110,14 @@ block content
       opacity: 0.8;
     }
 
-  .kibanaWelcomeView(
-    data-id="kibanaWelcomeView"
-  )
+  .kibanaWelcomeView
     .kibanaLoader
       .kibanaLoader__logo
         .kibanaWelcomeLogo
       .kibanaLoader__content
         | Loading Kibana
     .kibanaLoadingMessage(
-      data-id="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!
@@ -129,9 +127,8 @@ block content
 
       var hideLoadingMessage = /#.*[?&]embed(&|$|=true)/.test(window.location.href);
       if (hideLoadingMessage) {
-        var loadingContainer = document.querySelector('[data-id="kibanaWelcomeView"]');
-        var loadingMessage = document.querySelector('[data-id="kibanaLoadingMessage"]');
-        loadingContainer.removeChild(loadingMessage);
+        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
