Definiciones técnicas

A continuación se describe la metodología para definir nombres y estilos en el sistema de diseño UC.

La metodología se basa en las definiciones de arquitectura de Front-end de SMACSS y la metodología de nombres de clases BEM.

Para nombrar componentes:

.uc-{componente}

Para nombrar modificadores únicos:

.{componente}-{modificador}

Para nombrar modificadores con diferentes valores:

.{componente}-{modificador}--{valor}

Para nombrar hijos de componentes:

.uc-{componente}_{hijo}

Para nombrar hijos de componentes con variantes:

.uc-{componente}_{hijo}--{tipo}

• Cada componente debe contener el prefijo uc- en el nombre de su clase principal.
• El nombre del componente es lo que va después del uc-, por ejemplo, en .uc-card el nombre del componente es Card.
• El componente puede tener modificadores que se agregan al mismo nivel que el nombre del componente, y cada modificador se escribe como .{componente}-{modificador}. Si el modificador tiene más de un valor, se debe extender como .{componente}-{modificador}—{valor}, donde {modificador} es el nombre de la propiedad. Ej: .card-type--horizontal
• Cuando un componente tiene elementos que son hijos directos y relacionados al funcionamiento del componente, se deben nombrar bajo la definición .uc-{componente}_{hijo}. Si el componente tiene varios hijos con variantes de la misma jerarquía (hermanos), se deben nombrar usando la siguiente regla: `.uc-{componente}_{hijo}--{tipo}