Best Practices for Overriding CSS?

[bmulholland]

I'd like to make a few customizations to the styling (e.g. I have a default color set, and the default CSS overrides that, so I need to override-override back to my default).

There are two options to do this:

1. Import the default CSS and add my overrides on top of it.
2. Copy the default CSS to my own file and modify it.

The problem with #1 is it's not really best practices in CSS land. It immediately gets into CSS selector precedence, doing override-overrides, and the existing color, for instance, is in a theme, while I probably want to apply something globally.

Meanwhile, #2 is a recipe for bugs and issues upgrading. If the HTML structure or expected CSS changes, we'll have to manually update the file we've copied (and merge in any customized deltas). Moreover, we'd have to manually catch that the CSS needs this update, and it's more likely that we'd simply forget and get out of date.

Questions:

1. What's the best way to get the CSS file? I tried to pull it from github (vue2 branch) and couldn't find where the CSS comes from. Should I just copy the file from the shipped npm package?
2. How often does the CSS change? Does it change by much?
3. Is there a suggested best practice for customizing the CSS?