虽然前端的工具在不断的迭代并尝试让工具的配置尽可能的简单，但是还是太重了，在开发一些简单的页面的时候我根本就不要什么虚拟DOM, 什么MVVC, 最重要的是，我不想要单独维护一个代码仓库, 所以对应简单的页面，我决定重新走后端渲染前端页面的老路。
值得注意的是，我并不是要否定前端框架的必要性，我只是不想写一个简单的页面还需要单独维护一个前端项目，或者说前后端分离。对于前后端分离有必要的项目，我还是很乐意选择一个前端框架的。
前端工具和框架的优势
随着前端的快速迭代，创建一个前端项目已经是很简单的事情了，比如使用vitejs就能很快拉起一个项目，并且使用起来也比较简单，而且这类的工具也提供了一套比较好的最佳实践，用户只需要在这个框架开发就能享受到诸如页面自动加载，一键打包等各种愉快的开发体验。
对于大多数后端而言，前端的一个拦路虎就是界面写不好，即怎么写都差点意思，比如文字居中，比如文本对齐，比如各种样式的配色等，能写个大概但是怎么都写不好看，以及有一些复杂的交互组件写不出来，所以前端框架如Vue, React等都有很多配套的UI框架，比如Element, Ant Design等, 这些框架如果会用，使用起来还是很爽的，开发要做的只是熟读其API然后将数据填充进去而已。
我只是想开发几个简单的页面而已
前端的开发工具很好，框架也很好，只是有时候没必要而已，如果是使用诸如Vue, React之类的前端框架，我们至少需要其一个项目(这里的项目是指一个git仓库)，那么维护的成本就增加了，并且后面可能还需要分开部署，这样维护的难度就更高了，所以我开始寻找新的解决方案，而我选择的方案其实只是走了以前的老路而已。
CSS框架
因为要抛弃那些UI框架，所以只能自己写组件，这时必然要自己写CSS。
CSS框架最出名的bootstrap, 这个框架自然是很好的，但是对于我而言，感觉写起来不跟手和有限制。
不跟手是指我们需要先浏览一遍它的各个组件样式是什么样的，然后选择一个记住并复制到自己的代码中，这样写起来并不连贯，会打断开发的节奏。
有限制是指它提供了一套不错的规范，比如颜色和尺寸，这些很多时候很棒，但是就是想修改它的尺寸和颜色呢? 当然是可以覆盖的，但是不爽。
所以我最终选择的CSS框架是TailwindCSS, 个人觉得这个框架只有真正写过才能感受到它的魅力，而只是看它的示例代码可能会有很多槽点，比如为啥不直接自己写CSS，这样的CSS代码也太长了吧，这些点我并不想反驳，如果你觉得是这样，那你是对的，使用其他的CSS框架吧。
实时加载
能够使前端开发提升很大效率的一个点，个人认为是实时预览，所以在放弃大而全的前端工具时必须找到一个替代品，这里选择的是 live-server, 通过它就能够很好的实时预览自己的页面效果了。
一个例子
以下是这个这个例子的目录结构。
├── dist
│ └── main.css
├── Dockerfile
├── static
│ └── main.css
├── tailwind.config.js
└── templates
└── index.html
dist目录是最终生成的CSS的静态目录, 这个目录在部署的时候需要跟后端代码放在一起，或者使用反向代理静态代理。
static目录里的main.css文件是CSS的入口文件，可以写自己的CSS代码也可以导入tailwindcss的一些设置。
templates目录就是需要后端渲染的HTML文件了。
配置TailwindCSS
首先是安装Tailwindcss命令行工具，通过这个工具可以实时的生成对应的CSS。
其实为了更简单，可以引入一个全量的TailwindCSS, 也就三四百KB, 对于本地访问还是可以接受的，这样你就不需要安装tailwindcss的相关工具和配置了。
下面的步骤全部来自官方教程: https://tailwindcss.com/docs/installation
安装命令行及初始化
npm install -D tailwindcss
npx tailwindcss init
配置模板路径
module.exports = {
// 根据自己需要配置这个路径, 因为是走后端渲染模板的老路，所以这些写的是templates目录
content: ["./templates/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
增加tailwind指令
这里将创建文件static/main.css，并填充以下内容。
@tailwind base;
@tailwind components;
@tailwind utilities;
开始构建进程
npx tailwindcss -i ./src/input.css -o ./dist/main.css --watch
在模板中使用
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/main.css" rel="stylesheet">
</head>
<body>
Hello world!
</body>
</html>
这里的/dist/main.css就是上一步设置的-o参数。
配置编辑器
为了在写tailwindcss的时候有提示，需要安装一个额外的插件, VS Code编辑器里的插件名叫做: Tailwind CSS IntelliSense
配置开发服务器
开发服务器主要用于预览自己所写的CSS效果, 使用以下命令安装
npm install -g live-server
启动
最后在项目的根目录启动即可。
live-server
小结
当我们编辑templates目录下的HTML和JS文件的时候, tailwindcss会试试生成最终CSS文件需要引入的样式，而live-server会在浏览器实时更新所做的修改。
总结
前端很好，但是个人认为，对于不需要前后端分离的项目不友好，徒增的复杂性，所以我选择了以前的老路，直接后端渲染前端页面。
参考链接
- https://tailwindcss.com/docs/installation
- https://www.npmjs.com/package/live-server
原文链接: https://youerning.top/post/diss-frontend-framework/
标签：受够了,框架,前端,复杂性,css,tailwindcss,CSS,页面 From： https://blog.51cto.com/youerning/8570107