Do unused CSS styles affect load times

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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