Configuración y convención en CSS

Written on: 2021-03-07. Last updated on: 2021-03-07.

Hace unos días @phonnz me pregunto que seria mejor: tomarte el tiempo para aprender CSS al nivel que puedes configurar o crear tu mini sistema de diseño y personalizacion que te dan frameworks como Tailwind o aprenderse las minimas convenciones que tiene este u otro framework para poder utilizarlo de forma productiva.

Y entonces pense que era buena idea para hacer un post.

Lenguaje sin convenciones

CSS es un lenguaje de programación que nacio en una epoca que la cantidad de elementos HTML existentes era muy pequeña, el principal uso de sitios web era para compartir información academica y los estilos de cada sitio web se configuraban desde las opciones que el navegador permitia. Y es precisamente por esta ultima razón que las personas comenzaron a crear soluciones para poder mejorar la presentación de los documentos que estaban creando ya no solo para fines academicos o recreativos sino comerciales.

Dentro de todas esas soluciones presentadas entre el 94 y 95, CSS fue la ganadora.

En un principio las paginas web no tenian el uso que se les da ahora como interfaces graficas de usuario para variedad de fines comerciales, recreativos e industriales, por lo que tampoco habia convenciones de como crear el mejor código HTML/CSS y sobre todo como nombrarlo.

En un principio todo era un collage donde cada persona aprendía de otra a traves del código fuente y probando y errando fue como se hicieron grandes avances.

Todo esto fue un proceso de creatividad y aprendizaje entre los primeros programadores web que iban probando las nuevas caracteristicas que los programadores implementaban para los navegadores segun los estandares que publicaba la W3C.

Convención y Configuración

Uno de los debates mas fuertes que tenemos actualmente en el mundo de la programación es ¿que es mejor, una herramienta o lenguaje que te permita configura con mas opciones o una que te de una convención de como deben hacerse las cosas?

La respuesta es depende, porque hay muchos factores a considerar y es una pregunta muy general. Si la hacemos en el contexto de CSS, creo que la pregunta sigue siendo muy general porque dependera de tu background profesional, si eres web developer ya sea frontend con enfoque en javascript o backend, o si no eres web developer y no tienes conocimientos del tema ya sea por que tu formación es en otra area de la computación o porque eres una persona que apenas esta empezando en las mismas.

Y luego estan otros factores a considerar como el tiempo disponible de desarrollo, el dominio de CSS de las otras personas involucradas en el frontend si trabajas en equipo, el target de navegadores que deseas cubrir, el estado del proyecto si es nuevo o legacy y otras muchas mas preguntas que pueden ser muy minuciosas.

A pesar de estos detalles creo que se pueden contestar dos preguntas generales que pueden servir de pauta para las demas.

¿Eres desarrollador web y el proyecto que vas a construir dispones del tiempo y recursos ademas de que tienes un diseño muy personalizado? Ve sobre la configuración.

¿Apenas estas iniciando en desarrollo web y tu principal area es el backend y no tienes el tiempo y los recursos ademas de que el diseño es algo generico? Ve sobre la convención.

Actualidad

Hoy en dia tenemos cientos de frameworks CSS que nos ahorran el tiempo de estar configurando nuestros estilos y nos dan una convención de como construir sitios y aplicaciones web.

Puedes armar un proyecto de forma rapida utilizando estas convenciones muchas veces sin saber o entender CSS a un nivel avanzado. Puedes aprender CSS así también, como se hacia en el pasado.

Creo que ambas opciones tienen una parte importante a considerar y es el dominio y experiencia que necesitas sobre interfaces web para poder construir lo que te propones ya sea con una configuración propia o con una convención.

Un detalle interesante a considerar es que Tailwind dista mucho de la mayoria de frameworks CSS al utilizar una arquitectura atomica de una regla CSS, una propiedad, y quizas este enfoque minimalista es lo que atraiga a ciertos programadores.

En resumén

Si eres nuevo en CSS quizas te convenga comenzar utilizando algun framework o herramienta como Tailwind, Bootstrap o Bulma, pues te enseñara convenciones, buenas practicas y te ahorrara un poco de tiempo. Si te gusta podrás moverte a crear tus propios sistemas de diseño y hacer tu CSS siguiendo la configuración que mas se adapte a tus necesidades.