In this article we'll talk not about code, but about strategy... Are you already familiar with the “divide and conquer” saying? We're adding a second part to it shortly.
Divide and conquer - destructuring
Code, CSS styles, pages... It's useful to have them all together in the same file: you don't have to search for pieces everywhere, right? Everything is in one place. The perfect example of a “hello world” project maybe. Because if you begin adding stuff to the project, you'll end with a huuuuge melting pot of stuff, where finding something becomes literally impossible.
Here's the reason for having .html files, .css files, .js files and so on. But wait a minute, what if the project is more complex than a single static html page? Your scripts and your styles will grow exponentially and you'll end with a complete mess like before.
That's the reason it's a good habit to divide a potentially huge bunch of code into smaller pieces, correctly organized in folders, with filenames able to let you understand what's inside at a glimpse.
Strategically this has a huge impact on maintainability: you can go straight to the filename matching the topic you're interested in to change that single property without all the other code generating confusion and without the risk of messing with something else.
Tat seems perfect! A small effort to decide in advance how to organize your folder structure, but a huge benefit from it.
Now you just have to import every single function, correctly remembering what is its file path. Every-single-time! Maybe it's not so perfect, after all...
Regroup and manage your empire – barrelling
Even if repetitive and error-prone, destructuring big files to make them more manageable is already an added value. But you can mitigate greatly this problem by re-gathering all these file references (not the code itself) in one single index file.
When you'll need a resource, then, you can point always at the same file (or few files) that you already know gathers all the functions stored in sub-folders. Yes, you still have to declare your sub-containers inside the index, but once done, you can refer directly to one single resource file!
This technique is called “barrelling” and helps you focus only on "what you need", saving your mental sanity to also declare correctly “where to find it” every single time.
In JavaScript/TypeScript, a barrel regroups the exports of multiple modules into a single one that you can import with a single import statement. In CSS instead, a barrel regroups imports statements of sectionalized CSS files (typography, colors, variables...), but in the end, the technique is basically the same.
Example for JS/TS
/* File index.ts */
export * from './module1';
export * from './module2';
export * from './module3';
/* In your module you can import single values naming them undividually or all using '*' */
import { var1, var2, var3 } from './folder'; // it should be ./folder/index.ts but TypeScript, for example, can imply that
Example for CSS
/* File style-index.css */
@import url('Ux.css');
@import url('colors.css');
@import url('typography.css');
@import url('variables.css');
Be aware
Barreling has also a couple of drawbacks, that you should be aware of but that shouldn't scare you.
Since you're using a barrel file, this is another resource to be downloaded. It may not be a huge deal but keep it in mind if you're strict in resources.
For CSS barreling, try to go for "full barreling" or "no barreling", because you know, in CSS declaration order matters. Since declaring @import rules inside a CSS file requires that the "barrel" has to be downloaded and parsed before downloading and parsing its imports, having files that are parsed in a different order than what you expect could potentially cause problems.
Naming should be carefully evaluated since importing different resources with the same name will inevitably create conflicts and overrides. But you already know you... WE should be thoughtful when naming things, right?
Finally, some tools could not be able to analyze barreled contents, so make sure to test before committing to a potentially long rework!
A final word
Barreling is a great tool/technique if you want to program modularly, in order to build scalable and reusable TypeScript applications and organize complex styles and in my opinion you should definitely give it a try.