html - One big css file vs multiple small css files -

i have read different information question, , see people suggest using 1 big css file, performance point of view. don't understand, won't take more time load css file of pages load each 1 each page, when requested? (examples of have seen: multiple css files or 1 big css file? , single huge .css file vs. multiple smaller specific .css files?). yes, maybe there multiple http requests, happen in different periods of time, isn't better load each page when needed, waste time on loading css every page in beginning , displaying them on fly?

there pros , cons of both approaches.

having multiple css files allow organize , group css files in development. however, means there multiple http requests make. http requests more expensive in terms of loading time has contact server , fetch file.

also once file loaded, cached browser. means, even-though might slower load huge.css, doesn't need loaded again when navigate around site.

in experience , adapted of developers, below of both worlds.

use css pre-processers sass or less. don't ask me 1 better, there enough arguments going around web on topic. pick 1 comfortable with. preference sass.

css pre-processers allows divide css files smaller more organized files. example, have main.sass includes menu.sass, footer.sass, etc.

main.sass

include _menu include _footer include _header ... 

_ tells sass not compile seperate files each of these sass files. compiled 1 main.css. these pre-processors come functionality compile given sass files css file browser can read. can use tools [livereload][4] compile them in real-time.

you have these sass files in development code. in production code, can use compiled single css file.

if feeling more advantageous , want take things further, can use tool grunt or gulp. allow automate development tasks or build processes. ideally, in development have grunt task watches sass files , automatically compiles them main.css file. in index.html can have reference main.css. once happy, can have task called build task, can automatically compile css files , minimize them.

to clarify question:

it depends best in case case basis, kind of site have , how have built it.

if have website visitors never navigate around site particular pages, better load css specific particular page , not combine it. can load these css files in partials specific these page.

in experience building many many sites,

1. its best load 1 combined css.
2. if particular page requires css not visited often, include page specific css in templete seperately conditional script tag.
3. minimize css files 100% of time

also, suggest spend more time improving efficiency of server side code or database, worrying css. more productive of in-efficiency lies in server side.