Apuntes DAM
Intermedio
Unas 24 horasProyecto 3 de 4

Sistema de diseño con Sass y BEM

Crea el sistema de diseño de una empresa: tokens (color, tipografía, espaciado), componentes (botón, tarjeta, formulario, navegación, modal, alerta) con variantes y estados, tema oscuro y una página de documentación que los muestra.

SassBEMVariables CSSStylelint
Estilos Homogéneos: Variables, Sass y BEMAccesibilidad Web
Tu avance0/12 · 0 %

Objetivos de aprendizaje

  • •Organizar estilos con Sass (módulos, mapas, mixins)
  • •Nombrar componentes con BEM
  • •Diseñar componentes accesibles con todos sus estados

Requisitos mínimos

Fases sugeridas

  1. 1

    Tokens

  2. 2

    Componentes

  3. 3

    Temas y accesibilidad

  4. 4

    Documentación

Qué entregar

  • Repositorio
  • Página de documentación publicada

Para ir más allá

  • Publicar como paquete npm
  • Componentes como Web Components

Rúbrica de evaluación

CriterioPesoPara la máxima nota
Arquitectura Sass25 %Modular y sin duplicación
Componentes30 %Completos, con estados y variantes
Accesibilidad y temas25 %AA en ambos temas
Documentación20 %Clara y útil para otros desarrolladores

Úsala para autoevaluarte antes de entregar. Tu profesorado puede usar otros criterios.

Consejos y errores típicos

  • Un componente sin estado de foco visible no es accesible por teclado.