6

I am wondering if unused CSS styles affect load times because I normally break my sections of my code using this format

/*===================
      Nav-Styles
===================*/

However, I also use coda to write my code. It has a code navigator, which detects ids followed by {}

what I thought might help with my code organisation is to create this format of break

/*==========================================
  #----NAV-STYLES-BEGIN {} /* Nav Styles */ 
==========================================*/

This will mean my section breaks will them appear in the code navigator and can be jumped to quickly. However, if this is going to cause speed related issues, the means will outweigh the end.

Is this a bad idea or will the difference be so insignificant that it's worth doing if I wanted?

gcoulby
  • 534
  • 2
  • 10
  • 20

3 Answers3

7

The answers here are not correct.

Unused CSS does two things:

  1. Adds more bytes that need to be downloaded before the engine can start rendering the page
  2. The browser engine has to go through each css selector to evaluate whether it is on the page and how it should render.

The second part is crucial. If 50% of your css file is unused css, you are essentially have the browser engine take twice as long to render your CSS for the page. Of course, the type of CSS selectors you have matter as well, so the twice as long is more of a easy example than full truth. Never the less, unused CSS increases your browsers page load time, even when the file is cached on the local drive.

Kjuly
  • 34,476
  • 22
  • 104
  • 118
Nick Confer
  • 79
  • 1
  • 2
4

Any unused CSS or JS that is passed over the wire to the client will hurt the sites performance at the least to a small degree. The unused CSS increases the size of the page, therefore increasing the time it takes to download a page. A few characters here and there will not have a huge impact on your download times, however if there is a large amount of unused styling there may be an impact. This is why many people compress their CSS and JS.

Kevin Bowersox
  • 93,289
  • 19
  • 159
  • 189
1

The effect of this is going to be unnoticeable, and could be described as negligible at best. Regardless, you could use a build script to remove all comments and minify your CSS. This will improve load times, if only slightly.

The short answer - go for whatever is easiest to develop with. You can worry about production later.

I hesitate to add

Swadq
  • 1,837
  • 2
  • 15
  • 25
  • That's what I figured, I love CSS and try to do everything I can with CSS. However, I am also a stickler for organisation. I just wish you could put anchor links in css so that you could make a generic contents area. This was a very interesting read. It's certainly correct, this website I am making is so lightweight it shouldn't matter, and anything that makes the code easier to read is better in the long run, even if it does sacrifice a few KBs. I don't think I would do it with Javascript or php though -not needed as much – gcoulby Mar 08 '13 at 12:11