Does it hurt to leave CSS not used on all pages or have seperate files?

[Anonymous]

Will conflicts still persist if separated by <style=> and what about JS conflicts. What’s the best approach to these? I’ve notice there can be conflicts with slideshow and scroller JS.

[John]

Well if you have unused css, I’d put it in a separate file and just not have that file load. If there is a conflict with two js files, can you load the one that is last used on that particular page instead?

[Anonymous]

@Soronbe and @John,

Thank you both for your reply. It is very helpful.

Let me ask this, if there is one CSS file common to all that is cached so each page doesn’t load it and then there are some pages that have to call two or three JS files and additional CSS not used by the others, as well as the common CSS file, is the load time in this instance any different than each page having to load one big CSS file? I hope I’ve explained that so it’s understandable.

I’m still new to many aspects of CSS and am just trying to learn the best approaches to it all.

Many thanks.

[John]

Are you using a CMS like WordPress? If so you could just have different templates. One template to load certain files that are needed.

[Alen]

In general you want to minimize the number of requests you make to the server. So using single file makes sense. You’ll take the initial hit of downloading it, but for each additional request browser will load the cached version. In addition if you use, minification and you Gzip the response, IMO, single file wins.

https://developers.google.com/web/fundamentals/performance/

[Anonymous]

@John,

No, I’m not using a CMS.

@Alen,

I have a Normalize CSS file and a CSS file which handles ~95% of page styling for the site. There are a few pages that have added styling to paragraphs, or slideshows and scrollbars. In some of these instances the addes styling conflicts with the styling of other pages so I am trying to get as much on the CSS file that handles the majority of the styling on the site, without causing conflicts, and then add separate CSS for the individual pages that need the extra CSS.

I’ve been looking at the source codes of several sites, including this one, to see how many CSS and JS files are used and I think I will be Ok as mine will use about the same, or a few less than them. For example, this site has seven CSS and two JS files.

I think I’m on the right path and my thanks to everyone who responded. You’ve been a big help in sorting this out.

Best Regards.

[Author]

Posts