现代CSS开发环境搭建

第2章: 现代CSS开发环境搭建

🎯 本章重点

• 现代前端工具链配置
• PostCSS和预处理器的使用
• 开发工作流优化

📖 内容概述

2.1 基础开发环境

代码编辑器配置 (VS Code)

// .vscode/settings.json
{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "editor.formatOnSave": true,
  "files.associations": {
    "*.css": "css"
  }
}

推荐扩展

• PostCSS Language Support
• Auto Rename Tag
• CSS Peek
• Live Server

2.2 构建工具配置

package.json 依赖

{
  "devDependencies": {
    "postcss": "^8.4.0",
    "postcss-preset-env": "^7.0.0",
    "autoprefixer": "^10.4.0",
    "cssnano": "^5.0.0",
    "vite": "^3.0.0"
  }
}

2.3 PostCSS 配置

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 3,
      features: {
        'nesting-rules': true,
        'custom-media-queries': true,
        'media-query-ranges': true
      }
    }),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default'
    })
  ]
}

2.4 现代CSS工作流

开发脚本

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "css:watch": "postcss src/**/*.css --dir dist --watch"
  }
}

2.5 浏览器兼容性处理

.browserslistrc

last 2 versions
> 1%
not dead
not ie 11

自动前缀示例

/* 输入 */
.container {
  display: grid;
  gap: 20px;
}

/* 输出 */
.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-gap: 20px;
  gap: 20px;
}

2.6 开发服务器配置

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000,
    open: true
  },
  css: {
    postcss: './postcss.config.js'
  }
})

💡 最佳实践

1. 使用CSS原生特性 替代预处理器
2. 配置PostCSS 处理兼容性和优化
3. 设置浏览器列表 确保目标兼容性
4. 使用开发服务器 获得实时预览

🛠️ 工具推荐

• 构建工具: Vite, Parcel, Webpack
• CSS处理: PostCSS, Lightning CSS
• 开发服务器: Live Server, BrowserSync

🎯 下一章预览

下一章将深入探讨CSS变量和自定义属性的强大功能。

---

最后更新: 2024年12月