Jump to content

Caching + Micro-optimizing CSS


ChenXiu

Recommended Posts

Because my CSS files are small, they are located in the <head> of my pages (not linked as a stylesheet).

Best Practices Question:
Should each page have ONLY the CSS rules necessary for that page?
-or-
Should the exact same <head><style>css rules</style></head> be duplicated across every page (even when some of the pages don't need all the rules)?

Simplistic example:
page1.html has four elements: paragraph, table, button, and a footer.
page2.html only has two elements: paragraph and a footer (but no table and no button).

Should both page1.html and page2.html have CSS rules for all four elements (paragraph, table, button, and footer)?
Or should page2.html omit the two CSS rules it doesn't need?

I would think it's best to be conservative and ONLY include CSS rules necessary for the page.

But I wonder if browser caching improves when you "keep things the same" across your pages.

Thank you.

Link to comment
Share on other sites

2 hours ago, Barand said:

resign

haha -- I'll resign THEM if they want my pages pink and lime green :-)

Thank you, your point is well taken.

Even when making the most minor change, so much time is wasted scrolling up to, and searching for, the CSS rule in my <head><style>, and then returning back to the code portion... and then having to do that for every page.

Having just ONE page of CSS rules, and then just using PHP "require" would speed things up by not having to make individual page changes.

Regarding browser caching... I wonder if you jump from a 50 CSS rule page, to a 20 CSS rule page, and then from there to a 50 CSS rule page if that slows things down.

(I'm going to guess browsers don't cache individual rules.)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.