Just a note, beware of the mandatory spacing in the calc() function. The operators must have spaces around them, i.e.
calc(10% + 1px)
is correct, and is not the same as without spaces:
calc(10%+1px)
I only mention it because it threw me as it was the only time “math” needed spaces in my experience.
You can add as many variables (custom properties) as you need to :root.
Just make sure they follow the correct format and of course are useful. There’s no point in creating a custom property and only ever using it once. You may as well have used the real value. Unless it’s part of your theming and then it would make sense for it to be there.
The custom properties are useful for themes where perhaps you have a background color that you use over and over again. If you create a variable for it instead then you can change the whole theme by just changing the one variable and not a thousand places in the css.
I didn’t quite grasp your use case but say you wanted ‘person A’ to have a red background and person B to have a blue background and so on. That could be useful as custom prooerties.
Have a look at the link i posted for more use cases.
Using 575px, 768px, and 992px as breakpoints is a solid starting point, especially for retrofitting an existing site. These are commonly used sizes and cover most device categories reasonably well.
Not if that doesn’t suit the design.
Breakpoints like that are old fashioned and you should be device agnostic these days for best results.