样式：继续用框架还是自己写
两条路
做主题样式，两条路：
- 用框架（Bootstrap、Tailwind）：快，但要加载一堆用不到的 CSS；
- 自己写：可控、体积小，但要花时间。
caogenbj 选了 Bootstrap。好处是几天就能做出一个像样的站；代价是加载了 150KB+ 的 CSS，而实际用到的可能只有 10%。
框架的代价
Bootstrap 的 bootstrap.min.css 压缩后约 150KB。你的服务器 gzip 后约 25KB。听起来不多，但：
- 它是阻塞渲染的（在 head 里）；
- 里面 90% 的 class 你根本没用；
- 想改样式，得先搞懂它的变量和优先级。
对一个内容站来说，这个代价不太值。
自己写一个够用的
一个博客主题，其实只需要这么点 CSS：
:root { --ink: #333; --sub: #888; --line: #eee; --accent: #d43c33; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.8 -apple-system, "Microsoft YaHei", sans-serif; color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.layout { display: flex; gap: 30px; }
.content { flex: 1; min-width: 0; }
.sidebar { width: 280px; flex-shrink: 0; }
.post-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.post-meta { color: var(--sub); font-size: 13px; }
pre { background: #1e1e1e; color: #ddd; padding: 14px; border-radius: 6px; overflow-x: auto; }
code { background: #f4f4f4; padding: 1px 5px; border-radius: 3px; }
@media (max-width: 768px) {
.layout { display: block; }
.sidebar { width: auto; margin-top: 30px; }
}不到 30 行，覆盖了 90% 的需求。用 CSS 变量（--ink 这些）管颜色，以后改主题色只改一处。
几个容易忽略的点
1. box-sizing
* { box-sizing: border-box; } 让 padding 算在宽度里，不然布局会算错。
2. 代码块横向滚动
pre { overflow-x: auto; }，不然长代码会把页面撑宽，手机上尤其明显。
3. 图片自适应
img { max-width: 100%; height: auto; }不加这句，大图会把布局撑破。
4. 表格
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--line); padding: 8px; }不加这句，表格会挤成一团（我之前踩过这个坑）。
一个建议
先写内容，再调样式。把 13 个模板都写出来、能正常显示，再统一调整 CSS。别一边写模板一边调样式，那样很容易返工。
小结
一句话记住：内容站不必上框架——30 行 CSS 就够；记得 box-sizing、图片自适应、pre 横向滚动、表格边框。
下一篇做 SEO 层。
本系列导航
相关文章
搜索文章：
联系方式：
近期文章