Template file structure
Basic Concepts of Template File Structure
The HTML template file structure is the foundation of front-end development. A well-organized file structure enhances code maintainability and team collaboration efficiency. A typical HTML project contains multiple file types, each with its specific location and purpose. Common files include HTML main files, CSS stylesheets, JavaScript scripts, image resources, and more.
Core File Structure
The most basic HTML project includes at least the following files:
project/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── main.js
└── images/
index.html serves as the entry file and is usually placed in the project root directory. CSS and JavaScript files are stored in their respective directories, adhering to the principle of separation of concerns.
Basic Structure of HTML Files
The standard HTML5 document structure is as follows:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Page content -->
<script src="js/main.js"></script>
</body>
</html>
The DOCTYPE declaration must be placed on the first line, and the html element should specify the lang attribute. CSS files are linked in the head, while JavaScript files are typically placed at the end of the body.
Multi-Page Project Structure
For projects with multiple pages, the following structure is recommended:
project/
├── index.html
├── about.html
├── contact.html
├── css/
│ ├── base.css
│ ├── layout.css
│ └── modules.css
├── js/
│ ├── main.js
│ └── utils.js
└── assets/
├── images/
└── fonts/
HTML files are placed flat in the root directory for easy access. CSS is split by functionality: base.css contains foundational styles, layout.css handles layouts, and modules.css includes component styles.
Component-Based Structure
Modern front-end development often organizes code using a component-based approach:
components/
├── header/
│ ├── header.html
│ ├── header.css
│ └── header.js
├── footer/
│ ├── footer.html
│ ├── footer.css
│ └── footer.js
└── modal/
├── modal.html
├── modal.css
└── modal.js
Each component has its own HTML, CSS, and JavaScript files, making them easy to reuse and maintain. Build tools like Webpack or Vite can help assemble these components.
Resource File Organization
Static resources should be categorized by type:
assets/
├── images/
│ ├── icons/
│ ├── backgrounds/
│ └── logos/
├── fonts/
│ ├── font-regular.woff2
│ └── font-bold.woff2
└── media/
├── video.mp4
└── audio.mp3
Images can be further subdivided by purpose, and font files should include multiple formats for cross-browser compatibility.
Build Tool-Generated Structure
When using modern build tools, the structure typically distinguishes between source and output:
src/
├── index.html
├── scss/
│ └── main.scss
├── js/
│ └── app.js
└── assets/
dist/
├── index.html
├── css/
│ └── main.css
├── js/
│ └── app.bundle.js
└── assets/
The src directory contains development source code, while the dist directory holds the built production code. Preprocessor files like SCSS are compiled into CSS during the build process.
Naming Conventions
File naming should follow consistent rules:
- HTML files: lowercase letters with hyphens, e.g.,
user-profile.html - CSS files: same as above, e.g.,
theme-dark.css - JavaScript files: camelCase or hyphenated, e.g.,
formValidator.jsorform-validator.js - Image files: descriptive names with dimensions or resolution, e.g.,
banner-1200x600.jpg
Modular JavaScript Structure
For complex JavaScript applications, organize by functional modules:
js/
├── lib/
│ └── third-party.js
├── modules/
│ ├── user/
│ │ ├── api.js
│ │ └── profile.js
│ └── cart/
│ ├── api.js
│ └── checkout.js
├── utils/
│ ├── dom.js
│ └── http.js
└── app.js
The entry file app.js imports various modules, which communicate through well-defined interfaces.
Responsive Design Structure
Responsive projects may require additional structure:
css/
├── base/
│ ├── _variables.css
│ └── _reset.css
├── layout/
│ ├── _grid.css
│ └── _header.css
├── components/
│ ├── _buttons.css
│ └── _cards.css
└── responsive/
├── _mobile.css
├── _tablet.css
└── _desktop.css
Use media query files or SASS mixins to implement styles for different breakpoints.
Documentation and Configuration Files
A complete project should also include:
project/
├── README.md
├── LICENSE
├── .gitignore
├── package.json
└── docs/
├── api.md
└── styleguide.md
These files provide project information, configuration, and documentation, which are crucial for team collaboration.
Internationalization Structure
Projects supporting multiple languages need a specific structure:
lang/
├── en/
│ ├── index.html
│ └── messages.json
├── zh/
│ ├── index.html
│ └── messages.json
└── ja/
├── index.html
└── messages.json
Each language has its own directory or uses JSON files to store translated strings.
Test File Structure
Test code should mirror the source code:
src/
├── components/
│ ├── button/
│ │ ├── button.js
│ │ └── button.test.js
└── utils/
├── math.js
└── math.test.js
Test files are placed alongside the code they test or grouped in a test directory.
Static Site Generator Structure
Generators like Hugo or Jekyll follow specific conventions:
content/
├── _index.md
├── posts/
│ ├── post1.md
│ └── post2.md
static/
├── css/
└── js/
layouts/
├── _default/
│ ├── baseof.html
│ └── list.html
└── partials/
├── header.html
└── footer.html
Content, templates, and static resources are strictly separated for easier content management and automated builds.
Single-Page Application Structure
Example structure for an SPA:
src/
├── assets/
├── components/
│ ├── common/
│ └── views/
├── router/
├── store/
├── services/
├── styles/
├── utils/
├── App.vue
└── main.js
Organized by functionality rather than file type, with best practices varying for Vue/React/Angular.
Large-Scale Project Expansion
Very large projects may require finer granularity:
src/
├── domains/
│ ├── user/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── store/
│ └── product/
├── lib/
├── features/
└── shared/
Divided by business domains, with shared code clearly separated to avoid cross-dependencies.
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
