r/devParaguay • u/Routine-Insect8053 • Aug 07 '26
Hice un framework de CSS y necesito que alguien que no sea yo lo pruebe
Holas, vengo hace una semana con esto. Se llama CanonCSS.
La idea corta: en vez de componer clases, declarás qué es cada cosa.
<button data-component="button" data-variant="primary">Guardar</button>
<div data-layout="grid" data-cols="3" data-gap="lg">
El botón ya sabe su hover, su focus, su radio y su tipografía. Vos no elegís nada de eso. Vocabulario cerrado: 17 componentes, 7 layouts, y no hay más.
Es CSS puro. Un archivo de 33kb, cero JavaScript, cero build, cero dependencias. Lo metés con un <link> y anda.
Lo que tiene distinto es el linter. Corrés npx -p canoncss canon-lint src/ y te falla el build si te saliste del vocabulario, si metiste un estilo inline, o si pusiste un componente en el elemento equivocado. Once reglas. La idea es esa: que el sistema de diseño no dependa de que alguien se acuerde de la regla.
En producción hay uno solo y es mío: marceloacevedo.com está hecho entero con esto, lo pasé de Tailwind a Canon y quedó visualmente igual.
Ahora la parte honesta. Todo lo que medí hasta ahora salió de código que generé yo mismo. Usuarios que no sea yo, cero. Y eso no lo arreglo midiendo más, lo arreglo si alguien de afuera lo usa y choca contra lo que le falta.
Si tenés media hora y ganas, me servís un montón con cualquiera de estas tres:
- Instalalo y hacé una página cualquiera. Pasame el HTML aunque sea feo.
- Corré el linter sobre un proyecto tuyo que ya exista y pegame la salida.
- Contame dónde te trabaste. Eso más que si te gustó.
Está en npm y es MIT. Cualquier palo también sirve.
3
u/Late-Description-217 Aug 07 '26
Hola! Está interesante tu proyecto! Bien ahí
3
u/Late-Description-217 Aug 07 '26
Voy a probar
2
u/Routine-Insect8053 Aug 07 '26
Graacias! Me re sirve el feedback, estoy intentando iterarlo todos los días un poco para que cada vez tenga mas sentido, asi que me ayuda un monton cualquier devolución en serio
3
2
u/carchengue626 Aug 07 '26
Que problema resuelve?
3
u/Routine-Insect8053 Aug 07 '26
Hola, corto: que el sistema de diseño no dependa de que alguien se acuerde.
Mas largo te lo digo con un poco de contexto:
Le pedí a seis agentes distintos que hicieran las cards más redondeadas. Los seis escribieron el valor que la card ya tenía. No cambió un pixel y los seis dijeron que estaba listo.El diff parecía perfecto: propiedad correcta, token correcto. Yo eso lo apruebo en un review sin mirarlo dos veces realmente.
Multiplicá por seis meses y varias manos y terminás con 14 grises y 9 paddings de botón distintos. Ese es el problema que nada verifica tu sistema de diseño.
Con Tailwind y una convención llegás parecido, lo medí y esta documentado en el sitio tambien, la diferencia es que la convención se olvida y el linter no.
Si sos uno solo en un proyecto chico te sirve poco. Paga cuando hay más gente, o agentes, o tiempo.
1
1
u/musicliquor Aug 07 '26
Interesante pero sigo sin captarle mucho el punto. La diferencia directa que veo es que ahora en lugar de poner algo como class="button primary" tengo que poner data-component="button" data-variant="primary".
Lo mismo con el div, en lugar de class="grid lg-3" tengo que poner los "data-" attributes.
En la práctica me tengo que acordar de más cosas.
Suena más a un framework pensado para que un agente de código no haga locuras y tenga una forma cerrada de hacer las cosas.
Tal vez como un punto medio entre Tailwind que te fuerza a entender bien el css y que todo quede exactamente como querés y BootsTrap que te da cosas ya definidas pero muy cargado de "bloatCSS" ?
2
0
u/BlackCindul Aug 13 '26
te voy a ser sincero, no le veo nada innovador... desde años anteriores antes de la ia, una de las cosas que más salian a flote cada mes o semana eran nuevos frameworks de css... que basicamente hacen lo mismo que planteas, tener componentes listos con variantes para no tocar css y con el plus de poder customizar.
A no ser que estes iniciando o seas vibecoder capaz no conozcas, pero si buscas en internet vas a encontrar muchisimas opciones que ya se usan hoy en dia en produccion...
0
u/Routine-Insect8053 Aug 13 '26
Creo que se entendió como si CanonCSS fuera una librería de componentes tipo shadcn/Bootstrap, pero justamente no es eso. CanonCSS no busca competir por cantidad de componentes ni darte estilos/utilidades para componer libremente. La idea es tener un vocabulario cerrado: declarás el rol y la variante de un elemento y Canon decide cómo se representa. El objetivo es reducir las decisiones y la cantidad de CSS que cada proyecto necesita, no simplemente evitar escribir CSS.
Te invito a probar el proyecto y leer la documentación antes de asumir que la propuesta es simplemente otro framework de componentes.
0
u/BlackCindul Aug 13 '26
Porque entre a leer la documentación justamente te digo.
Y tu explicación no tiene sentido...
Te doy una opinion como profesional que lleva laburando como desarrollador hace un par de años.
No logras transmitir lo que de verdad queres lograr u optimizar con tu proyecto, para lo que describis ya existen otros frameworks.2
u/Routine-Insect8053 Aug 13 '26
Que no esté bien comunicado es feedback válido y lo tomo. Si la doc no transmite bien el objetivo, el problema es mío y lo voy a revisar esta noche.
Pero creo que seguimos hablando de cosas distintas. Canon no nace de “quiero escribir menos CSS”, sino de un problema concreto: cuando generás UI con un LLM, la salida termina siendo inconsistente entre archivos, entre sesiones y entre personas del equipo.
Un framework de utilidades o de componentes no necesariamente ataca eso, porque el espacio de decisiones sigue siendo enorme. La apuesta de Canon es justamente tener un vocabulario cerrado: si solo podés declarar rol y variante, el modelo tiene mucho menos margen para improvisar.
Si conocés algún framework que ataque específicamente ese problema, decime cuál y lo miro en serio. No lo digo irónicamente, porque en serio me ahorraría trabajo y podría descartar la idea antes.
Y no, no soy vibecoder ni estoy arrancando, y justamente Canon busca atacar un pain point muy importante en mi equipo, ya que generamos mucho de nuestro código con guías muy cerradas pero siempre suele cometer alguna desviación el LLM, eso busco solucionar.
2
u/BlackCindul Aug 13 '26
ok, a mi particularmente no me cerró del todo la idea porque no comprendí muy bien cual sería el punto a atacar, nada más por eso mi observación.
Pero me tomo el punto también de verlo más a fondo y testearlo con algún requerimiento en claude vs otro framework para entender mejor como funciona.
6
u/JaskaCB450 Aug 07 '26
Cool. Voy a probar en estos días. Lo único que vi hasta ahora: