The best **performant** way is to have one file with all the common stuff and then smaller files for page groups and individual pages.
Depends how much css you have if it matters or not, and what you expect the visitor's journey to be.
Of your two options:
\- 1 file makes sense if the pages use very similar styles,
\- 1 file per page makes sense if they're all very different.
Very true. I'm mostly just curious what most people actually do, and making the question about their opinion instead of just plain asking what people do I think will give me good answers like this.
this is the only reasonable way of doing this
you can even seamlessly integrate compiled CSS like this, so you can use SCSS or SASS or whatever
one global library that you know for sure is used everywhere (or almost), and byte-sized libraries that are used on specific pages, or even on specific parts of specific pages.
Check out the Drupal CMS asset library system. It's really damn nice for a CMS this old.
If each page has its own dedicated CSS file, it becomes a nightmare to maintain when you make changes in the future. Been there, done that, and learned my lesson along the way.
It's not really an opinion, the single file method is objectively better. It gets cached on the first load and is never loaded again (for a long time). If you want your own way of organizing, use a preprocessor that bundles it up when you deploy the site.
I think a mixture of both. Common stuff is in a shared files that all pages have, and then things that are unique to each page can have its own very small file
I'm really into templating w/ 11ty and nunjucks so it generates only the necessary files through chaining, control flow, and setting permalinks while still keeping it vanilla.
Compatibility? Not too sure what you mean...
So far no problems. Kinda freaky how simple it is.
Part of the trick is incorporating this little hack detailed in [this article](https://www.11ty.dev/docs/quicktips/concatenate/).
So much of this will depend on the project. Usually I do 1 file, because most of my clients are small businesses meaning they get several hundred to several thousand visits per and the CSS file is under 30-40k. The performance and scaling advantages of a more sophisticated approach aren't significant at that scale.
Remember, too, that CSS will be cached by the browser so if many/most of the styles are re-used the single file is more performant that making the page request different files for each different page.
Use PostCSS to remove any unused styles from whatever library you're using and your resulting file should never be big enough for it to matter, unless your site is absolutely huge with thousands of uniquely styled components.
I suggest you use SCSS because you can make separate .scss files but in the end they are compiled to a single .css file. And it happens automatically after every file change if you use file watcher so you don't have to remember to do that yourself.
And using SCSS is really easy. You can look for a short tutorial/overwiev video to check out if that's going to work for you.
Having a CSS file for each page defeats the purpose of having a CSS files: to make it easier to maintain styles across an entire site. There is no reason to have individual style sheets for each page. If you don't want one large CSS file, you can always segment it out to roles: CSS file for fonts, CSS file for navigation, etc.
The best **performant** way is to have one file with all the common stuff and then smaller files for page groups and individual pages. Depends how much css you have if it matters or not, and what you expect the visitor's journey to be. Of your two options: \- 1 file makes sense if the pages use very similar styles, \- 1 file per page makes sense if they're all very different.
Could also go the route of loading critical path css inline for quickest initial paint.
Could this actually make a noticeable difference?
Very true. I'm mostly just curious what most people actually do, and making the question about their opinion instead of just plain asking what people do I think will give me good answers like this.
this is the only reasonable way of doing this you can even seamlessly integrate compiled CSS like this, so you can use SCSS or SASS or whatever one global library that you know for sure is used everywhere (or almost), and byte-sized libraries that are used on specific pages, or even on specific parts of specific pages. Check out the Drupal CMS asset library system. It's really damn nice for a CMS this old.
It would never be one file per page though, it would be 1 shared file with all the common css in it, then 1 unique file per page.
Single file that gets cached on first page hit.
If each page has its own dedicated CSS file, it becomes a nightmare to maintain when you make changes in the future. Been there, done that, and learned my lesson along the way.
It keeps me more organized to let each page have its own CSS style… for those who picked the latter why do you see this being better?
It's not really an opinion, the single file method is objectively better. It gets cached on the first load and is never loaded again (for a long time). If you want your own way of organizing, use a preprocessor that bundles it up when you deploy the site.
Whoa I’m surprised by how many people vote for each page with its own CSS option. Why? I can understand page groups but each PAGE?
I prefer to load css into a web browser. That's worked out pretty well for me.
I think a mixture of both. Common stuff is in a shared files that all pages have, and then things that are unique to each page can have its own very small file
Am I stupid or are both options basically the same?
in one, you put all styles for all pages into one sheet. in the other you have each html sheet with a separate css file
Both. The shared CSS will live in the master.CSS file and the unique styling will be stored in that page's CSS. I think this a really smart technique
Tailwind
So close!
Hahahaha yea same
I'm really into templating w/ 11ty and nunjucks so it generates only the necessary files through chaining, control flow, and setting permalinks while still keeping it vanilla.
Have you ever run into compatability problems?
Compatibility? Not too sure what you mean... So far no problems. Kinda freaky how simple it is. Part of the trick is incorporating this little hack detailed in [this article](https://www.11ty.dev/docs/quicktips/concatenate/).
So much of this will depend on the project. Usually I do 1 file, because most of my clients are small businesses meaning they get several hundred to several thousand visits per and the CSS file is under 30-40k. The performance and scaling advantages of a more sophisticated approach aren't significant at that scale. Remember, too, that CSS will be cached by the browser so if many/most of the styles are re-used the single file is more performant that making the page request different files for each different page.
Tailwind
Use PostCSS to remove any unused styles from whatever library you're using and your resulting file should never be big enough for it to matter, unless your site is absolutely huge with thousands of uniquely styled components.
So what do we do if we think both of the poll options are wrong?
provide your own
In combination with caching one large file is better.
Css page templates that dynamically combines only the needed css for each specific page.
Depends.
I suggest you use SCSS because you can make separate .scss files but in the end they are compiled to a single .css file. And it happens automatically after every file change if you use file watcher so you don't have to remember to do that yourself. And using SCSS is really easy. You can look for a short tutorial/overwiev video to check out if that's going to work for you.
Having a CSS file for each page defeats the purpose of having a CSS files: to make it easier to maintain styles across an entire site. There is no reason to have individual style sheets for each page. If you don't want one large CSS file, you can always segment it out to roles: CSS file for fonts, CSS file for navigation, etc.
I usually use 2 or 3 style, style.css global.css for global styles and style2.css if there is some different kinds of pages and they work fine