What are some good approaches to organizing CSS files so that they are easy to maintain?

Question

I'm not a pro. I have my business web site that has grown from 5 files to 300 files. My css file is now about 800 lines long, and it's getting difficult to manage.

I've got a certain amount of cruft in it.

The firefox extension 'Dustoff' helps. It can follow a sitemap and tell me what selectors aren't used.

The W3C validity checker doesn't help. It verifies that I've got matching brackets and my options are spelled correctly.

CSS-Lint fusses at me about redefinitions. I tend to factor --

h1, h2, h3, h4 {
font-variant:small-caps;
}

h3, h4, h5, h6 {
margin: auto;
width: 35rem;
}

The idea being that stylistically related items are set in one place.

Now I'm faced with trying to make a more responsive design with two goals in mind: Have it at least usable on a phone, and make it reasonable to print. Both of these will require either multiple style sheets (bad from both speed and maintenance) or longer style sheets (just more difficult to maintain)

In terms of coding style and organization, what are current common accepted practices to make maintainable CSS files?

Answer 1

I would suggest breaking it into separate stylesheets. I usually have one for typographic styles where I would put heading, body and copy styles, another one for global styles(styles which will be reused throughout the whole site) and then another one for section-specific styles.

Since you're going to be making the site responsive, I would suggest defining your media queries for each section, right below the CSS for that section so that it's easy to find where to make changes.

I find that it's easiest to start with a mobile-first approach to responsive development, so you're initial styles would all be geared towards mobile and then you would use media queries for tablet/desktop overrides.

Answer 2

The best solution would be to use something like Grunt or Gulp, and have a bunch of different stylesheets broken up however makes sense. You can break it up by style, business logic, etc, whatever works for you.

Then using one of those tools, you can compile them into 1 stylesheet that is minified and that's the only one you load in the HTML.

Answer 3

Couple of things you can do, but I would suggest taking a look at SCSS. Essentially it is a language that compiles to plain CSS. With it, you can:

• Use variables
  • For example, define 1 color and spread it across different elements.
• Allows file includes
• It allows nesting of elements
• Can do basic math
• Allows for simple functions

---

It isn't that difficult to learn because it is very similar to CSS, and you can make the code more organized and it will automatically be shorter because it eliminates repeatedness of CSS.

CSS

#container {
    width: 960px;
    margin: 0 auto;
    border-color: black;
}

#container p {
    color: black;
}

SCSS

$black: #000000;

#container {
    width: 960px;
    margin: 0 auto;
    border-color: $black;
    p {
        color :$black;
    }
}

---

Both codes are exactly the same, the only difference is that you have to compile the scss code but you can choose for a compressed CSS output with optionally a map file that helps with debugging in most code inspectors.

And since you're asking about responsive designs, take a look at this guide. It shows how to use media querys in SCSS to make it compatible on smaller devices.