A well-written set of stylesheets balance a number of factors including
If this seems overwhelming, don’t worry, we’re here to help.
One issue you will face is that even with a brand-new HTML file, without any stylesheets imported, different browsers will render this file differently. The cause of this is differing browser-default styling.
The defacto-accepted solution to this is to use a CSS reset stylesheet (of which there are many). A CSS reset will ensure that all browsers have the same basic styles upon which you can start layering custom styles ontop of.
Note: most CSS frameworks prepackage a CSS reset.
You will also need to choose an approach to achieve a well-architected set of CSS styles.
If you are using React (or similar), it is likely that a Component-based approach makes the most sense
Block Element Modifier.
Scalable and Modular Architecture for CSS (SMACSS)
On the one hand, CSS Frameworks are usually battle-tested in multiple browsers. Leveraging one can provide the benefit of support in many browsers. It is also much faster to get going with a CSS Framework, as many common components are likely implemented for you.
The downside is that many CSS frameworks are usually very large slabs of CSS code, which will have a significant impact on the size of your CSS assets - larger assets mean that your page load times will become slower.
Another criticism is that CSS frameworks allow you to do things their way, but provide little-to-no help when you want to implement a custom set of styles, and can sometimes hinder this process.