A well-written set of stylesheets balance a number of factors including
- Browser support - does the styling render the same in a wide range of commonly used browsers?
- Ease of change - can we easily change the styles to meet changing customer needs?
- Reuse - can we reuse commonly used styles easily?
- Stability - can we safely change our styles without worrying about unrelated breakages?
- Expressiveness - can we understand what our styles do, and do they make sense?
- Performance - are our styles fast to load and render?
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.
Component Based CSS
If you are using React (or similar), it is likely that a Component-based approach makes the most sense
Block Element Modifier.
we also give a mention to…
- Component-based CSS
- Atomic CSS
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.