Best Practice to Organize Javascript Library & CSS Folder Structure
Focus on a modular approach. Segregate third-party libraries like jQuery or Bootstrap into a dedicated vendor subfolder and house your own files (app.js, main.css) at the root level of your respective directories. This approach not only ensures ease of updates but also provides an intuitive structure for your project.
Asset types management: A Separate 'Home' for each
To simplify your project management, organize the different types of assets into exclusive folders like js, css, images etc., under your main assets directory. This segregation creates clarity and enhances efficiency while dealing with bulk operations like minification or concatenation.
Hierarchy & naming conventions: Usability heroes
Maintain a clear naming convention and a simple hierarchy to ensure your project's structure stays comprehendible and navigable. Descriptive names paired with specific filenames that illustrate their version or purpose (jquery-3.5.1.min.js, bootstrap-grid.css) make locatability of the files a breeze. Further categorize the files into their corresponding css, js, images, etc directories within each library for optimal transparency and scalability.
π Libraries & Styles Boulevard
π /js/libs/ - The Subway station for third-party libraries
π /js/modules/ - The Tram lines for modular scripts
π /css/vendor/ - The Bus terminal for third-party styles
π΄ /css/main/ - Bike lanes for your custom styles
π Assets Park
πΌοΈ /assets/images/ - The Gallery for images
ποΈ /assets/videos/ - The Cinema for videos
## Diving deeper into modularity
Think of your JS and CSS directories as wide streets. For growing projects, creating **functional sub-lanes** within these streets paves the way for smoother workflows. Divide into **components** like `/js/ui/`, `/css/components/`, that allows multiple developers to work simultaneously and independently, keeping merge conflicts at bay.
## Uniting JS & CSS: Tackling mixed-assets
Dealing with **Javascript plugins**? Place their CSS files in the `lib` folder alongside their `.js` counterparts. This brings all associated files together for easier traceability, especially beneficial while dealing with UI libraries or widgets incorporating both JS and CSS.
## Embracing project evolutions
As your project scales, your folder structure will start showing signs of strain. **Refactoring** isn't just a recommendation, it's a **necessity** to retain sanity in your codebase. Embrace change and stay flexible to **restructure** your project as and when needed.
Was this article helpful?