When designing and implementing your web design, it makes sense not to implement everything in one large project file, but to define individual components for general scenarios and to divide them into modules has many advantages in practice and is common practice in large projects, which can be seen, among other things, in the strict application of atomic design.
The answer to the following questions may also interest you
Atomic Design is an approach to web design developed by Brad Frost and is based on the idea that a design system is built similar to chemical elements. The advantage of this design method is that different elements can be used multiple times and the web design can be easily modified. Atomic Design consists of five elements that build on each other: Atoms, Molecules, Organisms, Templates and Pages.
A detailed introduction and explanation of the advantages of Atomic Design can be found in the original post by Brad Frost at bradfrost.com/blog/post/atomic-web-design/, as well as in the t3n blog at t3n.de/news/atomic-design-baukastensystem-721010/.
For the efficient development of a pattern library according to the Atomic Design approach, I think it is perfect to start with it already during the development of a prototype / click dummy and then continuously expand this basis. This way, the required elements are automatically created in a well-documented form.