search

frehner / modern-guide-to-packaging-js-library

A guide to help ensure your JavaScript library is the most compatible, fast, and efficient library you can make.
GNU General Public License v3.0
1.44k stars 38 forks source link

CSS- one bundle for all styles or distributed among modules? #14

Closed frehner closed 2 years ago

frehner commented 2 years ago

Discussed in https://github.com/frehner/modern-guide-to-packaging-js-library/discussions/11

Originally posted by **meniYud** September 1, 2022 What do you do with your stylesheets? When you bundle your library code (and keep file structure), Do you create one big 'bundle.css' (the 'simpler' way in most bundlers) ? Or is it better to keep each css next to its consumer js file? (i.e. If the end user consumes only 'button' from my library, it makes no scence for them to include my entire bundle.css ...)
frehner commented 2 years ago

Current rough draft:


### Split your CSS files

<details>
<summary>Enable devs to only include the CSS they need</summary>

If you are creating a CSS library (like Bootstrap, Tailwind, etc.), it may be easier to provide a single CSS bundle that includes all the functionality that your library provides. However, even in that situation, your CSS bundle may end up becoming large enough that it affects the performance of the devs' sites. In such cases, these libraries generally provide methods of generating a CSS bundle that only includes the necessary CSS for what the developer is using (see how [Bootstrap](https://getbootstrap.com/docs/5.2/customize/optimize/) and [Tailwind](https://tailwindcss.com/docs/optimizing-for-production) do it.)

A similar option is to do what [react-component](https://github.com/react-component/slider#usage) does, where you separate out your CSS into individual bundles per component that are imported when the corresponding component is used.

</details>