Esta es una recopilación que considero como buenas prácticas en la codificación de estilos en CSS.
A lo largo de mi camino como desarrollador frontend he tratado de llevar un uso de prácticas que me ayuden a optimizar y mejorar cada proyecto que hago.
Estas son las actuales prácticas que uso en mis proyectos:
- Reinicio de estilos
- Incluir información descriptiva
- Definir variables
- Organizar elementos
- Agrupar selectores
- Usar anotaciones en componentes
- Combinar elementos
- Usar valores relativos
- Usar shorthands
- Conocer el display inicial de los elementos
- Crear primero la estructura HTML
- Modularizar los estilos
- Usar metodologías CSS
- Usar prefijos de los navegadores
- Validar el codigo
- Minificar el codigo
- Utilizar preprocesadores
- Utilizar post procesadores
Reinicio de estilos
La mayor meta de un archivo de reinicio de estilos es reducir las incompatibilidades de los diferentes navegadores. Provee estilos generales que hacen más fácil editar y personalizar elementos.
El reinicio es esencial para eliminar las inconsistencias comunes de los navegadores tales como heights, headings, margins, font sizes, etc.
El mayor reto en el desarrollo web frontend es la compatibilidad de los estilos entre los diferentes navegadores. Aquí es donde toma partido un reinicio de estilos.
Un ejemplo de este tipo de hojas de reinicio es Normalize.css de Nicolas Gallagher, es una forma moderna de reiniciar CSS. Este preserva los valores iniciales útiles, a diferencia de otras hojas de reinicio de estilos. Además de eliminar las inconsistencias comunes de los navegadores también corrige algunos errores.
Incluir informacion descriptiva
Es útil incluir información que nos permita conocer más sobre el proyecto, datos tales como el autor, títulos, descripción, URLs informativas y otros de talles dentro de la hoja de estilos. Si el usuario o el desarrollador requiere una referencia o más detalles en el futuro, le será sencillo encontrar el contacto de la persona así como otros detalles que buscan.
/*
Project: Portfolio
Description: Portafolio web personal
Project URI: https://github.com/marskdev/portfolio
Author: Marcial Ambriz
Author URI: https://marskdev.netlify.app
*/
Definir variables
CSS ahora cuenta con propiedades personalizadas (variables) que podemos utilizar para guardar valores específicos como typefaces, tamaños, colores, incluso hasta configuraciones de propiedades.
En sitios y proyectos donde hay una gran cantidad de estilos, en general con muchos valores repetidos. Como ejemplo, un color puede ser usado por distintos elementos que sin el uso de la variables sería una tarea tediosa cambiarlo en el futuro, por otro lado las variables nos permitirá reemplazar el valor del color en todos los elementos que hagan referencia a la variable.
Otro beneficio son los identificadores semánticos haciendo que sea más fácil de entender y nos permite identificar con mayor precisión cada valor que usemos en los estilos.
:root {
/* theme */
--dark-base: #282A3E;
--base: #2B2D42;
--slate: #A8A8C7;
--light-slate: #C7C7DB;
/* Branding */
--primary: #F6BE5F;
--gradient: linear-gradient(109.8deg, #F6BE5F -6.35%, #FA9875 105.29%);
/* Typeface */
--font-headline: 'Lato', sans-serif;
--font-body: 'Open Sans', sans-serif;
}
h1,h2 {
font-family: var(--font-headline);
}
Organizar elementos
Organizar elementos en la hoja de estilos de arriba hacia abajo no es tan fácil como podría serlo. Sin una estructura que organice los elementos podría ser difícil localizar un elemento dentro de un desorden.
Además crea una legibilidad increíble que hace mucho más sencillo mantener en el futuro, permitirá encontrar elementos más rápidos. Además no sabes quien en el futuro podría necesitar mirar el código.
Una buena estructura puede iniciar incluyendo los estilos generales, seguidos por un comentario que divide un componente de otro e indicando el nombre dentro del comentario.
/****** General Styles *********/
body {…}
h1, h2, h3 {…}
p {…}
a {…}
/****** Header Style *********/
#header {…}
/****** Navigation Style *********/
#nav {…}
/****** Footer Style *********/
#footer {…}
Agrupar selectores
Si tienes diferentes selectores para un mismo componente, sería ideal agruparlos todos juntos para que parezca más organizado. Esto te ayudará a localizar errores fácilmente.
/* Cylinder */
.cylinder { width: 960px; margin: 0; padding: 0; }
.cylinder #new { font-family: Arial, sans-serif; font-size: 40px; color: black; }
.cylinder #tagline { font-family: Verdana; font-size: 20px; }
Usar anotaciones en componentes
Es recomendable colocar detalles sobre el código CSS que se está utilizando que revelen el propósito o describan el comportamiento de las propiedades en donde sea difícil a la vista entenderlo. Será de mucha ayuda en componentes muy complejos.
La mejor manera de hacerlo es colocar un comentario para cada grupo o componente.
Combinar elementos
Algunos elementos algunas veces comparten propiedades, en lugar de asignar propiedades a cada uno de forma independiente puedes optar por asignar las mismas propiedades a diferentes elementos, de esta forma evitarás la repetición de código.
h1, h2, h3, .headline, .title { font-family: tahoma, color: #333 }
Usar valores relativos
El uso de valores relativos como em (font-size element) o rem (root font-size element) en lugar de valores absolutos como px (píxeles) permite que los tamaños sean más flexibles en diferentes tamaños de pantalla.
Las unidades em toman el valor de font-size del elemento donde se declara y rem toma el valor del elemento raíz.
Para cambiar los valores de los elementos para diferentes tamaños de pantalla solo necesitarás redefinir el valor de font-size del elemento raíz a través de una media query cuando el tamaño de la pantalla cambie y en consecuencia se ajustaran los demas tamaños.
/* Default body font-size 16px
Screen size | body | headline
400px | 19px | 42px
800px | 21px | 46px
*/
.headline {
font-size: 2.2em; /*35px*/
}
@media (min-width: 400px) {
body { font-size: 118.8%; }
}
@media (min-width: 800px) {
body { font-size: 131.3%%; }
}
Usar shorthands
Puedes reducir la cantidad de código considerablemente usando shorthands. Para elementos como padding, margin, font, etc, puedes combinar estilos en una sola línea.
.noShorthand {
margin-top: 8px;
margin-right: 7px;
margin-left: 5px;
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: 600;
}
.withShorthand {
margin: 8px 7px 0 5px;
font: 600 18px Arial, sans-serif;
}
Conocer el display inicial de los elementos
Cada elemento HTML tiene un display inicial, dependiendo el tipo de elemento, el valor inicial será diferente por ello es importante entender el valor inicial de cada uno.
Tener en cuenta este dato nos permitirá saber cuándo cambiar el display dependiendo el contexto. Algunas propiedades requieren de un display específico como block para ser aplicadas.
Estos son los elementos más comunes:
/*Default display: inline*/
span, a, strong, em, img, br, input, abbr, acronym
/*Default display: block*/
div, h1...h6, p, ul, li, table, blockquote, pre, form
Encuentra la lista completa de los elementos aquí.
Crear primero la estructura HTML
Algunos desarrolladores crean los estilos al mismo tiempo que van creando la estructura HTML.
Es lógico crear ambos al mismo tiempo, pero actualmente podrías ahorrar tiempo si primero creas la estructura. La razón de esto es que ya tienes en mente la estructura de todos los elementos del sitio.
Crear primero la estructura te permite visualizar el sitio entero.
Modularizar los estilos
Dependiendo de la complejidad del diseño y el tamaño del sitio es recomendable separar los estilos en módulos en diferentes archivos que después se incorporan en uno solo importando los módulos, será más sencillo de mantener y editar que una única hoja gigante.
Permitirá gestionar los estilos que solo necesita una pagina especifica y evitará cargar estilos innecesarios para las diferentes vistas.
/* This file: main.css */
@import url("components.css");
@import url("layout.css");
@import url("header.css");
@import url("footer.css");
Usar metodologias CSS
Las metodologías CSS son una serie de indicaciones para escribir, modularizar, escalar y reutilizar código que permiten resolver problemas de implementación. Usarlo te ayudará a escalar el proyecto y mantenerlo en un futuro. Algunas metodologías son BEM, ITCSS, OOCSS, SMACSS, etc.
Incluso podemos combinar metodologías tomando lo mejor de cada una.
Usar prefijos de los navegadores
Usar los prefijos creará mejor compatibilidad en el despliegue del sitio entre los diferentes navegadores. Omitir los prefijos es encontrarse con problemas de compatibilidad de las características implementadas en navegadores específicos.
Algunas de las propiedades no son compatibles con ciertos navegadores, las cuales necesitan de prefijos para ser usadas en algunos navegadores. Para ello tenemos que definir múltiples líneas a la vez para una misma propiedad.
Estos son los prefijos de los navegadores más comunes.
iOS: -webkit-
Safari: -webkit-
Firefox: -moz-
Chrome: -webkit-
Opera: -o-
IE-Microsoft-Edge: -ms-
Validar el codigo
Siempre puedes usar W3C free CSS Validator para examinar si tu código ha sido organizado y estructurado apropiadamente. Otro beneficio de usarlo es ayudarte a encontrar errores dentro del código. Esto te ahorrará todo el tiempo que gastarías encontrando el problema de manera manual.
Minificar el codigo
Si sientes que va lento mientras se cargan los estilos en los navegadores. Entonces es momento de intentar comprimir el tamaño del archivo css. Muchos elementos incluyen saltos de línea y espacios en blanco, que nos permiten hacer de la hoja de estilos legible no son necesarios, estos podrían crear un retraso al momento de cargar el sitio.
Una forma de sacar el máximo potencial de una hoja de estilos es eliminando esos elementos que a nosotros como desarrolladores nos permite leer con facilidad los estilos, al navegador no le importara si no se encuentran. Una forma de hacerlo es minificar el código, esto hará que la carga de estilos sea más rápida.
Utilizar preprocesadores
El uso de un procesador puede ser beneficioso de varias maneras. Un procesador es una herramienta que te deja usar características avanzadas que no existen en CSS. Estas pueden ser variables, loops e incluso funciones.
Los preprocesadores ayudan a organizar tu hoja de estilos de mejor manera. Tienen la habilidad de romper los estilos en pequeños archivos reutilizables. Los cuales pueden ser importados dentro de otros o implementarlos de forma separada.
Anidar selectores
Otra gran ventaja es que mejora la legibilidad anidando los selectores. Es una simple y poderosa característica que CSS no tiene. La jerarquía estructural hace más sencillo de visualizar.
.wrapper {
.sidebar {
&.collapsed {
...
}
.list {
&-item {
...
&--active {
...
}
}
}
}
}
Vendor prefix automáticos
Esta es una característica experimental. Como más arriba explico, algunas propiedades no son compatibles con algunos navegadores.
Para que nuestros estilos tengan soporte para la mayoría de los navegadores, tenemos que definir múltiples líneas a la vez para una misma propiedad.
.gradient {
background: rgb(30,87,153);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
}
Utilizar post procesadores
Una mejor opción es un port-procesador. Este puede crear un paso de optimización adicional una vez que el CSS fue generado por un preprocesador. Unos de los más populares post-preprocesadores son postCSS o CSSnano.
Puedes usarlo para colocar prefijos automáticamente a las propiedades, ya no tendrás que preocuparte por dar soporte a todos los navegadores. Ya no habrá excusas de "Eso no lo puedo usar".
Conclusión
El uso de estas prácticas te ayudarán a optimizar y escribir estilos CSS que te brindarán ventajas y beneficios aumentando la calidad de tus proyectos. Además evitarán malas prácticas que podrían perjudicar tu proyecto.
Entre los beneficios se encuentran: una escritura rápida y lectura legible, mayor soporte entre navegadores, optimización de código, mejor escalabilidad y mantenimiento sencillo en el futuro.
Dime que opinas y si tienes otra buena práctica compartela.
Puedes encontrarme en otros sitios como Twitter, Instagram y Linkedin
Top comments (5)
Varias cosas a comentar aquí sobre las que hay que tener cuidado.
Resetear estilos CSS -> browser defaults
no es bueno o malo per se, la persona que usa un navegador puede estar acostumbrado a ellos y frustrarse cuando estos son reseteados o overrideados, por ejemplo si al seleccionar un item aparece un outline dashed alrededor y tu lo quitas, el usuario puede tratar de seleccionar ese item durante un rato, frustrarse y abandonar (por poner un ejemplo).
Usar valores relativos
mmmm si, pero más bién no. Me explico, setear tamaños con píxeles funcionara bien en cualquier dispositivo o pantalla por el simple hecho de que cada dispositivo gestiona sus ppp de forma relativa.
Setear font-size 16px dará como resultado un output visible practicamente identico tanto en un monitor 4K como en uno quad-HD, como en un Full-HD como en un smartphone o tablet. Esto es porque la densidad de píxeles es mucho mayor en el smartphone o tablet que en un monitor 4K, el propio dispositivo lo sabe y en vez de crear una imagen de fuente de 16px de forma estricta, pasa por una operación donde se calcula el tamaño visible en grupos de píxeles según la densidad.
Por otro lado, el usuario tiene el poder de modificar sus preferencias de accesibilidad (en android Accessibility -> Display size., en windows Display settings -> scale and layout, por ejemplo) para ver el contenido con algún multiplicador de tamaño que el usuario prefiera.
Con esto no digo que no se deba usar ems o rems, sino que hay que analizar y testear qué se quiere conseguir exactamente, sobre qué elemento se va aplicar este sizing (no es lo mismo una fuente que un div) y cual es el mejor modo de conseguirlo, también tenemos otras medidas relativas como vw, vh o % que, según el caso, pueden venir mejor. Si queremos que algo escale, usaremos, según el origen del escalado, rem si el origen es el root, em si el origen es el tamaño fuente relativo, vh si el origen es la altura del viewport, vw si el origen es el ancho del viewport, % si el origen es el tamaño relativo del elemento padre etc.
Shorthands
El ejemplo del post:
margin-top: 8px; margin-right: 7px; margin-left: 5px;y
no son lo mismo. En el shorthand estás declarando expresamente un margin-bottom de 0 pixeles, mientras que en la implementación sin shorthand simplemente no lo declaras. Cuando hay que extender componentes es mucho mejor tener solo las propiedades necesarias declaradas en vez de hacer overrides, de otro modo se termina overrideando con selectores menos eficientes o con
!important.Utilizar shorthands es recomendado únicamente cuando están declaradas todas las propiedades que el shorthand maneja, de otro modo, es preferible utilizar las propiedades por separado para evitar dichos problemas.
Conocer el display inicial de los elementos
Muy de acuerdo, pero no solo el display, por ejemplo la etiqueta p tiene el siguiente default:
y más de una vez he visto implementaciones tipo:
span.text-block { margin: 1em 0; display: block; }y entonces muere un gatito y te quedas pensando por qué #@! el dev en cuestión no usó una
pen vez de un span para eso xDPor eso es preferible crear, como bien has dicho, la estructura HTML y meter los estilos que sean necesarios a posteriori, analizando los defaults de los elementos.
También se pueden consultar los defaults aquí.
Increíble feedback, has compartido datos interesantes que no he tomado en cuenta.
En el ejemplo del shorthand de margin tienes razón, dar por hecho un valor sin tomarlo en cuenta puede traer problemas después.
Aunque esto es cierto, algunos shorthands permiten omitir valores como en el ejemplo de
font. En el ejemplo tendríamos que agregar line-height y font-variant pero no son necesarios.Incluso podríamos indicar solo el tamaño y el tipo de fuente y sería suficiente.
Que permita omitir valores en la declaración no significa que no haga nada con ellos.
Según la especificación del lenguaje CSS; Si no se especifica un valor, se le asignará su valor inicial. Suena a algo anecdótico, pero significa que se sobreescribirán los valores previamente definidos. Por lo tanto el código:
no pondrá el color de fondo en rojo sino al valor por defecto de background-color, que es transparent, puesto que la segunda regla tiene precedencia.
Solo los valores de las propiedades individuales pueden heredar. Dado que los valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave inherit puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro.
Puedes aprender más sobre ello en developer.mozilla.org/en-US/docs/W...
Un saludo
Muy buen artículo!!
Yo creé un framework de CSS en base a esos puntos y ahora vivo muy contento! ☕🙃
Interesante forma de aplicarlos, lo llevaste a otro nivel.