CSS 高频实用代码技巧 & 高级优化方案

/* 方案1：伪元素法（万能推荐，无副作用，全局可复用，写一次用一辈子） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix { *zoom: 1; } /* 兼容IE6/7 */
/* 使用：给浮动元素的父容器加 class="clearfix" 即可 */

/* 方案2：overflow 法（极简，适合简单布局） */
.parent { overflow: hidden; }
/* 原理：触发BFC（块级格式化上下文），自动包裹浮动子元素 */

✅ 二、CSS 高级优化技巧（提升开发效率 + 页面性能，必掌握）

✅ 核心 1：巧用 CSS 变量（自定义属性），告别魔法值

✅ 作用

1. 把项目中重复的颜色、间距、圆角、字号等抽成全局变量，一处修改，全局生效；
2. 告别 #333 #666 #999、margin:10px 这类无意义的「魔法值」，代码可读性拉满；
3. 支持动态修改（JS 可操作），适配主题切换、暗黑模式等需求。

✅ 语法 & 最佳实践

/* 1. 定义全局CSS变量（推荐写在 :root 伪类，全局生效，优先级最高） */
:root {
  --color-primary: #1677ff; /* 主色调-蓝色 */
  --color-text: #333333;    /* 主文本色 */
  --color-text-secondary: #666666; /* 次要文本色 */
  --color-bg: #f5f5f5;      /* 背景色 */
  --gap-base: 8px;          /* 基础间距单位 */
  --radius-base: 4px;       /* 基础圆角 */
}

/* 2. 使用变量：var(变量名, 默认值) */
.box {
  background: var(--color-bg);
  margin: var(--gap-base) calc(var(--gap-base) * 2); /* 支持计算 */
  border-radius: var(--radius-base);
  color: var(--color-text);
}

/* 3. 局部变量（优先级高于全局，适合组件内自定义） */
.card {
  --card-color: #fff;
  background: var(--card-color);
}

✅ 核心 2：CSS 选择器优先级优化，减少性能损耗

✅ 优先级公式（从高到低，必记）

✅ 性能优化原则（重中之重）

1. ❌ 禁止使用通配符 *：* { margin:0; padding:0; } 会遍历页面所有元素，性能极差，换成重置指定标签即可；
2. ❌ 避免多层嵌套：比如 div ul li a:hover 这种多层标签嵌套，匹配效率极低；
3. ✅ 推荐写法：类选择器为主，扁平化书写：直接给元素加 class，用 .link:hover 替代 div ul li a:hover；
4. ✅ 慎用 !important：它会打破优先级规则，后期维护困难，能不用就不用，优先用「更精准的选择器」提高优先级。

✅ 优化示例

/* ❌ 糟糕的写法：多层嵌套+标签选择器，性能差，优先级混乱 */
.content .list ul li a { color: #333; }

/* ✅ 优秀的写法：扁平化类选择器，性能高，可读性强 */
.list-link { color: #333; }

✅ 核心 3：CSS 属性简写，精简代码体积

/* ❌ 冗余写法（分开写） */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  padding-top: 5px;
  padding-right: 8px;
  background-color: #fff;
  background-image: url(./bg.png);
  background-repeat: no-repeat;
  border-width: 1px;
  border-style: solid;
  border-color: #e5e5e5;
}

/* ✅ 简写写法（推荐，一行搞定） */
.box {
  margin: 10px 20px; /* 上右下左：顺时针，上下 左右 */
  padding: 5px 8px;
  background: #fff url(./bg.png) no-repeat;
  border: 1px solid #e5e5e5;
}

/* 其他高频简写 */
.box {
  border-radius: 4px 8px; /* 左上右下 右上左下 */
  font: 14px/1.5 "Microsoft Yahei"; /* 字号/行高 字体 */
  transition: all 0.3s ease; /* 过渡属性 时长 缓动函数 */
}

/* ✅ 核心公式：aspect-ratio: 宽/高; （CSS3新属性，兼容性99.9%） */
.img-box {
  width: 100%; /* 宽度自适应父容器 */
  aspect-ratio: 16/9; /* 16:9 宽高比，视频/封面常用 */
  /* aspect-ratio: 1/1; 正方形 */
  /* aspect-ratio: 4/3; 经典图片比例 */
  overflow: hidden;
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片居中裁剪，不变形 */
}

/* ✅ 全局重置表单原生样式（推荐） */
input, button, select, textarea {
  border: none;
  outline: none;
  background: transparent;
  -webkit-appearance: none; /* 去掉IOS原生圆角 */
  appearance: none;
}
button { cursor: pointer; }
textarea { resize: none; } /* 禁止文本域拉伸 */

/* ✅ 去掉移动端点击高亮 */
* { -webkit-tap-highlight-color: transparent; }

.no-select {
  user-select: none;
  -webkit-user-select: none; /* 兼容webkit内核（Chrome/Safari） */
}

/* 方案1：推荐，给图片转块级元素 */
img { display: block; }

/* 方案2：给图片设置垂直对齐方式 */
img { vertical-align: middle; }

/* 方案3：给父容器设置字体大小为0 */
.parent { font-size: 0; }