Home/ Questions/Q 9184301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:00:49+00:00

I was doing a search about CSS best practices, thinking about what are the

  • 0

I was doing a search about CSS best practices, thinking about what are the best practices to maintain my code and I read something that is really against almost all I’ve learned, but it comes from google.
I always prefer to use multiple stylesheets. I find it better to maintain the code, and also my code won’t load several css classes that won’t be used.

Google developer guides us to exactly the oposite:

Combining external stylesheets into as few files as possible cuts down on RTTs and delays in downloading other resources.

Here are some rules of thumb for combining your CSS files in production, also recommended by them:

  1. Partition the CSS into 2 files each: one CSS file containing the minimal code needed to render the page at startup; and one CSS file containing the code that isn’t needed until the page load has completed.
  2. Serve CSS of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
  3. For CSS that shouldn’t be cached, consider inlining it.
  4. Don’t use CSS @import from a CSS file.

Really… Google recommends inline css when the css would not be cached?? or use the less css files as possible? (sure we should not use a css for every thing, but we I always read experient web-designers recommending to use multiple style sheets, so i’m really confused (if it wasn’t coming from google, i’d ignore but as it is, I thought about asking stackoverflow’s users opinion, because I think it can be helpful to others too).

PS: You can find here the address of the information I posted.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Page requests are usually taking longer then loading a few extra bytes. That is why Google suggests what they do. It is indeed best practice imo, and it is also what I do.

    Just to keep your code organised, you should consider working with a css preprocessor like less (lesscss.org). This way you can keep your code in separate files for easy developing. You then use a bunch of @import statements in your master less, and have that compiled to css. That is then the only css file you need to load in your page. Do make sure to @import .less files, and not .css files, as the latter will still generate an extra page request.

    • 0