Preguntas frecuentes

A continuación encontrarás preguntas frecuentes sobre Stylify CSS y su ecosistema.

¿Por qué usar selectores tipo CSS property:value en lugar de atajos?
  • 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.

¿Cuál es la diferencia contra el atributo style=""?
  • 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.
¿Cuáles son las ventajas sobre CSS puro?
  • 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.
¿Necesito usar valores codificado?
  • 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.
Stylify y CSS con utilidades provoca plantillas hinchadas y peor mantenibilidad.
  • 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.
¿Los selectores son pre-generados?
  • 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.
¿Por qué se utiliza el guión bajo _ en lugar del espacio?
  • 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.
Si la sintaxis es similar a CSS, ¿por qué no usar algún atributo como x-style?
  • 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
¿Es Stylify CSS un framework CSS?
  • 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.

¿Te interesa? Anímate y prueba Stylify CSS!

Empieza