Estilos del sitio TailwindCSS vs Vanilla CSS

[israteneda]

Hola a todos la página de a poco se va convirtiendo en realidad gracias a todos los contribuidores, nos gustaría saber si se prefiere trabajar con CSS Vanilla o TailwindCSS, ya que actualmente Gatsby está configurado con TailwindCSS pero la mayoría de componentes usan CSS normal.

La pregunta es, si les gustaría usar:

• Vanilla CSS
• TailwindCSS
• Usar tanto CSS puro como TailwindCSS en el proyecto

[rpalaciosg]

Que tal amigos yo creo que como no se especifico eso en cada issue desde el inicio, por el momento me iria por la 3ra opcion

• Usar tanto CSS puro como TailwindCSS en el proyecto

Es verdad hay cosas con tailwind y cosas con css separado en cada componente.

Que tal si por el momento se permite la mezcla de css normal y tailiwindcss. Y para ir mejorando vamos creando issues para refactorizar y pasar el css de cada componente a tailwindcss. Al final el componente va a funcionar igual y tendremos un css estandar y con buenas practicas que todo eso Tailwind ya lo tiene pensado.

En caso de que no encontremos la utilidad de tailwindcss que necesitamos para nuestro componente, podemos agregar utilidades a tailwindcss con el css que necesitamos. Esto se haria en el archivo web/src/css/style.css

[EduardoAyora]

opino lo mismo que @rpalaciosg css puro y tailwind

[cesardlinx]

Hola amigos, concuerdo con Uds en que se puede usar tailwind y vanilla css, sin embargo hay 2 issues principalmente que tailwind crea y que debemos tener en cuenta:

1. Las classes de tailwind interfieren con el markdown como se pudo constatar en el issue La sintaxis de Markdown no se está aplicando #24, al final cree un fix en el PR fix: estilos para listas ordenadas en markdown #25 para las listas ordenadas, sin embargo los espacios siguen sin ser respetados y no sabemos que otros issues tengamos a futuro debido a esto.

2. Con CSS se puede aplicar varios estilos con una sola clase mientras que en ocasiones se necesita varias clases de tailwind para lograr lo mismo, eso implica que el codigo al final luce mucho más limpio en CSS y por lo tanto se vuelve más facil de mantener. Por ejemplo:

   Con TailwindCSS
   <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
   Con CSS
   <span class="label">#winter</span>

Como yo lo veo solo tenemos dos opciones, podemos seguir usando tailwind y vanilla css pero conscientemente de que luego tendremos estos inconvenientes o simplemente migrar los estilos de los componentes que usan tailwind a css puro y luego usar solo css en los futuros componentes de esta manera seriamos consistentes en nuestro codigo y aprovechariamos toda la flexibilidad que CSS nos aporta, pero queda a su criterio.

[rpalaciosg]

Hola @cesardlinx no tenia conocimiento que el issue que se daba en el Markdown de #24 era por tailwindcss, ahora lo entiendo!!
gracias por mencionarlo. No he usado mucho de tailwindcss pero crees que seria bastante el impacto que causaria en los archivos de Markdown o solo en listas? O es viable hacer arreglos como lo hiciste para corregir el problema de las listas enlazadas.

Algo que mencionas en el punto 2 de tener varias clases de tailwind en un elemento de html creo que de la forma en que tu lo usaste al @apply podemos crear componentes de tailwind para que el html no se vea sobrecargado de tantas clases, claro esto implicaria agregar esas lineas demas al archivo tailwind.css

Esto es algo que debemos tomar en cuenta segun las ventajas y desventajas que conocemos a la hora de usar tailwindcss o vanilla css.

Entonces agrego algunas alternativas a las opciones que menciona Cesar :

• Seguimos usando Tailwind y hacemos nosotros los fix de estilos para los componentes principales que se usan en Markdown .
• Seguimos usando Tailwindcss pero usamos algun plugin existente de tailwindcss para dar estilos a Markdown como el de este Repo "pueden existir mas ahora lo desconozco."
• Empezar a usar vanilla css desde ahora y los componentes existentes con tailwind creamos issues para cambiarlos a ccs puro.

[cesardlinx]

Hola @rpalaciosg, bueno el fix que yo di en #25 basicamente es solo un parche y no una solución porque lo que hace es forzar a que la lista ordenada tenga un estilo, y por ejemplo en este caso esta colocando a todas las listas en negrita y con cierto margen, pero y que tal si alguien no quiere una lista en negrita, eso en markdown simplemente se lo manejaria quitando y poniendo ** Ejemplo: 1. **letras en negrita** y 1. letras sin negrita sin embargo aqui eso ya no funcionaria y tocaria dar estilos css siempre en cada caso, agregando más y más parches, quitandole completamente el objetivo a tener markdown. Con lo cual descarto la opcion 1.

La opción 2 suena super interesante casi como para comenzar un nuevo proyecto solo sobre eso, sin embargo actualmente no considero que exista un plugin estable que maneje bien este problema.

Lo cual nos deja la opcion 3 que colocaste:

• Empezar a usar vanilla css desde ahora y los componentes existentes con tailwind creamos issues para cambiarlos a ccs puro.

Me parece una solución simple y elegante en mi opinión, tal vez usar tailwind es un poco overkill en nuestro caso, con tan solo React.js, Gatsby y CSS podmos lograr un sitio super chévere no necesitamos más ya que no hay nada que se pueda lograr con tailwind que no se pueda hacer con CSS. Recuerden además que no estamos atados a dar backward compatibility aún ya que apenas estamos empezando el proyecto y no tenemos aun una primera versión y solo seria migrar los estilos de unos pocos componentes. Estamos en el momento perfecto para tomar esta decisión.

[skcode7]

Voto a favor de CSS Puro, personalmente tailwind no me termina de convencer.

[cesardlinx]

Si vamos a usar CSS propongo comenzar a usar CSS Modules. Con CSS Modules tenemos la ventaja de que los estilos aplicados a un componente no interfieran con otro, lo cual es un caso muy común ya que las clases que uno crea se aplican globalmente. Con CSS Modules en cambio, dos personas pueden crear una clase con el mismo nombre pero con dos estilos diferentes y no habría problemas.

Para lograr esto en vez de por ejemplo nombrar a su archivo de estilos container.css pues lo nombran container.module.css y lo usarian de esta manera:

CSS

.container {
  margin: 3rem auto;
  max-width: 600px;
}

JSX

import React from "react";
import styles from "./container.module.css";

const Container = ({ children }) => (
    <section className={styles.container}>{children}</section>
);

export default Container;

Y eso sería todo! Si desean saber más pueden ir a la documentación: https://www.gatsbyjs.com/docs/css-modules/

[israteneda]

Genial es una buena propuesta creo que si podemos utilizar CSS Modules en el proyecto, algunos mencionaban en el Telegram también utilizar la especificación BEM para el CSS

[cesardlinx]

Definitivamente, estoy muy de acuerdo en que podemos también usar BEM para nombrar nuestras clases en css.

[rpalaciosg]

Estoy deacuerdo con la propuesta de usar css-modules y BEM para el naming de las clases. Parece que Vanilla CSS sera la eleccion, bueno dependiendo de lo que se escoja seria bueno hacer un code review de los PR minimo 3 personas para nombrar clases css o no se si exista algun linter para CSS con los estilos y pautas de BEM, si alguien conoce algo, creo que nos ayudaria tambien.

!Update : Encontre este Repo pero se usa con PostCSS.

[israteneda]

Creo que ya podemos cerrar el issue amigos y abrir una para migrar de TailwindCSS a CSS puro ahí podrías conversar sobre el linter o las revisiones quisa al principio no deberían ser tan exhaustivas para dar cabida a contribuciones de personas nuevas en el lenguaje