SuperAPI AI 工具集

frontend-syntax-css-nesting-logical-properties

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:该技能提供原生 CSS 嵌套与逻辑属性的权威参考,二者共同目标是减少对构建工具的依赖——嵌套用于替代 Sass 等预处理器,逻辑属性用于替代方向感知的 CSS-in-JS。资料称两者均已达到 Baseline Widely Available,生产代码无需 @supports 门控(以资料标注为准)。

主要能力:1)原生嵌套:支持裸嵌套选择器(等价于后代选择器)、伪类与伪元素需写 &(如 &:hover、&::before)、组合符前缀需写 &(如 & > .icon、& + .card),以及规则内嵌套 @media 与 @container。2)逻辑属性:涵盖尺寸(inline-size、block-size、min-inline-size、max-block-size)、内外边距(margin-block、margin-inline、padding-inline-start 等)、定位(inset-block-start、inset-inline-end)、边框(border-block-end、border-inline-start)与圆角(border-start-end-radius)。3):dir(ltr/rtl) 伪类,按元素计算方向匹配,优于 [dir="rtl"] 属性选择器。

使用方式:资料以速查表、决策树与模式示例说明何时需要 &、何时用逻辑属性、writing-mode 何时生效;并给出用原生嵌套重写 Sass 结构、RTL 安全布局、:dir() 方向条件样式、vertical-rl 竖排等模式。原生嵌套不会提升特异性,嵌套仅为语法结构。

限制与硬性规则:原生的 &__ 不支持 Sass 风格字符串拼接,BEM 需写完整类名单独成规则;嵌套中伪类前必须写 &,否则会成为无效的裸后代选择器;同一组件不得混用物理属性与逻辑属性;竖排下 inline-size 实际控制高度,勿当作 width;嵌套层级不超过 3 层。此外不含 Sass/PostCSS 预处理器语法、级联层与 @scope、容器查询机制与框架作用域样式等内容。定价、平台支持等细节资料暂未提供。