Which is better? Split the CSS or one CSS for all?

[Velociraptor]

Hi,

I want to ask which is better when developing E-Commerce/online market place (meaning a lot of page).

A single css file for each/several related page or 1 css for the whole website meaning every page will link to that 1 css.

Thanks.

[Peter]

It can be handy to split up the CSS into many files so it's easier to manage in the development stage.  The final output though is usually one or two CSS files compressed.  It really depends on your site.  For example, maybe you want all responsive rules in a separate file, and others in another.  There isn't really any rule here, it really is what you want to do.

Generally when developing a site such as what you want wanting to do, we use an MVC pattern that would have a routing class to route to controllers.  Basically everything would flow through one file.  You wouldn't have separate files for listings, cart, checkout etc etc.  So having separate CSS files for those pages wouldn't really work too well unless you added in logic to only output CSS files for certain pages.  Basically what I am saying, is one CSS file for your whole site is fine.  Just look at the source at a few of the big known sites out there to see what they do.

[Violet]

It really depends on what you're going for/your architecture. I'm currently working in an Angular (4) SPA and there's one global CSS and each component that needs custom CSS has its own CSS file. But another project I'm working on (PHP), there's one single CSS file. The PHP project is also an MVC project.

Are you doing a SPA with a Vue/React/Angular Front-End framework, an MVC/MVVM project, or what?

[Kami]

Throwing in my two cents that during development it might be easier to have a singular file -- my project lead just had to combine our new storefront's CSS files to make QA a lot easier; I'm not wholly sure if they'll re-split them for live though.

I think there are probably merits to both ways though depending on your goals.

[Peter]

Most my projects don't have a massive ton of rules, so a single file is usually good enough.

With browser dev. tools getting so much better, it has become a lot easier to debug things like CSS now. You can see everything you want about the rules, where they are inherited from, turn them on / off, alter them, and lots more. It's pretty cool how far things have come over the years for us devs.

[Philip]

Ideally you want to inline the stuff that is above the fold(window height) inside your index.html or whatever.
So say navbar stuff, banner, anything that will be shared across all pages.

Then you can have all your CSS load via a separate stylesheet.

If your using a css precompiler(less|scss|sass) then you can separate(forms,tables,typography etc) into their own files and import them into your main .scss|.less file.

Like someone suggested(angular|vue|react) these are all based on the same technology, ie: web components, they all implement their own strategy simply because web components are not yet standardized.

The easiest way to think of a web component is to look at the video html element.
ie: the <video></video>. It has it own styles|javascript behind the scenes. If you add the controls attribute to this element <video controls></video> it shows a play|pause|timer etc, these are all hidden inside the "shadow DOM" all of these things are encapsulated and this is how the web works these days, again angular|vue|react work this way with their own interpretations.

I would suggest looking into a build tool(gulp|webpack) and these can be used independent of a javascript framework.