基于原子设计的静态组件开发：如何按需合并HTML/CSS/JS文件

Hey there! Great question—this is a super common challenge when building atomic design systems with static workflows, and there are a few practical approaches to solve it depending on your project size and tooling preferences. Let’s break them down:

If your system is still growing and you don’t want to add complex tooling, you can manually bundle each component’s HTML/CSS/JS into self-contained fragments:

• Combine resources into one file: For each atom/molecule, inline its CSS and JS directly into the HTML file. This turns the component into a single, reusable snippet. For example:

  <!-- components/atoms/button.html -->
  <style>
    /* Copy all styles from button.css here */
    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
    }
    .btn-primary {
      background: #007bff;
      color: #fff;
    }
  </style>
  
  <button class="btn btn-primary">Click Me</button>
  
  <script>
    // Copy all logic from button.js here
    document.querySelector('.btn-primary').addEventListener('click', () => {
      console.log('Button clicked!');
    });
  </script>
  

• Import only what you need: When building page templates, just include the HTML snippets for the components that page actually uses. For example, a login page might only pull in the button atom and header molecule—no extra, unused code gets loaded.

Manual work gets tedious fast as your component library grows. Build tools can automate bundling and ensure only necessary resources make it to each page:

Option A: Gulp + Template Engines (Nunjucks/Handlebars) #

• Set up Gulp tasks to scan your page templates, identify which components are used, and bundle their CSS/JS into page-specific files.
• Use a template engine to import components cleanly. For example, in Nunjucks:

  <!-- templates/login.html -->
  {% include "../components/molecules/header.html" %}
  {% include "../components/atoms/button.html" %}
  

  Your Gulp task will collect all CSS from the included components, merge it into login.css, do the same for JS into login.js, and automatically inject these files into your final page.

Option B: Webpack + Single-File Components #

• Adopt a single-file component format (similar to Vue SFCs) where each atom/molecule lives in one file with all three resource types:

  <!-- components/atoms/button.atom -->
  <template>
    <button class="btn btn-primary">{{ buttonText }}</button>
  </template>
  
  <style>
    .btn { /* ... */ }
    .btn-primary { /* ... */ }
  </style>
  
  <script>
    export default {
      props: ['buttonText'],
      mounted() {
        this.$el.addEventListener('click', () => console.log('Clicked!'));
      }
    }
  </script>
  

• Configure Webpack with loaders (like html-loader, css-loader) to parse these files. Then, in your page entry points, only import the components you need—Webpack will tree-shake unused code and bundle only the required resources for each page.

SSGs are built for this kind of component-driven static workflow:

• Turn each atomic component into a "partial" (reusable template fragment). For example, in Eleventy, you’d store components in _includes/components/atoms/button.njk.
• When building pages, import only the partials you need. SSGs can automatically extract and bundle component CSS/JS into page-specific assets, so every page loads exactly what it requires—no bloat.

Quick Pro Tips #

• Use BEM naming or CSS modules to avoid style conflicts between components.
• Write JS in ES module format (export/import) so build tools can easily tree-shake unused code.

内容的提问来源于stack exchange，提问作者virginiarcrz