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}
uc-
en el nombre de su clase principal.uc-
, por ejemplo, en .uc-card
el nombre del componente es Card..{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
.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}