CSS Explosion Prevention

For a project (shuftipro) I work on, I have relied heavily on CSS. At the moment, all CSS-styles are applied per class, so I’m now trying to move it to an external style to assist with future changes.

But I notice that I get a “CSS Explosion.” Now the problem is that I have difficulty deciding how best to organise and abstract data in the CSS file.

I use many div tags within the site and switch from a highly table-based site. So I get a lot of CSS selectors like this:

div.title {
  background-color: blue;
  color: white;
  text-align: center;

div.footer {
  /* Styles Here */

div.body {
  /* Styles Here */

/* And many more */

This is not too bad yet, but as I am a beginner, I wonder if it could be recommended how the different parts of a CSS file could be arranged best. For every item of my website, I don’t want a separate C SS tag, but I always want the CSS file very intuitive and simple to read.

My last goal is to make the CSS files easy to use and to demonstrate their ability to speed up the development of the site. In the future, other people who may work on this project are also able to use good coding standards, instead of the way I did.


I feel your pain.

There are many ways to organize your CSS. Very subjective also since it is very much based on personal preferences. Only hint I can give you is to section of parts in a way that is logical to you so you know where to adjust things if needed.

Mozilla has a document on organizing CSS, perhaps this can be of any assistance to you.

Happy coding!

1 Like

Thanks @janneslohmeijer for your golden words. My entire reason for asking this question started with seeing some scary CSS designed by a graphic artist. Maybe we need some better training for them?

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.