I’m going through the City Skyline project in the Responsive Web Design course and wondering why you’d use a variable like the one being taught over just having selectors grouped into one section, to set the same background color.
For example, is there any genuine reason to setting a variable once and applying it to each class/ID, over just grouping the selectors that you want to have that specific trait?
another reason is if you are creating a stylesheet for a big site
and multiple developers are working to create mutliple sections but they all need to look and feel the same way
So you can define a stylesheet with all the variables and everyone can use it as needed.
The same question was in my head. I think that this project wanted us to get used to the idea that css variables exist and a feel for using them. When using one .css file for many pages, grouping variables at the top made more sense to me. Then I see them used in calculating values for media queries. Here is what I an using today:
Exactly this. You define your design system in one place.
Although as a rule of clean code variable names should always be as explicit as possible, so ‘bg-blue’ would be clearer than ‘rb-blue’ and ‘text-blue’ would be clearer than ‘rf-blue’.
By naming variables in an explicit way you remove the need to comment your code in this manner, and is considered best practice. The variable name should always be explicitly descriptive of what that variable is.