Improving software delivery in every organisation

CSS Architecture

A well-written set of stylesheets balance a number of factors including

If this seems overwhelming, don’t worry, we’re here to help.

CSS Resets

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.

CSS Methodologies

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

BEM

Block Element Modifier.

we also give a mention to…

CSS Frameworks

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.

CSS Preprocessors

CSS Layout