Creating partials outside of the templates folder I'm interested in building a highly modular Craft site in which my folder structure might look something like this:

- craft/
- modules/
  - hero-banner/
      index.html
      scripts.js
      styles.css
  - carousel/
      index.html
      scripts.js
      styles.css
- templates/
    404.html
    index.html
    _layout.html
index.php
robots.txt
.htaccess


An example of what hero-banner/index.html would look like:

&lt;div class="hero-banner__contain"&gt;
  &lt;div class="hero-banner__content"&gt;
    &lt;h2 class="hero-banner__title"&gt;{{title}}&lt;/h2&gt;
    &lt;p class="hero-banner__subtitle"&gt;{{subtitle}}&lt;/p&gt;
  &lt;/div&gt;
  &lt;img src="{{image}}" alt="{{title}}"&gt;
&lt;/div&gt;


An example of how you'd use this in a Craft template like templates/index.html:

{{
  craft.componentUI.run('hero-banner/index', {
    title: 'Welcome to my site!',
    subtitle: 'This is an intro paragraph that has a bit more detail about this site.',
    image: 'http://dummyimage.com/800x350/000000/555555'
  })
}}


A couple reasons I'd like to do something like this:


To create a parity between a style guide and the live site. This way a change to hero-banner/index.html would be reflected in the style guide and the live site. I understand a partial can do the same thing, but I'd prefer something like this because...
We can encapsulate a module's HTML, CSS and JavaScript in one place. Doing this will allow us to utilize Git or npm to manage these modules individually if we'd like to use them on other sites. It also makes locating a module's assets much easier since they're centrally located rather than being in 3 different folders.


I've found a way to reference template files outside the standard templates/ directory to make this work. So I know this sort of setup can work.

However, my question is what problems could arise from this type of setup? Do I need to be concerned about performance/security/something else entirely?

Edit: Just for further clarification, I'm not looking to serve my CSS and JS through Craft. I want to keep my CSS and JS as-is, but wondered if I could call the modules from those directories (outside of the normal Craft templates).
So a few potential things to consider:


You do not want to be serving static assets like Javascript, CSS, etc. out of the templates directory.  I realize you're planning to put them "elsewhere", but ensure that elsewhere is in the /public/ folder, so that php, Yii, and Craft do not have to be spun up just to serve a static asset.  Do not use a Craft routine/plugin to load them.
The entire point of modularization is that the payoff is down the road as you're able to reuse components on future projects by just "plugging them in".  I've seen this approach taken on many types of software projects, from desktop apps to mobile apps to websites.  It almost never works out as well as people think it will, unless it is seriously well architected, because we're generally not a factory churning out widgets.  There are things unique to each website beyond the basic functionality that requires customization; writing something that is both that general, and also useful is difficult.  Think of how many hours you have spent fighting even well-implemented frameworks like Bootstrap or Foundation.
Most things of this nature either end up being way, way over engineered and bloated, with a ton of time spent on them, and the promised gains down the road in terms of time savings never being realized due to the aforementioned issues.


Just my two cents.