CSS Nesting
Anidamiento de CSS
El anidamiento de CSS es una sintaxis incorporada para escribir una regla de estilo dentro de otra. El navegador todavía sigue las reglas de CSS para leer selectores y su peso.
Otro ejemplo
Un botón anida `&:hover`, `&:focus-visible` y `@media (forced-colors: active)` dentro de `.button`. Esto mantiene seis reglas de estado cerca de la regla base. Una revisión rechaza tres niveles de selectores hijos porque atarían el botón a una estructura de página.
Partes principales
- 01Regla de estilo principal
- 02Selector o regla anidada
- 03selector resuelto
Úsalo cuando
Use uno o dos niveles superficiales para estados, versiones y reglas condicionales `at-rule` que pertenezcan al mismo componente.
No lo uses cuando
Evita cadenas profundas de hijos y vínculos ocultos con la estructura exacta del DOM. La anidación nativa no siempre se comporta como un preprocesador CSS.
Nombre usado en código
nested style rules with &, relative selectors, and nested group rules Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Anidamiento de CSS (CSS Nesting). User context: Un botón anida `&:hover`, `&:focus-visible` y `@media (forced-colors: active)` dentro de `.button`. Esto mantiene seis reglas de estado cerca de la regla base. Una revisión rechaza tres niveles de selectores hijos porque atarían el botón a una estructura de página. Design concept to apply: Anidamiento de CSS (CSS Nesting). Why it fits: Use uno o dos niveles superficiales para estados, versiones y reglas condicionales `at-rule` que pertenezcan al mismo componente. Do not use it when: Evita cadenas profundas de hijos y vínculos ocultos con la estructura exacta del DOM. La anidación nativa no siempre se comporta como un preprocesador CSS. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Anidamiento de CSS (CSS Nesting) is used now. Definition: El anidamiento de CSS es una sintaxis incorporada para escribir una regla de estilo dentro de otra. El navegador todavía sigue las reglas de CSS para leer selectores y su peso. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.