In Tips Jun 4, 201011

Should Long CSS Code be Divded into Several Files?

There are some debates within web design that have always split the community down the middle, everyone has there opinion about them, and both sides in there own way are correct for differing reasons. You know the kind of fiery debates – Fireworks v Photoshop and WordPress, Joomla or Drupal, to name just a couple.

Another debate, perhaps not as fiery as the other two we have mentioned, was recently asked on Design Reviver Answers, that question was: “Should you separate into separate files long CSS code?“. There are two sides to this question and both were recently discussed. What is your opinion?

You can leave a comment below or you can leave your solution on the original posted question on Answers.

Will Placing Long CSS Code Into Separate Files Increase or Decrease Browser Performance?

Will Placing Long CSS Code Into Separate Files Increase or Decrease Browser Performance?
This question was originally asked by Autobots, as we have already mentioned, and you will find the favorite (as voted by Answers users) solution below:

Answer from Michael Mior:

Will Placing Long CSS Code Into Separate Files Increase or Decrease Browser Performance?

Answer from Rubacode:

Will Placing Long CSS Code Into Separate Files Increase or Decrease Browser Performance?

Unanswered Answers

Can you help with this weeks unanswered questions?

  1. Is it Possible to Write My Own MySQL Functions That I Can Call When Making MySQL Queries?
  2. What are Some Pros and Cons of Using Inline Expansion (jQuery Accordion) on Your Website?
  3. Is there a Way to Detect if JavaScript Files Have Been Loaded?
  4. Are There Any Good Solutions for Analyzing a Users Text in PHP (Term Sensitive)?
  5. How Would I Globally Replace a String in MySQL?
  6. What’s the Best Way to Make a Set of AJAX Calls Sequential (Right After the Other In Order)?
  7. How Can I Get a JavaScript Event to Fire Specifically When the Background is Clicked?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

11 Comments

  • David Millar
    Jun 4, 2010
    I agree with both to some extent. CSS being pushed out live should be compressed and made into a single file for a single HTTP request, but that doesn’t necessarily mean that your editable code has to be the same. I typically keep a copy of files like that with _FULL at the end of the filename that are well indented and commented and readable and then run them through some compression fun to make them nice and small for the live CSS files.
  • Should Long CSS Code be Divded into Several Files? | Design Reviver | My Blog
    Jun 4, 2010
    [...] here to see the original: Should Long CSS Code be Divded into Several Files? | Design Reviver This entry was posted on Friday, June 4th, 2010 at 2:30 pm and is filed under Uncategorized. You [...]
  • Amber Weinberg
    Jun 4, 2010
    You should aim to keep your HTTP requests as low as possible, and seperating style sheets are not only a pain to deal with when editing the site, that also means you have 4 different requests and files to keep up with??
  • Should Long CSS Code be Divded into Several Files? | Lively Design Tuts
    Jun 4, 2010
    [...] Direct Link [...]
  • Online Poker Code Crack. | how to play poker vlog
    Jun 4, 2010
    [...] Should Long CSS Code be Divded into Several Files? | Design Reviver [...]
  • Robin Crama
    Jun 5, 2010
    I use a script that combines stylesheets, one major stylesheet for everypage and every single page has an extra stylesheet. A PHP script will combine the two and compress it. Really usefull:) You will have one HTTP request and have the smallest css file posible for every page.
  • Hover Coupon
    Jun 5, 2010
    If I am doing a web site with a TON of CSS, I always use separate files for certain things. It does make stuff a little bit easier to manage. Everyone has their own personal preferences, though.
  • Remo
    Jun 6, 2010
    How about separate file merged into one file using server side scripting? You could even compress and cache it if you want in one go.
  • Andrew Foster
    Jun 6, 2010
    I agree with David. Plus, if you cascade properly, then as the page elements load, there shouldn’t be any issue with UI horribleness. I still keep reset styles separate and if the site is very style heavy, will sometimes split out navigational styles.

    P.s. Check your there/their/they’re grammar!

  • Steve
    Jun 7, 2010
    I tend to use Minify to compress all of my CSS and Javascript files in to one resource; It leaves the originals on the server so they’re still easily editable.

    Minify will also Cache the resources so that it doesn’t process the compression on each request.

    Tools like Pagespeed (from Google) and Firebug (on Firefox) also recommend these methods as a way of speeding up a web page.

    Thanks

  • Kevin
    Jun 14, 2010
    I tend to leave “3rd party files” on their own: Things like resets, typography, grids, etc. will all be separate since I didn’t write them. That way, it makes upgrading these a breeze.

    But as a general rule of thumb you should work with separate files, but try to serve one full file. If you have the ability to compress/minify them all into one, then great.

    However, if you don’t, you shouldn’t sacrifice ease of development to save a few server calls.

    But with all of the above said, if you layout your CSS file properly and make it easy to navigate, you can usually get away with easy development in one file.

Leave a Comment

Ask a Question on Design Reviver Answers