CSS y el caos de los Frameworks

Bueno. Abordemos el tema de forma directa. Y es que cada vez que veo el uso del css en mis clientes, poco se diferencia de los antiguos htmls repletos de "style=", sólo que ahora tenemos cadenas interminables de "class=" y, en ocasiones, combinadas con "style=". Eso sí, seguramente tendremos una carga inicial de Bootstrap.

Y es una muy buena ayuda usar frameworks CSS, que te van a simplificar mucho el uso de los grid, estilos de botones y posiciones, ventanas modales, menús... ya sabes. Pero, si vas a abordar un nuevo proyecto, piensa en, aunque te ayudes para ciertos aspectos de los frameworks CSS, crear tu propia plantilla CSS que aborde estilos (colores, boxes, etc) que vas a usar en tu proyecto.

Adicionalmente, es curioso como aún hay quien utiliza poco las etiquetas personalizadas en lugar de llenar todo de divs con clases. El resultado será muy parecido o similar, pero te puede ayudar a entender mejor el diseño de tu web o webapp, además de evitar las "superposiciones" que hacen que digas "¿porqué demonios hace esto?

Sobre este tema de las etiquetas personalizadas, hay gente que piensa que al tener menos compatibilidad que las clases, decide no usarlas. Aunque luego sea curioso que estén integrando en su javascript requerimientos que sólo los últimos navegadores van a soportar.

Veamos un ejemplo, usando como base Bootstrap.

	<!-- Con Bootstrap -->
	<div class="row mt-3">
		<div class="col-4 offset-2 border shadow">
			Hola Mundo con bootstrap
		</div>
	</div>

Ahora veamos que pasa si usamos "custom tags"

	<!-- Con tags -->
	<style>
      tarjeta {
        width: 34%;
        border: 1px solid grey;
        padding: 1em;
        display: block;
        margin-left: 16%;
        background-color: white;
        border-radius: 3px;
        box-shadow: 5px 5px 7px rgba(0,0,0,.2);
        margin-top: 1em;
        text-align: center;
	}
   </style>
    
    
	<tarjeta>
		Hola Mundo Tags
	</tarjeta>

Vaya. Parece que tiene un poco más de lío. Excepto... si esa especificación de "tarjeta" la tenemos en nuestro archivo CSS y, en TODO nuestro código, usamos simplemente nuestro nuevo tag "tarjeta".

Juega con este código en Codilink

Por supuesto, esto también lo puedes hacer usando las clases. Y una práctica muy recomendable es que, para cada elemento, box, card, diseño que quieras usar, uses una clase (o un tag) superior y los elementos internos los uses con etiquetas "estándar".

Por ejemplo...

	<style>
      .claseTarjeta {
        display: block;
        border: 1px solid grey;
        width: 10em;
        padding: 1em;
      }

      .claseTarjeta p {
        display: block;
        color: black;
        padding: 0;
        font-size: .8em;
        line-height: .8em;
      }

      .claseTarjeta p:nth-child(1) {
        border-bottom: 1px solid black;
        color: red;
        font-size: 1em;
        line-height: 2em;
      }

      .claseTarjeta p:nth-child(3) {
        color: green;
      }
   </style>
    
    
	<div class="claseTarjeta">
		<p>Hola! Soy Rojo</p>
		<p>Y yo no</p>
		<p>Y yo verde</p>
	</div>

Juega con este código en Codilink

Aparentemente más código que escribir, pero... por un lado te podrás saltar (un poco) las definiciones del framework que estés usando (si lo usas). Por otro lado, cada vez que cambies tu hoja de estilos, tendrás todo tu sitio actualizado. Y finalmente, tendrás un código con estilos unificados y mucho, mucho, mucho más limpio.

En definitiva. Usa lo que prefieras. Pero... cuanto menos llenes el código que contiene la información con estilos y MILES DE CLASES, te alegrarás cuando tengas que hacer una modificación.

Por cierto, recuerda que para forzar al navegador a usar tu última versión de tu hoja de estilos, simplemente añade un ?v999xxOloQueSea al enlazarla. Con esto forzarás que se carge la última versión.

Adicionalmente, te recomiendo que empieces a usar variables CSS, especialmente para los colores, y así contemplar, el cada vez más usado, modo oscuro o modo claro según la configuración de tu sistema.

Como último tip, recuerda que si algo no está haciendo lo que "debería", quizá el "css" que añade por defecto tu navegador, o esa clase o tag ya la tiene definida el framework, puedes usar "all: unset;" para quitar todo lo que se haya definido sobre ella.

Y aunque entiendo la "pereza" que da hacer los estilos personalizados, creéme. Te alegrarás. Podrás tener templates que te ayuden en otros proyectos. Podrás usar tamaños relativos (muchos frameworks usan tamaños en pixels) y personalizar al máximo todo lo que quieras. Y si además usas en desarrollo (recuerda POR FAVOR, quitar las extensiones no .css del deployer/publicador de producción) metalenguaje como Sass, pues más sencillo todo.