10 Buenas Prácticas para CSS

ordenador portatil para trabajar las 10 buenas practicas de css

10 Buenas Prácticas para CSS

¿Qué serían 10 buenas practicas para CSS? Se escucha a menudo, más que todo en el mundo de la programación :), que CSS es un lenguaje fácil. Eso depende porque al igual que cualquier otro lenguaje, CSS tiene sus propios matices y funciones más complejas.

En este articulo, veremos 10 practicas que os ayudaran a mejorar vuestros códigos CSS para que sean más eficientes y mantenibles.

1-Agrupar los selectores CSS

Se agrupa selectores cuando comparten estilos. En vez de tener dos, tres o más reglas CSS que hacen lo mismo (establecer el color de algo en azul, por ejemplo), usa una sola regla CSS que logra lo mismo. El secreto de esta táctica para aumentar la eficiencia es la coma.

div, p { color: #0000ff; }

En este contexto, una coma significa «y», por lo que este selector se aplica a todos los elementos de división y a todos los elementos de párrafo. Y podrías agrupar cualquier forma de selector con cualquier otro selector. Como por ejemplo:

p, .blue, #button, div a { color: #0000ff; }

Cualquier selector se puede agrupar

Puedes colocar cualquier selector válido en un grupo, y todos los elementos del documento que coincidan con todos los elementos agrupados tendrán el mismo estilo en función de esa propiedad de estilo.

Algunos diseñadores prefieren enumerar los elementos agrupados en líneas separadas para que el código sea legible.

p,
.blue,
#button,
div a { color: #0000ff; }

Nota que la apariencia en el sitio web y la velocidad de carga siguen siendo las mismas.

¿Por qué agrupar los selectores de CSS?

Aunque las hojas de estilo no son los principales culpables de la carga lenta, agrupar selectores de CSS ayuda a minimizar el tamaño de su hoja de estilo para que se cargue más rápido.

La agrupación de selectores también facilita mucho el mantenimiento del sitio. Si necesita hacer un cambio, simplemente puede editar una sola regla CSS en lugar de varias. Este enfoque ahorra tiempo y molestias.

El resultado final: la agrupación de selectores es una buena practica para CSS porque aumenta la eficiencia, la productividad, la organización y, en algunos casos, incluso la velocidad de carga.

2-Mantener ordenada las declaraciones es una de las buenas practicas para CSS

No hay reglas estrictas por las declaraciones de propiedad pero para una buena organización del código se pueden agrupar siguiendo el orden:

  1. Posicionamiento
  2. Display y Modelo de Caja (Box Model)
  3. Texto / Tipografía
  4. Colores / Visual
  5. Misc (Misceláneos, a decir todas las demás propiedades)
.selector {
     /* Posicionamiento */ 
     position: absolute; 
     z-index: 10; 
     top: 0; 
     right: 0; 

     /* Display & Box Model */
     display: inline-block; 
     overflow: hidden; 
     box-sizing: border-box; 
     width: 100px; 
     height: 100px; 
     padding: 10px; 
     border: 10px solid #333; 
     margin: 10px; 

     /* Tipografía */ 
     font-family: sans-serif; 
     font-size: 16px; 
     line-height: 1.4; 
     text-align: right; 

     /* Visual y Colores*/ 
     background: #000; 
     color: #fff;

     /* Misc & ... */ 
     cursor: pointer;
     opacity: 0.9;
}

Pero, ¿por qué molestarse en agrupar y ordenar las propiedades CSS? Bueno, creo que tiene sentido por dos razones. La primera es que puede hacer que sea más rápido escanear el CSS y encontrar lo que necesita. La segunda es que si está trabajando en un entorno de equipo, puede facilitar el trabajo en CSS que tiene un estilo coherente sobre el arco.

3-Buena sintaxis del código CSS

  • No escribas valores de propiedades o parámetros de color con un cero inicial, por ejemplo, .5 en lugar de 0.5  y  -.5px en lugar de -0.5px.
  • Incluye un espacio antes de la llave de apertura de los bloques de declaración para legibilidad.
  • Coloca llaves de cierre de los bloques de declaración en una nueva línea.
  • Incluye un espacio después  «: » para cada declaración.
  • Los valores de propiedad separados por comas deben incluir un espacio después de cada coma (por ejemplo, box-shadow).
  • No incluyas espacios después de comas dentro de los valores rgb (), rgba (), hsl (), hsla () o rect (). Esto ayuda a diferenciar múltiples valores de color (coma, sin espacio) de múltiples valores de propiedad (coma con espacio). 
  • Escribe en minúscula todos los valores hexadecimales, por ejemplo, #fff. Las letras minúsculas son mucho más fáciles de discernir al escanear un documento, ya que tienden a tener formas más únicas.
  • Utiliza valores hexadecimales abreviados cuando estén disponibles, por ejemplo, #fff en lugar de #ffffff.
  • Evita especificar unidades para valores cero, por ejemplo, margen: 0; en lugar de margen: 0px ;.

 

4-Reducir la redundancia de las propiedades CSS

Se puede conseguir agrupando los selectores o creando clases genéricas. En lugar de esto:

<div class="banner"></div>
<div class="bigsize--banner"></div>

.banner{
     width: 100%;
     height: 50px;
     background: yellow;
     border-radius: 5px;
}

.bigsize-banner {
     width: 100%;
     height: 50px;
     font-size: 150%;
     background: yellow;
     box-shadow: 1px 2px 5px #CCC;
     border-radius: 5px;
}

Intente seguir un enfoque similar:

<div class="banner"></div>
<div class="banner bigsize--banner"></div>

.banner{
     width: 100%;
     height: 50px;
     background: yellow;
     border-radius: 5px;
}

.bigsize--banner {
     font-size: 150%;
     box-shadow: 1px 2px 5px #CCC;
}

 

5-Evitar los selectores CSS complejos

Hay dos problemas principales con el uso de selectores complejos. Primero, su mayor especificidad no solo dificultará la reescritura posterior de las reglas existentes, sino que también aumentará el tiempo que tarda el navegador en hacer coincidir los selectores.

Cuando un navegador intenta interpretar los selectores y decidir con qué elemento coincide, va de derecha a izquierda . Esto es más rápido en términos de rendimiento que hacerlo al revés. Tomando el selector siguiente como ejemplo:

.site-hearder .menu-1 .menu-item .current-menu-item a {
...
}

Un navegador se iniciará primero desde la etiqueta <a>. Coincidirá con todas las etiquetas <a> y luego pasará a la siguiente. Filtrará las a que están dentro de una clase .current-menu-item, y así hasta el ultimo elemento del selector.

Mi recomendación es de no usar etiquetas para los selectores de CSS porque coincidirá con todas las etiquetas.

Es también una buena práctica reducir la complejidad porque además de ser difícil de leer por un navegador lo es por un «ojo» humano.

Y si no tienes otra solución que de dejar un selector complejo, añádele un comentario para explicar a que elemento de la página pertenece.

6- Utilizar las Propiedades Abreviadas

Para reducir aún más el número de reglas, siempre intente utilizar propiedades abreviadas. Vamos a ver un ejemplo en el cual no utilizamos propiedades abreviadas y como se reducen las líneas de código cuando lo hacemos.

Antes:

.section {
     background color: #2200d3;
     background-image: url(../image.jpg);
     background-repeat: no-repeat;
     background-position: center;
     font-weight: bold;
     font-size: 60px;
     line-height: 1.2;
     font-family: Roboto, sans-serif;
     border-width: 1px;
     border-style: solid;
     border-color: #22ccdd;
     padding-top: 10px;
     padding-right: 5px;
     padding-bottom: 10px;
     padding-left: 5px;
}

Después:

.section {
     background: #2200d3 url(../image.jpg) no-repeat center;
     font: bold 60px/1.2 Roboto, sans-serif;
     border: 1px solid #22ccdd;
     padding: 10px 5px;
}

 

7-Implementar comentarios en su código CSS

Comentar en su hoja de estilo sigue un formato diferente que comentar en su página HTML pero tiene el mismo propósito: un mejor entendimiento del código

Así es como se deja un comentario en su hoja de estilo:

/ * aquí puedo dejar un comentario * /

 /* */ es la clave para el establecimiento de los comentarios separados y manteniendo el navegador de su intención, para que no los interprete como elementos CSS.

A mi, me gusta añadir más símbolos * para hacer el comentario visible /***** *****/ pero tampoco se trata de pasarse porque al final ralentizará el tiempo de carga de la hoja de estilos.

Los comentarios pueden ser también muy útiles para poner una tabla de contenido al principio de la hoja de estilos, que indicará los diferentes bloques dentro del código:

/ ***
TABLA DE CONTENIDO

HEADING - Nombre del sitio, logotipo, menú principal
SIDEBAR: submenú, barra de búsqueda, navegación subsidiaria, enlaces de servicios públicos
MAIN - Artículos, publicaciones, comentarios, imágenes
FOOTER - Copyright, enlaces de texto
*** /

 

8- Maquetar en modo «mobile-first»

Maquetar como lo llamo en modo mobile-first significa que vamos primero a escribir el código para dispositivos de pantallas pequeñas y construimos a partir de allí. Eso se llama «mejora progresiva».

De esa manera, nos aseguramos que, la mayoría de las veces, vamos a agregar reglas adicionales para adaptar el código a dispositivos de pantallas más grandes, en vez de reescribir las reglas CSS ya puestas.
Esto puede reducir la cantidad de reglas a poner.

Podemos diferenciar las media query que están en mobile-first y las que no como en el ejemplo siguiente:

/* Mobile-first, min-width 600px significa que el estilo dentro de esta media-query se aplicara a todas las pantallas de 600px y superior */
@media (min-width: 600px) {
/* aquí nuestras reglas CSS */
}

/* Non mobile-first, mxn-width 600px significa que el estilo dentro de esta media-query se aplicara a todas las pantallas de 600px y inferior*/
@media (max-width: 600px) {
/* aquí nuestras reglas CSS */
}

 

9-Utilizar Variables CSS

Las variables o Custom Properties pueden hacer que el código sea más fácil de mantener porque puede actualizar un valor y hacer que se refleje en varios lugares.
Son particularmente útiles por ejemplo para crear temas de colores en un sitio web:

:root{
     --blue: #96ceb4;
     --beige: #ffeead;
     --orange: #ffcc5c;
     --pink: #ff6f69;
     --hover-color: #588c7e;
     --border: 4px solid var(--pink);
}

Otra ventaja que tienen es que se pueden actualizar en JavaScript, lo que abre posibilidades aún más interesantes.

Sin embargo, tenga cuidado, el uso excesivo de variables puede hacer que tenga el efecto contrario y hacer que el código sea menos comprensible.

 

10- Minimizar sus hojas de estilos CSS

La «minificación» altera el contenido del código CSS. Reduce el tamaño del archivo de código eliminando espacios, caracteres y formato no deseados, lo permite tener un código más liviano.

Lo que por lo general, la «minificación» del código fuente reduce el tamaño del archivo y puede acelerar el tiempo que tarda el navegador en descargar y ejecutar dicho código. Sin embargo, lo que es de vital importancia sobre la minimización de CSS es que CSS es un recurso de bloqueo de renderizado en la web.

Esto significa que el usuario posiblemente no podrá ver ningún contenido de una página web hasta que el navegador haya construido el CSSOM (el DOM pero con información CSS), lo que solo ocurre después de haber descargado y analizado todas las hojas de estilo a las que hace referencia el documento.

Existen varias herramientas en internet que nos permiten «minificar» fácilmente nuestro código CSS:

En la imagen siguiente se ve el código antes y después de pasar por la herramienta CSS Minifier:

herramienta-minificar-codigo-css

Y si copiamos este código en un editar de texto lo veremos de la manera siguiente:

*{margin:0;padding:0;box-sizing:border-box}.contenedor{background:#ccc;width:90%;max-width:1000px;margin:auto;display:flex;flex-direction:row;flex-wrap:wrap}body{background:#e9e9e9}header{background:#2c3e50;width:100%;padding:20px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}header .logo{color:#fff;font-size:30px}header .logo img{width:50px;vertical-align:top}header .logo a{color:#fff;text-decoration:none;line-height:50px}header nav{width:50%;display:flex;align-items:center}header nav a{background:#c0392b;color:#fff;text-align:center;text-decoration:none;padding:10px;flex-grow:1}header nav a:hover{background:#e74c3c}.main{background:#fff;padding:20px;flex:1 1 70%}.main article{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #000}.main article:nth-last-child(1){margin-bottom:0;padding-bottom:0;border-bottom:none}aside{background:#e67e22;flex:1 1 30%;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:flex-start}aside .widget{background:#d35400;height:100px;margin:10px}footer{background:#2c3e50;width:100%;padding:20px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}footer .links{background:#c0392b;display:flex}footer .links a{flex-grow:1;color:#fff;padding:10px;text-align:center;text-decoration:none}footer .links a:hover{background:#e74c3c}footer .social{background:#e67e22}footer .social a{color:#fff;text-decoration:none;padding:10px;display:inline-block}@media screen and (max-width:800px){.container{flex-direction:column}header{flex-direction:column}aside{flex-direction:row;flex:1 1 100%}aside .widget{flex-grow:1}}@media screen and (min-width:320px) and (max-width:600px){header{justify-content:center}header nav{width:100%}footer{justify-content:center}}

 

Seguir esas 10 buenas prácticas para CSS, te permitirá escribir archivos CSS que sean:

  • más livianos
  • más fáciles de leer
  • más fáciles de escalar

Además utilizar variables para una paleta de colores o propiedades abreviadas para reducir las reglas de CSS escritas, te ayudará a crear diseños más consistentes. Y los estilos serán más reutilizables para otros proyectos.

Si conoces otras buenas prácticas para CSS, no dudes en compartirlas dejando un comentario:)

Gracias por leer y a seguir disfrutando de este increíble lenguaje que es el CSS!

2Comentarios

  • Isabel
    27/10/2021

    Super bien explicado.

Escribe un comentario