优化与兼容性

优化

减少 CSS 文件体积

移除冗余代码

• 使用工具（如 PurgeCSS）分析未使用的 CSS 规则，并删除。

压缩 CSS

• 使用工具（如 CSSNano 或 UglifyCSS）去除多余空格、注释等。
• 示例：style.css → style.min.css。

合并 CSS

• 将多个 CSS 文件合并为一个文件，减少 HTTP 请求。

使用高效的选择器

避免低效选择器

• 低效：div > p > span.class（选择器过长）。
• 高效：直接使用类或 ID 选择器：.class、#id。

避免通配符选择器（*），尽量减少全局影响。

使用 CSS 变量

定义全局变量

• 在 root 中定义变量：--primary-color: #3498db;
• 使用变量color:var(--primary-color);
• 减少重复代码，便于全局样式管理。

:root {
    --main-bg-color: #f4f4f4;
    --main-font-size: 16px;
}

body {
    background: var(--main-bg-color);
    font-size: var(--main-font-size);
}

减少重绘和重排

合并样式更改

• 避免频繁操作 DOM 的样式，比如循环中多次修改同一元素的样式。

使用 transform 和 opacity

• 避免直接修改 top、left 等布局属性。

延迟加载和按需加载

延迟加载 CSS

• 对非关键 CSS 使用 media 属性延迟加载。

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all';">

按需加载 CSS

• 使用 JavaScript 动态加载 CSS 文件。

function loadCSS(href) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = href;
    document.getElementsByTagName("head")[0].appendChild(link);
}

// Example usage:
loadCSS("styles.css");

兼容性

浏览器兼容性检查

使用浏览器兼容性检查工具

• 使用浏览器兼容性检查工具（如 Can I Use）检查 CSS 兼容性。

使用 Polyfill

• 使用 Polyfill（如 CSS Polyfill）解决 CSS 兼容性问题。

使用浏览器前缀

• 使用浏览器前缀（如 -webkit-、-moz-、-ms-、-o-）解决 CSS 兼容性问题。

.example {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

使用 Autoprefixer

• 使用 Autoprefixer（自动添加浏览器前缀）解决 CSS 兼容性问题。

npm install autoprefixer --save-dev