Not structuring CSS files / modules properly can be a big problem as a product grows.
Personally, I split them into smaller chunks based on different pages, and different widgets I have, and in the end I import them all in to a single global CSS file.
While there is obviously no right or wrong answer, I would like to know how everyone else here is doing this.
What’s your recommended way to breakdown CSS files?
Importing everything into one global css file causes several pages to get css they won't need.
People might have already cached that page, but caching everything only helps if people visit many different pages on your site.
For larger sites with tens of thousands of lines of css, it is better to only import what gets used. It becomes a problem when 90% of your visitors only see 10% of the pages on your site.
Where I work we import:
This is one of those "depends" questions, unfortunately.
Delivery: A website people visit rarely - strip things back to the lightest possible per-page load. Or at least isolate the really heavy stuff for the pages that need it.
A big application that people use daily - optimise for warm cache, don't fragment the files too much. Most strategies I've seen end up repackaging substantial amounts of repeated code into not-really-very-different payloads. Imagine a venn diagram where it's mostly crossover and very little unique - might as well just make one bit payload and take the hit.
Build: One file per component is a bit obvious; then a global payload and a per-view or per-section payload. Season with a preprocessor and concatenate to taste.
And a thought: The rules are going to change with http2, as well. I think we'll see a resurgence of plain old CSS @import and small files. Because why not? We only concatenated because connections were expensive in your performance budget.
If I'm doing something like a WordPress theme I might split my CSS based on function:
global.csstypography.csspalette.cssIf 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 pageshop.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.<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.
When I used to use Angular 1.x, I did exactly like what you do now. We used grunt to automate the bundling and minifying CSS. It's been 6 months I'm on React and I hardly ever use classes nowadays. All the css goes in form of JS objects in their respective components. There are a few places where things are easy with classes for that I only use single style.css as of now.
Marco Alka
Software Engineer, Technical Consultant & Mentor
I either use SHPS with CSS layers (new feature in v4.4) or I create one CSS file per layer and include them in the order I need them. Usually I go for ITCSS layers.
There are people who would go even deeper and split up layers into subgroups which each get its own file, but personally I think that's fragmentation of CSS (unless it's a big project und you have hundreds of CSS rules per layer)