We saw in the CSS Variables lesson that managing lots of different variables can quickly get unwieldy.
Even the Search component you played with felt complex after managing only a couple dozen variables. One of the biggest challenges in programming is naming, and so you’d be doing yourself a disservice by not coming up with a formal naming convention for your CSS variables.
Not having one is going to create problems for you and your consumers. Not having a naming framework for your variables adds extra overhead for you as the author when coming up with unique names. Without such a convention, you may end up with conflicting and inconsistent variable names.
Not having an explicit naming convention also makes it more difficult for new developers to contribute, as naming variables can be subjective, it can make everyone’s life easier by pointing to concrete naming guidelines.
Finally, as a consumer, not knowing what the variable conventions are, or having a list clear list of the available variables, adds a layer of friction when customising a given component.
So let’s look at a few instances of badly named variables. These aren’t necessarily bad in isolation, but you’ll see how they present issues at scale.
text-color might sound like a decent variable name on the surface. You might h