I've been using a global.css file (defaults, variables, utilities...) and then component-scoped styles but thinking of braking up the global CSS file as it's getting heavy. Does it matter if I use 10 different stylesheets, I'm assuming Astro bundles them all together at build?
#multiple css files
cyan crest
slender joltBOT
Hi @cyan crest. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you're correct. Astro does bundle all your CSS files together during the build process. When Astro builds your site for production deployment, it minifies and combines your CSS into chunks. Each page on your site gets its own chunk, and additionally, CSS that is shared between multiple pages is further split off into their own chunks for reuse. This is done to optimize the loading times and improve the user experience on your site source (https://docs.astro.build/en/guides/styling#bundle-control).
However, when you have several pages sharing styles, some shared chunks can become really small. If all of them were sent separately, it would lead to many stylesheets requests and affect site performance. Therefore, by default Astro will link only those in your HTML above 4kB in size as <link rel="stylesheet"> tags, while inlining smaller ones into <style type="text/css">. This approach provides a balance between the number of additional requests and the volume of CSS that can be cached between pages.
You can configure the size at which stylesheets will be linked externally (in bytes) using the assetsInlineLimit vite build option. Note that this option affects script and image inlining as well.
import { defineConfig } from 'astro/config';
export default defineConfig({ vite: { build: { assetsInlineLimit: 1024, } };});
If you would rather all project styles remain external, you can configure the inlineStylesheets build option.
import { defineConfig } from 'astro/config';
export default defineConfig({ build: { inlineStylesheets: 'never' }});
You can also set this option to 'always' which will inline all stylesheets source (https://docs.astro.build/en/guides/styling#bundle-control).
So, breaking up your global CSS file into multiple stylesheets should not be a problem as long as they are imported correctly. It is a common convention to store your CSS or Sass files in a src/styles directory, but this is not required. As long as your styles live somewhere in the src/ directory and are imported correctly, Astro will handle and optimize them source (https://docs.astro.build/en/basics/project-structure#srcstyles).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
cyan crest
@slender jolt Should CSS files be split up or should I just use one file?
slender joltBOT
Let me check the knowledge base for you. One moment! :books:
The decision to split up CSS files or use a single file depends on the complexity and size of your project.
If your project is small and the styles are not too complex, a single CSS file might be sufficient. However, as your project grows and becomes more complex, managing a single CSS file can become challenging. In such cases, splitting your CSS into multiple files can make your code more organized and easier to maintain.
Astro provides the flexibility to handle both scenarios. When building your site for production, Astro minifies and combines your CSS into chunks. Each page on your site gets its own chunk, and CSS that is shared between multiple pages is further split off into their own chunks for reuse. This is done to optimize loading times and improve the user experience on your site source (https://docs.astro.build/en/guides/styling#bundle-control).
By default, Astro will link only those stylesheets in your HTML above 4kB in size as <link rel="stylesheet"> tags, while inlining smaller ones into <style type="text/css">. This approach provides a balance between the number of additional requests and the volume of CSS that can be cached between pages.
You can configure the size at which stylesheets will be linked externally using the assetsInlineLimit vite build option, or choose to always inline or always link stylesheets using the inlineStylesheets build option source (https://docs.astro.build/en/guides/styling#bundle-control).