Comment by Tommy Hodgins on "What’s your recommended CSS file breakdown?"

If I'm doing something like a WordPress theme I might split my CSS based on function:

If I'm building a single-page app, I won't even bother to make a CSS file, all CSS goes into one <style> tag at the top of the page.

If I'm working on a web app I split things up like this:

global.css for sitewide styles, plugin CSS, and things that must always be present on every page
module-specific CSS, like if you're in the /shop section maybe there's a shop.css that would cover the styles in common in the catalog, cart, and checkout process, but aren't needed for the /blog part of the site.
view-specific CSS, this would be stuff that only ever needs to appear on the specific view where those elements appear. I will often put this right in the view file in a <style> tag, and this way I can be sure that I'm not loading CSS I don't need to.

Global + Module-level + View-level = Complete, flexible, and no wasted bandwidth.

Search Hashnode