SuperAPI AI 工具集

css-conventions

前端与建站

查看项目

更新于 10-16 03:17

技能介绍

用途:为编写和审查 CSS、SCSS、CSS Modules、设计令牌及响应式布局提供统一约定,要求先遵循目标仓库的浏览器基线、样式系统、重置、令牌和邻近既有模式。

主要能力与要点: 浏览器支持:选择 CSS 特性、前缀、polyfill 或回退前,先检查 .browserslistrc、package.json 的 browserslist 字段及相关构建配置;以仓库声明的浏览器目标为兼容边界,不为边界外旧浏览器添加变通,也不在边界内使用缺少必要回退的特性。 既有样式与令牌:不要因默认显示而选语义元素,段落用 <p>、行内文本用 <span>、通用块容器用 <div>;添加局部重置前先检查全局重置与基础样式,不重复已应用的 margin、padding 或 list-style 重置;复用既有语义设计令牌,并确认每个引用的自定义属性已声明,不为每个字面值发明令牌或新尺寸。 内在尺寸:仅在确有内在溢出、Grid/Flex 收缩、原生控件溢出或 0fr 折叠展开时,才添加 min-inline-size: 0 或 min-block-size: 0,并在声明处用简短 CSS 注释说明非显而易见的内在尺寸约束。 CSS Modules 与选择器归属:元素的结构类保持模块局部;用状态类或属性表达瞬态状态,而非堆叠模块局部状态类;优先使用局部类选择器而非宽泛的嵌套元素选择器;将祖先状态选择器嵌套在其所样式化的类下,如 .title { .card:hover & { ... } },而非 .card:hover .title。 作用域自定义属性:仅当多个相关选择器共享一个必须一起变化的非平凡值时,才创建语义自定义属性;在最窄的共享作用域定义,并在可用时从既有令牌派生原始值;不为一次性值或偶然重复创建自定义属性。示例:.menu { --entry-padding: 0 var(--spacing-16); } .item { padding: var(--entry-padding); } .emptyState { padding: var(--entry-padding); }

限制:资料未提供具体安装命令、平台支持范围、收费方式或效果数据,暂未提供。