A note on duplicate property names

things.md

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!

As for "detecting" conflicts, you'd just see your styles looking poorly. Maybe we could tool it, but it's hard to say whether "this custom property appears in both these elements on purpose" (i.e. --application-font-name) or "this custom property appears in both these elements by accident" (i.e. a poorly named --background-color).

My best advice is to define custom properties in the scope they're meant to be used (so a paper-checkbox's properties would go in paper-checkbox {...} or paper-checkbox.red {...} selector, and never in a global * {...}

thanks for the long response.

As for detection, I was thinking something along the lines of counting the declarations of the same variable name in different components - just a heads-up so we can see right up-front if that's expected - like:

two components (paper-checkbox, origami-checkbox) set the same css variable: --checkbox-background-color

same could probably be done to detect definition count vs usage count of given css var, like

variable --foo-color was defined but never used

WDYT?