⚡️ 小编实测：把下面这些玩意儿塞进项目里代码量立马瘦身，维护成本也跟着掉了好几层楼。

hen多团队在配色、间距上硬写死值，结果改一个主题要翻遍所有文件。自定义属性让你只在根节点声明一次然后随处引用——颜色、动画时长、圆角半径全douKe以统一管理。

/* 声明 */
:root{
    --primary:#3498db;
    --gap:1.6rem;
    --radius:.4rem;
}
/* 使用 */
.btn{
    background:var;
    padding:var;
    border-radius:var;
}

改主色只需要改一行，其他地方自动同步。

过去我们靠!important或者繁琐的选择器来抢占优先级，如今Ke以把样式划分成层次让浏览器自行决定覆盖顺序。

@layer reset{
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
}
@layer components{
    .card{border:.1rem solid #ddd;border-radius:.5rem}
}
@layer utilities{
    .text-center{text-align:center}
}

层级明确后不用再为某条规则加上一堆奇怪的选择器。

传统的媒体查询往往要写十几行才Neng让文字在不同宽度下保持合适大小。clamp把Zui小值、首选值和Zui大值压进一行表达式，一键搞定。

html{
    font-size:clamp;
}

页面会自动随视口变化而伸缩，省去大量 @media。

以前我们常用 ::after + padding‑bottom 来制造固定比例容器，现在直接写：

.video{
    width:100%;
    aspect-ratio:16 / 9;
    background:#000;
}

一句话解决横向/竖向视频的占位问题。

响应式布局从宽度转向“容器”。当组件被放进不同宽度的父容器时它内部的排版会自动适配，而不必再写全局媒体查询。

@container {
   .card{grid-template-columns:repeat}
}
@container {
   .card{grid-template-columns:1fr}
}

这样即使卡片被嵌套在侧边栏或弹窗中，也Neng自如切换布局。

想Zuo轮播图却不想引入 JS？滚动捕捉让原生滚动在滑到关键点时自动对齐，手感丝滑又省事。

/* 容器 */
.gallery{
   overflow-x:auto;
   scroll-snap-type:x mandatory;
   display:flex;
}
/* 项目 */
.gallery img{
   flex:none;
   width:90%;
   scroll-snap-align:center;
   margin-right:.5rem;
}

配合 -webkit-overflow-scrolling:touch, 移动端体验geng佳。

A：当弹窗内部滚动到底部，还继续滑动时页面会跟着一起滚，这叫“滚动穿透”。使用下面两条属性即可彻底阻止：

/* 标准写法 */
.modal{
   overscroll-behavior:auto contain; /* 横向纵向均阻止 */
}
/* 老 IE/Edge 写法 */
.modal{-ms-scroll-chaining:contain;}

CSS 一行搞定原本要写 JS 判断的逻辑，真的爽到飞起！🌈

"左/右/上/下" 在 RTL语言环境里会出错。逻辑属性用 “inline/start/end” 替代硬编码方向，让布局一次写好兼容所有语言。

/* 替代 margin-left / margin-right */
.box{
   margin-inline-start:.8rem; /* 左侧或右侧取决于文档方向 */
   padding-block-end:.5rem;  /* 底部或顶部同理 */
}

:is 把多个选择器压缩成一个，提高可读性且不会增加特异性；而 :where 则完全不提升特异性，是编写工具类的绝佳伴侣。

/* 用 :is 合并按钮状态 */
button:is{background:#27ae60}
/* 用 :where 写低权重实用类 */
:is{margin:0;padding:0}      /* 推荐 */ 
/* 或者 */
.where{text-align:center} /* 不提升特异性 */ 

SASS/LESS 那套暗黑模式变量太麻烦了只要浏览器告诉我们用户倾向暗色，就Neng直接切换滤镜或颜色变量：

@media {
   body{filter:saturate invert hue-rotate}
}

# 小技巧：配合 :root, 手动切换也毫无压力。

Ru果项目里Yi经有图片资源，又不想为每张暗色版重新导出，可借助 CSS filter 快速逆转颜色：

img.dark-mode{
   filter:invert hue-rotate;
}

Liu海屏、iPhone X 系列dou有底部凹槽，用 env 函数把系统提供的安全距离注入进去，让内容永远不会被遮挡：

body{
   padding-bottom:env;
   padding-left :env;
   padding-right:env;
}

The gap property used to be grid‑only；现在所有现代浏览器dou支持它在 Flex 布局里的表现。摆脱了给每个子元素单独设 margin 的尴尬场景。

/* Flex 示例 */
.nav{
   display:flex;
   gap:.8rem;            /* 自动在子项之间插入间距 */
}
/* Grid 示例，同理*/
.grid{
   display:grid;
   grid-template-columns repeat);
   gap:1rem;
}

想让多行文字超出指定行数后出现省略号，以前得借助 JS 或者复杂的伪元素，现在只要两行代码：

.ellipsis{
   display:-webkit-box;
   -webkit-box-orientvertical;
   -webkit-line-clamp:3;      /* 显示三行后截断 */
   overflow:hidden;
}