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.

Can you explain what you mean by “CSS Explosion”? I’ve never heard of such thing.

In any case, it really doesn’t matter how you arrange your CSS. It’s advisable to keep any styles that would be the same across multiple pages on a separate CSS file, such as style.css. Any styles that are specific to the page should be under one <style> tag in the <head> section.

To minimize the amount of potential conflicts with elements on the page, you should keep your styles in classes like so:

.first-div {
    /* Styles here */
}

That’s opposed to handling divs on a sectional basis, like the sample you provided.

In the future, just to let you know, the staff team at 000webhost does not typically help with code issues. Good luck though!

1 Like

Thanks @sulliops for your golden words. You should say that because 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 8 hours after the last reply. New replies are no longer allowed.