Optimiza tu código CSS con Stylus: Parte 1

stylus Css

Esta es la primera parte de una serie de artículos, en los que hablaré sobre como optimizar nuestro código CSS a partir del preprocesador Stylus. En esta primera parte tocaré un tema relacionado con css y no tanto con el preprocesador Stylus.

Uso correcto de identificadores y clases

Aprender a utilizar correctamente los identificadores y clases te ayudaran a tener un mejor código CSS. Cuando aprendí a utilizar css solía utilizar de manera indiscriminada los identificadores para la maquetación de los sitios web. Sin embargo, hacer esto provoca que tu código no sea escalable. Veamos un  pequeño ejemplo:

Supongamos que tenemos 3 botones, que comparten unas medidas iguales, y queremos que uno de ellos tenga un color de fondo rojo.

HTML

<button id="primero">Primero</button>
<button id="segundo">Segundo</button>
<button id="tercero">Tercero</button>

CSS

#primero,
#segundo,
#tercero{
width: 200px;
height: 40px;
}

#tercero{
background: red;
}

Por “x” motivo nos piden agregar 3 nuevos botones, donde también existirá un botón verde.

HTML

<button id="primero">Primero</button>
<button id="segundo">Segundo</button>
<button id="tercero">Tercero</button>
<button id="cuarto">cuarto</button>
<button id="quinto">quinto</button>
<button id="sexto">sexto</button>

CSS

#primero,
#segundo,
#tercero,
#cuarto,
#quinto,
#sexto{
width: 200px;
height: 40px;
}

#tercero{
background: red;
}

#sexto{
background: green;
}

Como podemos observar, en nuestro css hemos creado una lista de 6 elementos a los cuales le aplicaremos un ancho y alto. Si se crean más elementos tendríamos una gran lista de estos selectores. Por otro lado hemos asignado a los identificadores #tercero y #sexto un color de fondo rojo y verderespectivamente. Si el día de mañana necesitamos asignarle un color rojo al primer botón, tendríamos que aplicar un nuevo estilo a ese identificador. Estos problemas en un proyecto web grande, claramente no son favorables.

Una forma de tratar este problema sería usando clases.

HTML

<button class="btn">Primero</button>
<button class="btn">Segundo</button>
<button class="btn btn-rojo">Tercero</button>
<button class="btn">cuarto</button>
<button class="btn">quinto</button>
<button class="btn btn-verde">sexto</button>

CSS

.btn{
width: 200px;
height: 40px;
}

.btn-verde{
background: green;
}

.btn-rojo{
background: red;
}

Ahora nuestro css es mucho más sencillo y fácil de escalar. Hemos creado una clase .btn que servirá para establecer un estilo base a todos los botones, por otro lado hemos creado dos clases extras: .btn-verde.btn-rojo. Si el día de mañana deseamos asignarle un fondo verde o rojo a cualquier otro botón bastara con asignarle cualquiera de estas clases, sin necesidad crear una nueva propiedad.

Tip 1: Variables en Stylus

Usar variables en un procesador css es una de las caracteristicas mas interesantes, y en Stylus no son la excepción, siguiendo con nuestro ejemplo anterior podríamos generar el siguiente código:

/* Variables */
bg-verde = green
bg-rojo = red

.btn
width 200px
height 40px

.btn-verde 
background bg-verde

.btn-rojo
background bg-rojo

Si el día de mañana decidimos cambiar alguno de los colores tan solo tenemos que cambiar su valor en la definición de la variable y este automáticamente será remplazado en las propiedades que fue utilizado. En este ejemplo hablamos de botones, pero esta variable puede ser utilizada en cualquier otro elemento de nuestro sitio.

Tip 2: Los wireframes son tus amigos

Ya mencionamos lo importante que es saber utilizar las clases, y como el uso de identificadores puede limitar que tu css sea escalable. Debemos entender que tanto clases como identificadores son importantes a la hora de maquetar. Utilizarlos en un ámbito correcto es lo que debemos de aprender. Los identificadores son muy útiles cuando deseamos asignar algún comportamiento desde Javascript, por otro lado también nos sirven para identificar aquellos elementos únicos de tu sitio web: una sección de publicidad, un sidebar, etcPor otro lado las clases nos servirán para identificar los elementos generales de nuestro sitio, elementos que seguramente estarás reutilizando constantemente en todo el sitio.

Uno de las herramientas que te ayudaran a identificar cuanto utilizar clases o identificadores son los wireframes. Los Wireframes son el esqueleto de tu sitio, si por ejemplo creas la estructura de un blog, podrás darte cuenta de cuales son los elementos generales y cuales son los elementos únicos que tendrá tu sitio, tener este panorama visual te ayudara a saber cuales elementos usaran clases y cuales usaran identificadores.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Responsable: Agustín Ruiz | Finalidad: Solo la de administrar estos comentarios | Legitimación: Tu consentimiento | Destinatario: Bajo ningn concepto comunicaremos tus datos a terceros | Derechos: Acceso, portabilidad, rectificado, supresión, limitación y olvido de tus datos | Plazo de conservación: Hasta que nos solicites que los eliminemos +info.