modern-css-vanilla
2
总安装量
2
周安装量
#75624
全站排名
安装命令
npx skills add https://github.com/sraloff/gravityboots --skill modern-css-vanilla
Agent 安装分布
opencode
2
gemini-cli
2
claude-code
2
github-copilot
2
codex
2
kimi-cli
2
Skill 文档
Modern CSS Vanilla
When to use this skill
- Writing custom CSS/SCSS (not utilizing Tailwind).
- Refactoring legacy stylesheets.
- Implementing complex layouts.
1. New Selectors
- :has(): The parent selector.
div:has(> img)selects divs containing an image. - :is() / :where(): For grouping selectors.
:where()has 0 specificity (useful for resets).
2. Layouts
- Container Queries:
.card-container { container-type: inline-size; } @container (min-width: 500px) { ... } - Grid: Use
display: gridfor 2D layouts;flexfor 1D.
3. Architecture
- Layers: Use
@layerto control cascade order explicitly (e.g.,@layer reset, base, theme, utilities). - Variables: Use Custom Properties (
--brand-color) for theming.