notwaldorf · September 21, 2015 23:01 · Sep 21, 2015
diff --git a/things.md b/things.md
@@ -0,0 +1,26 @@
+The question was: "What's the best, if any, way to detect "conflicts" w/ CSS vars names between components?"
+
+First, as a best-practice policy, on the elements team, we prefix custom properties with the element name, to make things clear: So `paper-checkbox` would have something like `--paper-checkbox-checked-color` etc.
+
+Now, let's say that I have two identical elements, `paper-checkbox` and `paper-checkbox-copy` (in the sense that `paper-checkbox-copy` has all of `paper-checkbox`'s custom variables, `--paper-checkbox-checked-color` and friends). If you style individual elements separately, even if the names are duplicate, the custom properties are scoped correctly. So in the example above, this will always do the right thing (because, remember: custom properties are scoped to their elements, and down their tree, they're not globally set)
+```
+paper-checkbox { 
+  /* all paper-checkboxes instances always be blue */
+  --paper-checkbox-unchecked-background-color: blue;
+}
+paper-checkbox-copy { 
+  /* all paper-checkbox-copy instances will always be red */
+  --paper-checkbox-unchecked-background-color: red;
+}
+```
+
+The problem is if you create a global style, and use that duplicate custom property. In that case, exactly what you think will happen: both `paper-checkbox` and `paper-checkbox-green` will use the same value. That kind of makes sense, though: you're basically styling everything at once. 
+```
+* {
+  /* all green all the time */
+  --paper-checkbox-unchecked-background-color: green;
+}
+```    
+This could be a desired thing in some cases; imagine that instead of `--paper-checkbox-unchecked-background-color` this was actually `--application-font-name`, or something. You'd want to set it once, globally, and have it apply everywhere.
+
+Hope this helps!