My recommendation is not to use CSS at all, instead use SCSS. The reason is that it allows for the problem of addressability to html element to style very specific things. Once it's learned it is the single best way to go forward in our styling endeavors.
The structural architecture of SCSS is perfect for controlling all styles anywhere on any pages. This solves all specificity issues.
We just switched to SCSS for everything in out Angular project. Angular uses both global styles and component styles which are "encapsulated". Stuff that took days to figure out is now literally 5 minutes. We just right click on the element to style and look at the html hierarchy which we duplicate in SCSS. The only issues are when the HTML structures change. So we try to get smart about that and focus on small HTML Parts instead of huge monolithic things.
Also we converted to using only grid, which has massively simplified our styling.
My recommendation is not to use CSS at all, instead use SCSS. The reason is that it allows for the problem of addressability to html element to style very specific things. Once it's learned it is the single best way to go forward in our styling endeavors.
The structural architecture of SCSS is perfect for controlling all styles anywhere on any pages. This solves all specificity issues.
We just switched to SCSS for everything in out Angular project. Angular uses both global styles and component styles which are "encapsulated". Stuff that took days to figure out is now literally 5 minutes. We just right click on the element to style and look at the html hierarchy which we duplicate in SCSS. The only issues are when the HTML structures change. So we try to get smart about that and focus on small HTML Parts instead of huge monolithic things.
Also we converted to using only grid, which has massively simplified our styling.
Thanks for this, i also use scss for which is compiled to css. My headache is with media queries. how do you tackle that?