用途：Shared First 是一套 CSS 编写与审查方法论，旨在消除断点之间的层叠溢出（cascade bleed），让每个断点的样式自成一体、可独立修改。适用于涉及媒体查询、响应式布局的 CSS 编写或评审场景，同样适用于 @container 查询。
核心规则：一、仅当样式在所有视口下完全一致时才写在媒体查询之外，任何会在某断点变化的属性都不属于顶层。二、为视口专属样式使用有界媒体查询，采用 Media Queries Level 4 范围语法与比较运算符，如 @media (width < 40em)、@media (40em <= width < 60em)，以及最大层级的开放上界 @media (width >= 60em)；< 为排他性，边界不会重叠。三、重复而非继承，每个断点专属值显式写在自己的媒体查询中，不依赖较小断点的层叠继承，冗余是刻意的维护特性。
对比 Mobile First：后者的两大问题是易出错（未在媒体查询中或开放式 min-width 查询内的样式会向上影响更大视口，忘记撤销会引入回归）和难以排查（DevTools 显示大量被划掉的覆盖属性）。Shared First 无覆盖、无划除属性，各断点自包含。
重构步骤：一、审计共享属性，找出所有断点取值相同的属性作为顶层声明候选；二、映射各断点独有值，每个值放入自己的有界媒体查询；三、将开放式的 @media (width >= X)（最大断点除外）转换为有界范围查询；四、移除仅为撤销前一值的依赖层叠的覆盖声明，改为删除原声明。
容器查询：仅当容器级样式在所有容器尺寸下都适用时才写在 @container 之外，否则使用有界尺寸条件，如 @container (width < 30em) 与 @container (width >= 30em)。
兼容性与限制：范围语法为 Baseline 2023，支持 Chrome 113+、Firefox 63+、Safari 16.4+ 等现代浏览器。该方法论不涉及安装命令、收费或平台信息，资料中暂未提供。