Improving software delivery in every organisation

CSS Architecture

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.

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


Block Element Modifier.


we also give a mention to…

  • Component-based CSS
  • Atomic CSS
  • Scalable and Modular Architecture for CSS (SMACSS)


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


How effective is your business at software delivery?

Answer these 20 questions and find out where the principal software delivery challenges lie within your organisation.

Get started now