jquerycssfile-organizationdirectory-structure

Folder structure for scripts and stylesheets vs plugins


I am curious as to the best practices/most efficient way to structure my data.

options

  1. All scripts go in scripts folder, all stylesheets go in css folder.
    concerns with this method is that plugins that are dependent on a stylesheet would not be in the same directory and could be overlooked when adding the script to a page

  2. Dynamically add styles to plugin script via jQuery negating the need for the external stylesheet.
    concerts with this method is the overhead loading styles via jQuery vs. stylesheet

  3. Separate scripts, stylesheets, and plugins into separate folders and have the plugins script dynamically load the stylesheet.
    concerns with this method is that it's possibly equal to, or greater than the overhead of the previous method

I'm unsure of the overhead on options 2 & 3, they would be the cleanest/preferred methods however.

I plan on documenting the process on using the custom plugins, however I want to prevent over-site and future confusion but need to maintain low overhead.


Solution

  • options

    1 - All scripts go in scripts folder, all stylesheets go in css folder....

    Correct. Normalize all paths to suit this structure.

    2 - Dynamically add styles to plugin script via jQuery negating the need for the external stylesheet. concerts with this method is the overhead loading styles via jQuery vs. stylesheet

    Browser have a cache for a reason. This breaks the ability to cache.

    3 - Separate scripts, stylesheets, and plugins into separate folders and have the plugins script dynamically load the stylesheet. concerns with this method is that it's possibly equal to, or greater than the overhead of the previous method

    Don't load stylesheets dynamically. See #2.