A scalable naming convention for style-variables
N aming things well is one of the hard problems in computer science. I would argue it is even harder in the world of visual design. The reason it is hard is because visual designs continually change, so the UI code has to keep changing too. This article looks at an approach I’ve started using for websites, but would work equally well for designers and developers of any graphical user interface (GUI).
This doesn’t work because when a new theme is introduced, what do you do with -c-white? Do you rename it (and rename all references in your code) to -c-black(for example), or do you change it’s value to -c-white: black? (You may laugh at this latter suggestion, but a developer actually proposed this approach to me as a serious solution. I patiently explained why that wasn’t a great approach because it is not semantic).
This approach is both hard to remember (do you know whether deca is bigger than milli?) and doesn’t have much meaning for variables that do not sit on a continuum (e.g. red and grey).
