This problem is already solved by using LESS, SCSS, Stylus, SASS, or one of the many other CSS preprocessors.
If you need to "compute" any styles, those can do it. Or, if styles need to be changed based on data or input, you can just create new classes and assign them as necessary.
One major benefit (though there are many) of preprocessors over your solution is that IDEs understand those languages and provide autocomplete/error-checking.
As a general rule, you sometimes need to reinvent wheels, but the benefit of reinvention needs to outweigh the collective learning/support of existing solutions.
Comments
This problem is already solved by using LESS, SCSS, Stylus, SASS, or one of the many other CSS preprocessors.
If you need to "compute" any styles, those can do it. Or, if styles need to be changed based on data or input, you can just create new classes and assign them as necessary.
One major benefit (though there are many) of preprocessors over your solution is that IDEs understand those languages and provide autocomplete/error-checking.
As a general rule, you sometimes need to reinvent wheels, but the benefit of reinvention needs to outweigh the collective learning/support of existing solutions.
By computing values I meant defining styles based on runtime variables (browser size, localStorage data, …). CSS pre-processors can't do that.