Cuando hablamos de desarrollo web, es imposible no hablar de CSS, ya que este lenguaje es el que define toda la estructura y diseño de las aplicaciones. Y cuando se trata de CSS, es posible lograr los mismos efectos de varias maneras: las innovaciones de CSS3 han permitido implementar varias animaciones y efectos, que antes se hacían a través de Javascript, de forma nativa en el propio lenguaje.

No podemos, sin embargo, abusar de la libertad que nos da la lengua. Las aplicaciones web son permisivas hasta el punto de permitirnos formatear nuestro estilo de la forma que queramos, pero hay buenas prácticas que marcan la diferencia.

Al aplicar las técnicas correctas, es posible evitar trampas que causan dolores de cabeza incluso para el programador de interfaz de usuario más experimentado. En este post, cubriremos 7 errores comunes de CSS que debe evitar y le mostraremos cómo llegar a la misma solución de una manera más elegante y profesional.

1. Todos los navegadores son relevantes

Es importante que tu sitio sea compatible con todos los navegadores, o al menos con los principales del mercado. Respetar las características de los navegadores dentro de tu CSS es respetar a tu usuario final.

Pero, ¿cómo saber si todos los navegadores son compatibles con el código implementado? Una de las soluciones que puede resultar interesante es validar tu sitio por el propio Markup Service del W3C. En esta herramienta en línea, su código es validado por la entidad que regula los estándares de interfaz. Después de esto, todo lo que tiene que hacer es adaptar su script para que sea compatible con todos los navegadores.

2. No caigas en la tentación de CSS en línea

Uno de los errores más comunes y peligrosos es el CSS en línea. Escribir código de estilo directamente en etiquetas HTML puede ser muy conveniente y común cuando se prueba una nueva configuración, o cuando desea solucionar algún problema urgente, ¡pero debe tener mucho cuidado al llevar su aplicación a producción!

Lo que es "rápido" hoy puede consumir mucho tiempo en el futuro. Para el usuario, hay una pérdida de rendimiento ya que se necesita acceder a más código a través de la red, lo que puede conducir a una representación más lenta de la página. Para el programador, imagine un mantenimiento que requiera un cambio de toda la identidad visual: el CSS en línea tendrá que ser obtenido y modificado uno por uno. ¡Mejor mantenerlos alejados del sitio!

3. Tablas: ¡solo cuando sea necesario!

Desafortunadamente, todavía es bastante común encontrar sitios web de empresas que se basen en tablas. La carga de estos elementos no solo es más costosa, sino que también ofrecen una serie de limitaciones, a menudo las imágenes deben recortarse para que quepan en las divisiones del diseño, algunos elementos del diseño no funcionan (como el uso de altura: 100% para elementos secundarios < td>) y hacen que el desarrollo y el mantenimiento sean extremadamente confusos y difíciles.

Si su propósito no es explícitamente cuadrículas de datos, en la gran mayoría de los casos hay mejores formas de implementar su diseño, como flexbox.

4. Tenga cuidado al usar !important

Todas las funciones de CSS son válidas, lo que debe comprender es cuándo y cómo debe usarlas. El !important es una de esas características que debemos tener mucho cuidado antes de usar.

Los selectores de CSS tienen especificidad, las reglas asignadas a #ids anulan las reglas asignadas a .classes, y las reglas en Inline CSS son aún más específicas. Puede obtener más información sobre la especificidad del selector aquí.

Con !important, se descarta cualquier formato que exista en otro lugar. Debe tener mucho cuidado, especialmente cuando use !important en clases presentes en varios elementos, para no perder horas preguntándose por qué sus cambios de diseño no funcionan.

5. No uses solo unidades absolutas

A menudo es posible encontrar algunos números perdidos dentro de CSS. Si bien pueden ser necesarias propiedades fijas de 'px', un diseño multiplataforma eficiente y elegante hace un buen uso de los porcentajes cuando sea posible, ya sea en ancho, alto, márgenes o propiedades más complejas.

Además, puede aprovechar los preprocesadores como Less y Sass y definir variables para tamaños y colores para facilitar la creación de diseños receptivos con @media manteniendo la estandarización y facilitando los cambios. Para tipografía, puede usar la unidad 'em' o 'rem' en lugar de 'px' o 'pt' para definir tamaños de fuente relativos.

6. Respeta las etiquetas HTML

Los estilos CSS combinados con etiquetas HTML son posibles, pero no recomendables. Es mejor crear más clases CSS que tener que adjuntar etiquetas a CSS. Esto hace que su código sea más independiente y deja al desarrollador más libre para cambiar el HTML sin romper el diseño de la página.

7. Comenta tu código

Código limpio y semántica adecuada. Esto ya agrega mucha seguridad y claridad al CSS. Pero no se equivoque, ¡el trabajo aún no ha terminado! Incluso un desarrollador experimentado tiene miedo de enfrentarse a un guión antiguo.

El lenguaje CSS parece intuitivo, pero exige atención. Para evitar pasar un mal rato, lo mejor es comentar de qué trata cada bloque de estilo CSS que escribes. De esta manera, cualquiera puede entender lo que se ha hecho, incluida la persona que creó el script. Es posible separar el código en varios archivos durante el desarrollo, lo que facilita saber qué efecto se está aplicando a cada elemento.

Cabe mencionar que si bien son códigos semánticos y bien comentados, no es recomendable ponerlos directamente en un ambiente de producción precisamente porque el peso del archivo es mayor, lo ideal es minimizar todo lo posible para obtener un mejor rendimiento en la carga. tiempo (o incluso servir los recursos desde la nube).

Artículo original:

https://blog.devgenius.io/7-css-mistakes-you-cant-keep-making-in-2022-1014b6bbd1b