CSS Etiquette

HTML & CSS
1

Hi,

I wanted to garner some opinions about the best way to manage my CSS. Currently I have one external sheet that I keep adding code to. It is now however starting to get quite big and unwieldy so I was wondering about splitting some bits off into separate sheets.

I might run the risk of having too many files and kind of defeating the object having the code externally in the first place.

So how do you, much more experienced people manage such things?

Cheers

Adam

2

I agree with what Alex says - because you’re constantly adding to a CSS file, it can quickly grow out of hand. Periodically, it’s worth doing a quick audit to check (a) if you are actually using all the declarations, or if there are any that have become obsolete as your site has developed, and (b) if there is any duplication that could be consolidated and streamlined.

Sometimes it can be worth splitting your stylesheet up so that you have a common.css that has site-wide styling, and then a more specific sheet for each section if they are significantly different. Ideally, you don’t want to be declaring the same thing in multiple sheets, because that’s when you’re in danger of forking and updating one instance but not another.

3

I always say if it’s getting too big and bloated then it’s time to start going through it and eliminating the junk, over the years you will be surprised how quickly your CSS can get clogged up with all sorts of unnecessary junk and fluff. Most CSS doesn’t really need to be broken down into separate sheets, it just requires a good cleaning (that and perhaps ordering the information a bit better so it’s easier for you to read). I’ve never had a need to break apart CSS files before. :slight_smile:

4

I found it! I asked this same question a while ago when I was a newbe. It was funny to read through that again. Read through this, there are some good answers in there. Shelfimage on page 3 talkes about whats considered too big for an external stylesheet and whats not, etc… http://www.killersites.com/mvnforum/mvnforum/viewthread_thread,9454#47172

5

Here is something I do:

  1. LINK your style sheet (singular) in your HTML. something like styles.css
  2. break up your CSS into logical part and comment them: layout, typography, functions, etc…
  3. once that starts getting BIG. you can export each section ( since you know what does what) onto it’s own stile sheet : layout.css, typo.css and so forth
  4. replace all the code in styles.css with @import (“stylesheetname.css”)s

now when you want to add or edit something on your site you can directly to the specifc stylesheet that deals with it, such as layout.css. But the call to the stylesheets happens indirectly (with the @imports)