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 wa开发者_如何学Cnt to prevent over-site and future confusion but need to maintain low overhead.

---

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.

---

Personally I use this type of folder structure, because it clearly defines the code I must manage versus the code I use but do not manage.

Content
   scripts
     //scripts you created
   css
     //css you create
   images
     // images you created
   frameworks
     jQuery
     jQueryUI
     Other Plugins

---

I recently wrote a post detailing my folder setup, which is based on a siloed structure of 4 top-level folders:

/assets
/content
/resources
/vendor

The reason for this is separation of concerns, based on 3 main criteria:

• what is the content type?
• who is responsible for the content?
• how often the content will be updated?

The core tenet is separating 3rd-party code from project code through /vendor and /assets.

Any code that should be layered between (e.g. themes, enhancements, monkey-patches) should go in /assets/vendor.

Therefore your customisation hierarchy is:

• /vendor
• /assets/vendor
• /assets/[resource type]

It won't solve your questions about the way to load assets, but it will provide structure on how you manage your assets.

More info and examples here: http://www.davestewart.co.uk/blog/project-structuring/