从三件套到模块化：前端开发的底层思维

聊聊HTML/CSS/JS背后的设计哲学

一、前端三件套的本质

HTML、CSS、JS 看似简单，背后却有一套清晰的分工逻辑：

技术	职责	一句话
HTML	结构	搭骨架，用标签定义内容
CSS	样式	穿衣服，控制视觉呈现
JS	行为	动起来，处理交互与数据

最佳实践 ：CSS 放头部（避免页面闪烁），JS 放底部或用 defer（不阻塞渲染）。HTML+CSS 优先呈现，让用户"早点看到页面"。

二、HTML：语义化 > 堆div

块级 vs 行内

块级元素 ：独占一行，适合做盒子（div、header、section）
行内元素 ：兄弟间并排，适合装内容（span、a、img）

语义化标签的价值

别所有盒子都用div。搜索引擎和屏幕阅读器更懂这些：

text

css 复制代码

header → 页眉
nav    → 导航
main   → 主体内容
aside  → 侧边栏
footer → 页脚

Table 的语义完整性

表格必须包含 thead + tbody，这才是完整的语义结构：

html

css 复制代码

<table>
  <thead> <tr><th>姓名</th><th>年龄</th></tr> </thead>
  <tbody> <tr><td>张三</td><td>25</td></tr> </tbody>
</table>

三、CSS：盒子先行，行列布局

经典三板斧

盒子思维：先划分区域，再填充内容
Container 模式：中间固定宽度，左右留白（PC时代经典）
行列布局 ：.row + .col 构成网格体系

css

css 复制代码

.container {
  width: 1200px;
  margin: 0 auto;  /* 居中 */
}
.row {
  display: flex;
}
.col {
  flex: 1;
}

提到行列布局，自然联想到 Bootstrap ------ 最早的响应式框架，至今影响深远。

四、JS：从DOM编程到模块化

DOM 编程核心

HTML 加载后变成 DOM 树，JS 可以这样操作：

javascript

dart 复制代码

// 查找元素
const el = document.querySelector('.user-card')

// 修改内容
el.innerHTML = '<h1>新内容</h1>'

document 是根对象，document.body 是页面主体，document.documentElement 是根节点。整个页面就是一棵树，可以遍历、挂载、删除节点。

模块化：为什么拆分？

一个文件搞定所有功能？短期爽，长期崩：

问题	后果
不好维护	改一处影响全局
不好扩展	加功能像叠罗汉
不好优化	不知道代码在哪

原则：每个文件夹有明确职责，每个文件只做一件事。

五、for循环的进化：从计数到语义

javascript

scss 复制代码

// 老派：计数循环（机械、可读性差）
for(let i = 0; i < users.length; i++) {
  console.log(users[i])
}

// ES6：for...of（语义清晰）
for(let user of users) {
  console.log(user)
}

后者放弃"计数思维"，改为"遍历集合思维"，代码更接近人类语言。

六、后端准备：json-server 快速原型

JS 不只在前端。用 json-server 把对象字面量瞬间变成 HTTP 服务：

bash

csharp 复制代码

npm init -y
npm i json-server

json

json 复制代码

// db.json
{
  "users": [
    { "id": 1, "name": "张三" }
  ]
}

bash

css 复制代码

npx json-server db.json --port 3000

前后端分离的本地原型，10秒搞定。

七、一句话总结

HTML定结构，CSS管样式，JS控行为，模块化保长期。
语义化给机器看，DOM编程给人用。
大厂看重底层，底层就是这些简单规则的深度理解。

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、评论～