Cómo evitar estas trampas comunes para escribir código CSS más limpio y eficiente.

CSS es una herramienta poderosa que da vida a nuestros sitios web. Es la magia detrás de los diseños hermosos, interactivos y receptivos que cautivan a los usuarios. Sin embargo, como cualquier herramienta, no es inmune al mal uso o la falta de comprensión. Incluso los desarrolladores más experimentados pueden caer en errores comunes de CSS que pueden convertir un sitio web de ensueño en una pesadilla de errores e inconsistencias.

En esta publicación del blog, vamos a destacar los diez errores comunes que los desarrolladores cometen con CSS; ya sea que seas un principiante que se está adentrando en el mundo del CSS o un desarrollador experimentado que busca repasar las mejores prácticas, esta publicación es para ti.

Al comprender y evitar estos errores comunes de CSS, puedes escribir un código más limpio y eficiente, asegurarte de que tus sitios web se vean y funcionen como se espera en todos los navegadores y dispositivos, y en última instancia, proporcionar una mejor experiencia al usuario.

#1. No Usar un CSS de Restablecimiento

Los diferentes navegadores tienen diferentes estilos predeterminados para los elementos. Por ejemplo, el margen y el relleno predeterminados para el elemento <body> pueden ser diferentes en Chrome y Firefox. Esto puede provocar inconsistencias en cómo se ve tu sitio web en diferentes navegadores.

Ejemplo:

Digamos que tienes un archivo HTML simple:

<!DOCTYPE html>
<html>
<head>
    <title>Página de prueba</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
</body>
</html>

Y tienes algo de CSS:

body {
    margin: 0;
    padding: 0;
}

h1 {
    margin: 0;
    padding: 0;
}

Incluso con este CSS, el <h1> aún podría tener algún margen en algunos navegadores, porque tienen un estilo predeterminado para <h1> que incluye un margen.

Solución:

Para solucionar este problema, puedes usar un CSS de restablecimiento. Un CSS de restablecimiento es un conjunto de estilos que aplicas al principio de tu archivo CSS para restablecer los estilos predeterminados de los elementos. Aquí hay un CSS de restablecimiento simple:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Este CSS restablece el margen y el relleno de todos los elementos a 0, y establece su box-sizing en border-box. Esto puede ayudar a eliminar las inconsistencias entre los navegadores.

Sin embargo, este es un restablecimiento muy simple y puede que no cubra todos los elementos y estilos. Hay archivos CSS de restablecimiento más completos disponibles, como el restablecimiento de Meyer, que puedes encontrar en línea y usar en tus proyectos.

Usar un CSS de restablecimiento puede hacer que tu sitio web se vea muy simple, porque elimina todos los estilos predeterminados. Después de aplicar un restablecimiento, deberás estilizar todos los elementos tú mismo. Pero esto te da control total sobre el aspecto de tu sitio web.

#2. No Usar Propiedades Abreviadas

CSS tiene propiedades abreviadas que te permiten establecer varios estilos relacionados a la vez. Si no las estás usando, tu CSS puede volverse innecesariamente largo y más difícil de mantener.

Ejemplo:

Digamos que tienes el siguiente CSS:

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

Este CSS aplica margen a los cuatro lados de los elementos con la clase «box». Pero es bastante verboso.

Solución:

Puedes usar la propiedad abreviada margin para establecer los cuatro márgenes a la vez:

.box {
    margin: 10px 20px;
}

Esto hace lo mismo que el CSS anterior. El primer valor es el margen superior e inferior, y el segundo valor es el margen derecho e izquierdo.

Aquí hay otro ejemplo con la propiedad background. En lugar de esto:

.box {
    background-color: #000;
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

Puedes escribir esto:

.box {
    background: #000 url('image.jpg') no-repeat center;
}

Las propiedades abreviadas pueden hacer que tu CSS sea mucho más corto y fácil de leer y mantener. También pueden ayudar a garantizar la coherencia en tus estilos.

Sin embargo, ten en cuenta que cuando usas una propiedad abreviada, cualquier subpropiedad no especificada se establece en sus valores iniciales. Por ejemplo, si usas la propiedad abreviada background y no especificas un tamaño de fondo, el tamaño de fondo se establece en su valor predeterminado de «auto».

#3. Usar Estilos en Línea

Los estilos en línea son declaraciones CSS que se aplican directamente dentro de tus elementos HTML. Si bien pueden parecer convenientes para un estilo rápido, pueden provocar varios problemas:

  • Dificultad de mantenimiento: Si tienes un archivo HTML grande con muchos elementos que usan estilos en línea, puede volverse muy difícil mantener y actualizar tus estilos.
  • Problemas de especificidad: Los estilos en línea tienen una especificidad muy alta. Esto significa que anularán cualquier estilo declarado en tu CSS externo o interno, lo que dificulta anularlos cuando sea necesario.
  • Reutilización: Los estilos en línea no son reutilizables. Si quieres aplicar los mismos estilos a varios elementos, tendrías que repetir los estilos en línea para cada elemento.

Ejemplo:

Aquí hay un ejemplo de un estilo en línea:

<h1 style="color: blue; font-size: 2em;">¡Hola, mundo!</h1>

Solución:

En lugar de usar estilos en línea, es mejor usar CSS externo o interno. Así es como puedes hacer lo mismo con CSS interno:

<head>
    <style>
        .blue-heading {
            color: blue;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h1 class="blue-heading">¡Hola, mundo!</h1>
</body>

Y así es como puedes hacerlo con CSS externo. Primero, crea un archivo CSS (llamémoslo «styles.css»):

.blue-heading {
    color: blue;
    font-size: 2em;
}

Luego, enlázalo en tu archivo HTML:

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="blue-heading">¡Hola, mundo!</h1>
</body>

Usar CSS externo o interno hace que tus estilos sean más fáciles de mantener y actualizar, te permite reutilizar estilos y evita problemas de especificidad. Es una buena práctica evitar usar estilos en línea siempre que sea posible.

#4. No Usar Prefijos de Navegadores (Vendor Prefixes)

Los vendor prefixes son una forma para que los fabricantes de navegadores agreguen nuevas funciones CSS antes de que formen parte de las especificaciones oficiales de CSS. No usarlos puede provocar que algunas propiedades CSS no sean reconocidas por algunos navegadores, lo que provoca inconsistencias en tu diseño.

Ejemplo:

Digamos que quieres usar la propiedad box-shadow, que es una adición relativamente nueva a CSS:

.box {
    box-shadow: 10px 10px 5px #888888;
}

Este CSS funcionará en la mayoría de los navegadores modernos, pero las versiones anteriores de algunos navegadores pueden no reconocer la propiedad box-shadow.

Solución:

Para asegurarte de que tu CSS funcione en la mayor cantidad de navegadores posible, puedes usar vendor prefixes. Así es como puedes agregar un box shadow con vendor prefixes:

.box {
    -webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */
    -moz-box-shadow: 10px 10px 5px #888888; /* Firefox */
    box-shadow: 10px 10px 5px #888888; /* non-prefixed, works in most modern browsers */
}

Este CSS aplicará un box shadow en Safari, Chrome, Firefox y la mayoría de los demás navegadores modernos.

Sin embargo, ten en cuenta que los vendor prefixes deben utilizarse como último recurso. El uso de vendor prefixes puede generar código hinchado y difícil de mantener. Es mejor escribir CSS estándar y dejar que herramientas como Autoprefixer agreguen los vendor prefixes por ti.

Además, ten en cuenta que a medida que CSS evoluciona y los navegadores se actualizan, la necesidad de vendor prefixes disminuye. Muchas propiedades que antes requerían vendor prefixes ahora son compatibles universalmente sin ellos. Verifica siempre la compatibilidad actual del navegador para una función CSS antes de decidir usar vendor prefixes.

#5. Usar Selectores Demasiado Específicos

En CSS, la especificidad determina qué regla CSS se aplica por los navegadores. Si tus selectores son demasiado específicos, puede hacer que tu CSS sea difícil de anular y mantener. También puede provocar una complejidad innecesaria en tu CSS.

Ejemplo:

Digamos que tienes el siguiente CSS:

body div#container ul.nav li a {
    color: blue;
}

Este selector es muy específico. Selecciona un elemento <a> que es descendiente de un elemento <li>, que es descendiente de un <ul> con una clase de «nav», que es descendiente de un <div> con un ID de «container», que es descendiente del <body>.

Solución:

Es mejor usar clases y mantener tus selectores lo más simples posible. Así es como puedes simplificar el selector anterior:

.nav a {
    color: blue;
}

Este selector hace lo mismo que el anterior, pero es mucho más simple. Selecciona cualquier elemento <a> que sea descendiente de un elemento con una clase de «nav».

Simplificar tus selectores hace que tu CSS sea más fácil de leer y mantener. También reduce la probabilidad de conflictos de especificidad, donde los selectores más específicos anulan los menos específicos.

Sin embargo, ten en cuenta que simplificar tus selectores también puede aumentar la probabilidad de conflictos de nombres, donde dos elementos tienen el mismo nombre de clase pero deberían tener diferentes estilos. Para evitar esto, puedes usar metodologías como BEM (Block Element Modifier) (Bloque, Elemento, Modificador) para nombrar tus clases de una manera que reduzca la probabilidad de conflictos.

#6. No Organizar Tu CSS

Si tu CSS no está organizado, puede ser difícil encontrar y cambiar los estilos. Esto puede provocar dificultades para mantener tu código, especialmente cuando se trabaja con hojas de estilo grandes o en un entorno de equipo.

Ejemplo:

Digamos que tienes un archivo CSS con cientos de líneas de código y los estilos están todos mezclados:

h1 {
    color: blue;
}

.footer {
    background: black;
}

h2 {
    color: green;
}

.header {
    background: white;
}

En este ejemplo, los estilos para diferentes secciones del sitio web están dispersos por todo el archivo CSS. Esto puede dificultar la búsqueda de los estilos para una sección específica cuando necesitas actualizarlos.

Solución:

Una buena práctica es organizar tu CSS de una manera lógica. Así es como puedes organizar el CSS anterior:

/* Header */
.header {
    background: white;
}

h1 {
    color: blue;
}

h2 {
    color: green;
}

/* Footer */
.footer {
    background: black;
}

En este ejemplo, los estilos se agrupan por la sección del sitio web a la que se aplican. Esto facilita la búsqueda y actualización de los estilos para una sección específica.

Hay muchas formas de organizar tu CSS, y el mejor método depende de los detalles de tu proyecto. Algunos desarrolladores prefieren organizar su CSS por componente, otros prefieren organizarlo por página y otros prefieren organizarlo por tipo de estilo (tipografía, diseño, color, etc.).

Además de organizar tu CSS dentro de cada archivo, también es una buena idea organizar tus archivos CSS en sí. Para proyectos grandes, puede ser útil dividir tu CSS en varios archivos (por ejemplo, uno para tipografía, uno para diseño, uno para colores, etc.) y luego importarlos todos en una hoja de estilo principal mediante declaraciones @import. Esto puede hacer que tu CSS sea más fácil de administrar y mantener.

#7. No Usar Variables CSS

Las variables CSS, también conocidas como propiedades personalizadas, te permiten almacenar valores específicos para reutilizarlos en todo tu CSS. Si no los estás usando, es posible que te encuentres repitiendo los mismos valores una y otra vez, lo que puede hacer que tu CSS sea más difícil de mantener y actualizar.

Ejemplo:

Digamos que tienes un tono específico de azul que usas con frecuencia en tu CSS:

.header {
    background-color: #007BFF;
}

.button {
    background-color: #007BFF;
}

.link {
    color: #007BFF;
}

En este ejemplo, el mismo valor de color se repite tres veces. Si decides cambiar este color, tendrías que encontrar y actualizar cada instancia de él en tu CSS.

Solución:

Puedes usar una variable CSS para almacenar este valor de color:

:root {
    --main-color: #007BFF;
}

.header {
    background-color: var(--main-color);
}

.button {
    background-color: var(--main-color);
}

.link {
    color: var(--main-color);
}

En este ejemplo, el valor de color se almacena en una variable llamada --main-color, y esta variable se usa donde sea que se necesite el color. Si decides cambiar este color, solo necesitas actualizar la variable y el cambio se aplicará en todas partes donde se use la variable.

Las variables CSS pueden hacer que tu CSS sea más fácil de mantener y actualizar. También pueden ayudar a garantizar la coherencia en tus estilos. Sin embargo, ten en cuenta que las variables CSS no son compatibles con algunos navegadores antiguos, por lo que si necesitas admitir este navegador, es posible que debas proporcionar una solución alternativa o usar un preprocesador como Sass o Less, que tienen sus propios sistemas para las variables.

#8. No Considerar la Accesibilidad

La accesibilidad en el diseño web significa hacer que tu sitio web sea utilizable para todas las personas, independientemente de sus habilidades o discapacidades. Esto incluye personas con discapacidades visuales, auditivas, cognitivas y motoras. Si no estás considerando la accesibilidad en tu CSS, es posible que estés excluyendo a una parte importante de tu audiencia.

Ejemplo:

Digamos que tienes un sitio web con texto gris claro sobre un fondo blanco:

body {
    color: #999;
    background-color: #fff;
}

Esto puede parecer elegante, pero es difícil de leer para las personas con baja visión o deficiencias de visión del color.

Solución:

Para hacer que tu sitio web sea más accesible, puedes usar colores de alto contraste para tu texto y fondo:

body {
    color: #333;
    background-color: #fff;
}

Esto es mucho más fácil de leer, incluso para las personas con discapacidades visuales.

Además del contraste de color, hay muchos otros aspectos de la accesibilidad a considerar en tu CSS. Aquí hay algunos ejemplos:

  • Usa unidades relativas como em y rem para los tamaños de fuente, para que los usuarios puedan ajustar el tamaño del texto si es necesario.
  • Evita usar CSS para ocultar contenido que debería ser accesible para los lectores de pantalla. Por ejemplo, usa visibility: hidden u opacity: 0 en lugar de display: none.
  • Usa consultas de medios para hacer que tu diseño sea receptivo, para que sea utilizable en todos los tamaños de pantalla.
  • Usa roles y propiedades ARIA cuando sea necesario para proporcionar información adicional a las tecnologías de asistencia.

Recuerda, la accesibilidad no es solo una característica agradable, es un requisito para un buen diseño web. Hacer que tu sitio web sea accesible puede mejorar su usabilidad para todos los usuarios, no solo para las personas con discapacidades.

#9. No Probar en Múltiples Navegadores

Tu sitio web puede verse y comportarse de manera diferente en diferentes navegadores debido a las diferencias en cómo interpretan y representan CSS. Si no estás probando tu sitio web en todos los navegadores principales, es posible que no estés al tanto de estas diferencias, lo que lleva a una mala experiencia para algunos de tus visitantes.

Ejemplo:

Digamos que has usado el diseño de cuadrícula CSS en el diseño de tu sitio web:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Si bien CSS Grid es compatible con todos los navegadores modernos, es posible que no sea totalmente compatible o que se comporte de manera diferente en versiones anteriores de algunos navegadores.

Solución:

Para asegurarte de que tu sitio web se ve y funciona correctamente en todos los navegadores principales, debes probarlo en cada uno. Esto incluye Chrome, Firefox, Safari y Edge. También hay herramientas disponibles que pueden ayudarte con las pruebas entre navegadores, como BrowserStack y BitBar.

Si encuentras que una determinada función CSS no es compatible o se comporta de manera diferente en un determinado navegador, puedes usar consultas de características (regla @supports) para proporcionar una solución alternativa:

.container {
    display: flex;
}

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

En este ejemplo, el contenedor usará el diseño flexible de forma predeterminada. Si el navegador es compatible con CSS Grid (según lo determina la regla @supports), usará el diseño de cuadrícula en su lugar.

El objetivo de las pruebas entre navegadores no es hacer que tu sitio web se vea exactamente igual en todos los navegadores, sino garantizar una experiencia coherente y utilizable para todos los usuarios.

#10. No Usar Diseño Receptivo

Con la variedad de dispositivos y tamaños de pantalla de hoy, es importante hacer que tu sitio web sea receptivo. Esto significa que el diseño y el diseño de tu sitio web deben adaptarse al tamaño de pantalla del dispositivo en el que se está viendo. Si no estás usando un diseño receptivo, es posible que tu sitio web sea difícil de usar en algunos dispositivos, especialmente en dispositivos móviles.

Ejemplo:

Digamos que tienes un sitio web con un ancho fijo:

.container {
    width: 1200px;
}

Este sitio web se verá bien en pantallas que tienen 1200px de ancho o más, pero en pantallas más pequeñas, provocará desplazamiento horizontal, que generalmente se considera una mala experiencia de usuario.

Solución:

Para hacer que tu sitio web sea receptivo, puedes usar consultas de medios para aplicar diferentes estilos para diferentes tamaños de pantalla. Así es como puedes hacer que el ejemplo anterior sea receptivo:

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

En este ejemplo, el contenedor ocupará el 100% del ancho de la pantalla en pantallas más pequeñas, y se centrará con un ancho máximo de 1200px en pantallas más grandes.

También puedes usar consultas de medios para aplicar estilos completamente diferentes para diferentes tamaños de pantalla. Por ejemplo:

.container {
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
        margin: 0 auto;
    }
}

En este ejemplo, el contenedor tendrá un ancho completo en pantallas menores a 768px, 750px de ancho en pantallas entre 768px y 1199px, y 1170px de ancho en pantallas que tienen 1200px o más.

Usar un diseño receptivo puede hacer que tu sitio web sea más fácil de usar y accesible para una audiencia más amplia. Es un aspecto crucial del diseño web moderno.

Categorizado en:

CSS,