Preguntas frecuentes

• Porque no tienes que estudiar nada. Es como CSS en lugar de clases acortadas con nombres aleatorios. Un ejemplo: auto-cols-auto es una clase de Tailwind. La clase no es autoexplicativa y un desarrollador que no use Tailwind a diario tiene que ir a los documentos o a las herramientas de desarrollo para ver lo que hace. En Stylify se escribe grid-auto-columns:auto. Todo el mundo con un poco de conocimiento de CSS sabe lo que hace.
• Otra razón es la mantenibilidad. Qué pasa si los navegadores vienen con una propiedad, Tailwind ya acortado? Un ejemplo shrink => flex-shrink: 1; (clase de Tailwind). ¿Qué pasa si los navegadores vienen con, por ejemplo, un nuevo `shrink: auto`. Entonces tendrán que averiguar un nuevo nombre para el nuevo selector para que tenga sentido. Lo que puede ser confuso.
• Cuando usas BEM puedes terminar con class="page-section__container page-section__container--full-size page-section__container--without-background". No puedo ver cómo los selectores property:value son peores que esto.

En caso de que no te gusten los selectores tipo CSS, puedes definir macros personalizadas como ml-2 (margin-left) o py-3 (vertical padding) si te gusta más.

• Por ejemplo un selector como color:rojo se genera como .color:rojo{color:rojo}. Este selector puede reutilizarse.
• Los estilos en línea no responden. No se puede añadir un @media query. Esto significa que no puedes tener font-size 12px para móvil y luego cambiarlo para escritorio. Además, es más fácil alternar clases que un valor de atributo de estilo.
• Cuando añades un componente en Stylify como .button que necesita texto rojo, se genera así .color:red,.button{color:red}. El selector simplemente se adjunta, se reutiliza y el property:value no se genera de nuevo => Esto significa paquetes más pequeños.
• En producción, también puedes minificar estos selectores a => .a,.b {color:rojo}. Esto lo hacen incluso Medium.com y Facebook.
• ¿Pero la minificación hará que los bloques sean más difíciles de encontrar al depurar debido a las clases ilegibles? No. Puedes usar la clase vacía como atributos selector, data o id. Además, en Javascript, normalmente minificamos las clases y selectores de const myValue a const abc y a nadie le importa.

• Los selectores se generan dinámicamente => no tienes que acordarte de eliminarlos al quitar CSS y viceversa.
• Los selectores se combinan y reutilizan => .color:red,.button{color:red}.
• Los selectores se minifican de largos text-align:left a cortos a.
• Abres un archivo de plantilla y un navegador y simplemente escribes los selectores. No tienes que cambiar entre HTML y CSS para eliminar, renombrar y combinar clases manualmente.
• El tamaño de CSS no crece exponencialmente, porque hay un mínimo de CSS property:value duplicado. Hay algún artículo sobre el tamaño CSS de Facebook.
• Cuando los ingenieros de frontend y backend trabajan en una tarea, es fácil para el ingeniero de frontend decirle al ingeniero de backend qué clases añadir cuando sólo necesita sangrar o alinear algo. No tiene que editar CSS y esperar que funcione. Simplemente copia los selectores.
• CSS generado dinámicamente significa menos archivos en los proyectos => menos cambios => normalmente generamos cache, entities, migrations, js bundles y etc. Así que Stylify genera CSS dinámicamente. Al menos desde mi punto de vista, es más cómodo y eficiente que escribirlo manualmente y pensar en cómo pre-generar utilidades o combinar archivos CSS manualmente.

• En Stylify, puedes configurar variables y usarlas en cualquier lugar
• Depende del desarrollador si va a tener valores hardcodeados en el código o no.

• Puedes definir componentes. Así no tiene que haber ninguna utilidad en la plantilla.
• También existe la posibilidad de estilizar selectores personalizados. De esta forma puedes eliminar un montón de utilidades repetitivas.
• Por experiencia, puedes hinchar tus plantillas con un montón de otras cosas => condiciones, atributos, atributos dinámicos, plantillas cargadas dinámicamente, etc. Culpar a los selectores CSS es simplemente extraño.

• No. Stylify genera todo bajo demanda.
• Si escribes color:blue, se generará .color:blue {}. Si lo eliminas, no se generará.
• Los componentes funcionan de la misma manera.
• Sólo los selectores personalizados se generan inmediatamente porque no se puede detectar si están definidos o no.

• Este carácter es el más "visualmente similar" al espacio.
• Stylify no puede usar espacios en los selectores ya que están más optimizados. Emparejar selectores con espacio sería innecesariamente difícil y podría causar muchos bugs y casos de borde que serían difíciles de resolver.
• El carácter guión - tampoco se puede utilizar como en CSS, hay valores negativos como calc(100% - 24px), funciones como cubic-bezier o propiedades para animación ease-in-auto.
  También para mantener las cosas simples y unidas, el carácter debe ser compatible con selectores personalizados como [&_a]{color:rojo} donde se puede definir el atributo de datos.

• Las clases son una forma nativa para que los desarrolladores usen selectores reutilizables.
• El atributo de clase tiene una API nativa js para añadir, eliminar, alternar.
• Atributos como x-style no son atributos válidos. La única forma posible aquí sería usando el atributo data-*
• Stylify no usa espacio para el selector porque necesita que el selector esté completo para una optimización posterior como encadenar un botón a padding:4px_8px y manipular .padding:4px_8px => .a

• Stylify CSS no es un framework CSS. Es una librería que genera CSS para tu proyecto web dinámicamente basándose en lo que escribes.
• Stylify CSS utiliza una sintaxis similar a CSS y no tiene paletas de colores preestablecidas, tamaños, atajos aleatorios, etc.
• Se centra en la codificación rápida y sin problemas sin tener que aprender las características del framework CSS y atajos aleatorios. Esa es una de las razones, por qué la sintaxis es similar a la CSS.