Nombres estructurales
Describen la función espacial o compositiva del elemento.
.container.grid.stack.section
Naming Conventions
Naming conventions define cómo se nombran las clases del framework para mantener claridad, previsibilidad y escalabilidad en todo el sistema.
Qué resuelve esta convención
Una nomenclatura consistente permite entender de inmediato qué hace una clase, a qué módulo pertenece y cómo debe escalar dentro del sistema.
El objetivo no es crear nombres sofisticados, sino nombres claros, previsibles, repetibles y fáciles de documentar.
Tipos de nombres en el sistema
Nombres semánticos
Describen la intención tipográfica o de rol del elemento.
.title.subtitle.meta
Nombres utilitarios
Describen una acción puntual y concreta sobre el elemento.
.mt-4.justify-center.fnt-uppercase.rounded-lg
Reglas generales de nomenclatura
- El nombre debe expresar claramente la función de la clase.
- No debe depender del contexto visual de un proyecto específico.
- Debe ser corto, comprensible y consistente con el resto del sistema.
- Debe seguir la lógica del módulo al que pertenece.
- Si una clase requiere demasiada explicación, probablemente está mal nombrada.
Patrones de naming del framework
Sufijos por escala
-xs-sm-md-lg-xl
Prefijos por eje
m-mx-my-mt-,mb-px-,py-
Acción concreta
.hide.show.wrap.nowrap.centered
Relaciones compuestas
.cols-2-1.cols-1-2.cols-2-1-1
Prefijos responsive
El sistema usa prefijos de breakpoint para extender el comportamiento de una clase a partir de cierto viewport.
.sm:...
.md:...
.lg:...
.xl:...
.xxl:...
En HTML, la clase se escribe normalmente. En CSS, el carácter
: se escapa como \:.
<div class="grid cols-1 md:cols-2 lg:cols-3">
...
</div>
@media (min-width: 768px) {
.md\:cols-2 { --cols: 2; }
}Qué evitar al nombrar
Nombres ambiguos
No uses nombres como .box, .item o .thing.
Naming visual de proyecto
No uses nombres como .hero-card-blue dentro del framework.
Duplicar significados
No crees varias clases distintas para resolver exactamente la misma acción.
Sobreespecificar
No nombres una clase por un solo caso de uso si no es parte del sistema.
Características de un buen nombre
- Es breve pero claro.
- Describe una función y no una anécdota visual.
- Se entiende aunque se lea fuera de contexto.
- Puede convivir con el resto de la arquitectura sin contradicciones.
- Se documenta fácilmente y se reutiliza sin fricción.
Cómo decidir un nombre nuevo
Preguntas útiles
- ¿Describe una función o solo un caso visual?
- ¿Pertenece a un módulo ya existente?
- ¿Será reutilizable más allá de una sola pantalla?
- ¿Está alineado con la nomenclatura actual del sistema?
Criterio final
Si el nombre es claro, reusable, alineado con la arquitectura y describe una función real del sistema, probablemente pertenece al framework.
Siguiente paso
Continúa con changelog para documentar la evolución del framework.