🎨 CSS 核心技术

CSS（Cascading Style Sheets）是控制网页外观的样式语言，掌握现代CSS技术是构建精美网页的关键。

🎯 学习目标

核心能力

选择器精通：掌握各类选择器及其优先级规则
布局系统：Flexbox、Grid、定位、浮动等布局技术
响应式设计：媒体查询、移动优先、自适应布局
动画效果：过渡、关键帧动画、transform变换
预处理器：Sass/Less变量、嵌套、混合、函数

技术深度

CSS架构：BEM、OOCSS、SMACSS命名方法论
性能优化：选择器性能、重绘重排、CSS加载优化
现代特性：CSS变量、Grid、容器查询、层叠层
工程化：PostCSS、CSS Modules、CSS-in-JS

📚 学习路径

第一阶段：CSS基础

选择器与优先级：各类选择器、特异性计算、继承
盒模型与定位：标准盒模型、定位方式、层叠上下文
文本与颜色：字体、文本样式、颜色系统

第二阶段：布局技术

Flexbox布局：弹性盒子模型、主轴交叉轴、对齐方式
Grid布局：网格系统、区域划分、自动布局
响应式设计：媒体查询、断点设计、移动优先

第三阶段：高级特性

动画与过渡：transition、animation、transform
预处理器：Sass/Less语法、模块化、工程化
现代CSS：CSS变量、容器查询、新特性

🎨 技术要点

选择器性能

/* 高效选择器 */
.button { }
#header { }

/* 低效选择器（避免） */
* { }
div div div div { }
[type="text"] { }

布局最佳实践

/* Flexbox - 一维布局 */
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Grid - 二维布局 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

响应式设计

/* 移动优先 */
.element {
    width: 100%;
}

@media (min-width: 768px) {
    .element {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .element {
        width: 33.33%;
    }
}

💡 实践建议

代码规范

使用有意义的类名
保持选择器简洁
遵循命名规范（BEM等）
组织CSS结构（按功能模块）

性能优化

避免过度嵌套选择器
减少使用通配符和属性选择器
合理使用CSS变量
压缩和合并CSS文件

兼容性

使用Autoprefixer自动添加前缀
渐进增强而非优雅降级
测试主流浏览器
使用Can I Use查询兼容性

🔧 常用工具

预处理器

Sass/SCSS：变量、嵌套、混合、继承
Less：轻量级预处理器
Stylus：简洁语法

PostCSS插件

Autoprefixer：自动添加浏览器前缀
cssnano：压缩优化
postcss-preset-env：使用未来CSS特性

CSS框架

Tailwind CSS：原子化CSS框架
Bootstrap：组件化UI框架
Bulma：纯CSS框架