En este post quiero compartir con vosotros una serie de 20 útiles consejos y buenas prácticas recomendados por la comunidad de CSS. Algunos están más enfocados a principiantes, y algunos son un poco más avanzados, pero espero que todo el mundo encuentre un buen truco que no conociese. ¡A disfrutar!
No reinventes la rueda, utiliza una librería
La comunidad CSS es enorme y constantemente se lanzan nuevas librerías. Sirven para todo tipo de propósitos, desde pequeños snippets hasta frameworks en toda regla para desarrollar aplicaciones rresponsive. La mayoría de ellas son open source incluso.
La próxima vez que te enfrentes a un problema en CSS, antes de intentar resolverlo quebrándote la cabeza, comprueba si no hay ya una solución disponible en GitHub o en CodePen.
Mantén la especificidad del selector baja
No todos los selectores de CSS son iguales. Cuando los desarrolladores novatos escriben CSS, por lo general esperan que los selectores lo sobreescriban todo. Sin embargo, este no es siempre el caso, como podemos ver en el siguiente ejemplo:
a{
color: #fff;
padding: 15px;
}
a#blue-btn {
background-color: blue;
}
a.active {
background-color: red;
}
<a href='#' id='blue-btn' class="active">Active Button </a>
Queremos ser capaces de añadir la clase .active a cualquier botón y que sea de color rojo. Esto no funcionará porque nuestro botón tiene su background-color definido con un selector ID, que tiene una mayor especificidad. La regla es la siguiente:
ID (#id) > Clase (.class) > Tipo (por ejemplo: header)
La especificidad también apila por lo que un a#button.active tiene un valor superior a un a#button. Utilizar selectores con alta especificidad hará que que los selecctores viejos fallen por otros aún mayores y, finalmente, darán lugar a !important. Esto nos lleva a nuestra siguiente sugerencia.
No uses !important
En serio, no. Lo qué es una solución rápida ahora, puede llegar a causar una gran cantidad de reescrituras en el futuro. Para ello, encuentra qué selector de tu CSS no está funcionando y cambialo.
El único momento en el que !important es aceptable es cuando se queremos sustituir los estilos inline de HTML, que en sí mismo es otra mala práctica que debe evitarse.
Mayúsculas para significado semántico, text-transform para estilo.
En HTML, puedes escribir letras mayúsculas cuando desees por su significado semántico o porque quieres hacer hincapié en la importancia de una palabra.
<h3>Employees MUST wear a helmet!</h3>
Si necesitas tener texto en mayúsculas por razones estilísticas, escribe el texto, normalmente en el HTML, y transformarlo todo en mayúsculas con CSS. Tendrá el mismo aspecto, pero tu contenido tendrá más sentido si se toma fuera de contexto.
<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
text-transform: uppercase;
}
Lo mismo va por los textos capitalizados.
Em, Rem y Pixel
Existe un gran debate sobre si se debe utilizar em, rem, o píxeles para ajustar el tamaño de los elementos y del texto. La verdad es que las tres opciones son viables y tienen sus pros y contras.
Todos los desarrolladores y proyectos son diferentes, por lo que no puede haber reglas estrictas sobre cuándo usar cuál. Aquí tienes, sin embargo, algunos consejos y buenas prácticas para cada unidad:
- em: El valor de 1 em es relativo al tipo de letra del padre directo. A menudo se utiliza en media-queries, em es genial para diseños responsive, pero puede ser muy confuso a la hora de convertir ems a píxeles para cada elemento (1.25em de 1.4em de 16px =?).
- rem: Relativo al tamaño de fuente del elemento html, rem hace que sea muy fácil de escalar todos los encabezados y párrafos de la página. Dejar el elemento html con su tamaño de fuente por defecto y establer todo lo demás con rem es un gran acercamiento a la accesibilidad.
- px: Los píxeles te proporcionarán más precisión, pero no vienen muy bien en diseños responsives. Son fiables, fáciles de entender, y presentan una buena conexión visual entre el valor y el resultado real.
La moraleja es, que no tengas miedo de experimentar. Pruébalos todos y escoge el que más te guste. A veces em y rem te pueden ahorrar mucho trabajo, sobre todo en el desarrollo de páginas responsive.
Utiliza un preprocesador en proyectos grandes
Seguro que has oído hablar de Sass, Less, PostCSS, Stylus... Los preprocesadores son el siguiente paso en la evolución de CSS. Te proporcionan características tales como variables, funciones, anidación de selectores, y un montón de otras cosas interesantes, por lo que el código CSS, al final, es más fácil de manejar, especialmente en grandes proyectos.
Un ejemplo rápido. Aquí tienes un snippet sobre la utilización de variables y funciones de CSS directamente en una hoja de estilo con Sass:
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
El único inconveniente real de los preprocesadores es que necesitan ser compilados a vanilla CSS, pero si ya estás utilizando un build script en tu proyecto esto no debería ser mucha molestia.
Autoprefixers para una mayor compatibilidad
Escribir prefijos específicos para el navegador es una de las cosas más molestas de CSS. No son consistentes, nunca sabes exactamente cual necesitas, y si decides aplicarlo en tu hoja de estilo es una muerte por aburrimiento total.
Afortunadamente, existen herramientas que hacen esto automáticamente por ti e incluso te permitirán decidir qué navegadores necesitas que sea compatibles con el código.
Usa código minimizado en producción
Para mejorar la velocidad de carga de la página de tus sitios web y aplicaciones, siempre se debe utilizar recursos minimizados. La versión minimizada de tu código tendrá eliminados todos los espacios en blanco y repeticiones, lo que deriva en una reducción del tamaño total del archivo. Por supuesto, este proceso también hace que las hojas de estilo sea completamente ilegibles, por lo que ten siempre versión .min para producción y una versión normal para desarrollo.
Hay muchas maneras diferentes de minimizar código CSS:
- Herramientas Online: CSS Minifier (API incluída), CSS Compressor
- Plugins para editor de texto: Sublime Text, Atom
- Librerías: Minfiy (PHP), CSSO y CSSNano (PostCSS, Grunt, Gulp)
Dependiendo de tu manera de trabajar, puedes utilizar cualquiera de las opciones anteriores, pero es recomendable automatizar el proceso de una manera u otra.
Caniuse es tu amigo
Los diferentes navegadores web cuentan aún con un montón de incoherencias de compatibilidad. Utilizo canisue o un servicio similar para comprobar si lo que uso es compatible, si necesita prefijos, o si causa algún error en una determinada plataforma.
Testear en caniuse no es suficiente. Es necesario también hacer pruebas (ya sea manualmente o por medio de un servicio), para que tus diseños no se rompan sin razón aparente. Saber cuál es el navegador favorito de tu base de usuarios también ayuda mucho.
Validar
Validar CSS podría no ser tan importante como validar el código HTML o JavaScript, pero ejecutar tu código a través de CSS Linter puede ser muy útil. Te dirá si has cometido algún error, te advertirá sobre las malas prácticas, y te dará consejos generales para mejorar el código.
Fuente: tutorialzine.com