min.css制作
min.css 制作方法
min.css 是一种极简的 CSS 框架，旨在提供轻量级、快速加载的样式解决方案。以下是制作 min.css 的几种方法：
手动编写极简 CSS 创建一个基础样式表，仅包含必要的重置和基本布局样式。例如：
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; line-height: 1.6; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }使用 CSS 压缩工具 通过工具如 cssnano 或 clean-css 对现有 CSS 文件进行压缩和优化：
npm install cssnano -g
cssnano input.css output.min.css利用构建工具自动化 在 webpack 或 gulp 等构建工具中配置 CSS 压缩任务：
// webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new CssMinimizerPlugin()],
},
};提取关键 CSS 使用 critical 等工具提取首屏关键 CSS，其余部分异步加载：
npm install critical --save-dev
critical dist/index.html --base dist --inline > dist/inline.css优化技巧
选择器简化 避免复杂嵌套，使用低特异性的类选择器：
.btn { padding: 0.5em 1em; }
.btn-primary { background: blue; }值缩写 充分利用 CSS 缩写属性：
margin: 10px 20px; /* 替代 margin-top/margin-bottom 等 */移除冗余 删除未使用的样式和重复定义，可通过 PurgeCSS 实现：
// postcss.config.js
module.exports = {
plugins: [
require('@fullhuman/postcss-purgecss')({
content: ['./src//*.html'],
}),
],
};性能考量
文件大小控制 目标应保持在 10KB 以下，使用 Brotli 或 Gzip 进一步压缩
减少 HTTP 请求
将 min.css 内联到 HTML 的 <style> 标签中，适用于小型项目
缓存策略 设置长期缓存头，利用文件哈希实现版本控制：
<link href="styles.a1b2c3.min.css" rel="stylesheet">以上方法可根据项目需求组合使用，平衡功能性与性能表现。
