Errores Comunes
Este apartado se trata de un listado de los errores más comunes realizados por aprendices a la hora de desarrollar diseños en CSS.
Errores
-
No usar hexadecimal o RGB para definir los colores
En CSS una de las formas de definir los colores es utilizando el nombre del respectivo color, sin embargo esto no es recomendable ya que cada navegador puede tener configurado un color diferente asociado a esa palabra clave.
Por lo tanto, si bien todos los navegadores aplicarán el mismo color, la tonalidad de este puede variar en cada uno, en algunos casos llegando a ser bastante notorio, lo que resultaría en que los diseños de la página se alteren según desde cuál navegador se ingrese.
Por ello lo mejor es utilizar los formatos hexadecimal, RGB o incluso RGBA (incluye opacidad) para definir los colores, ya que son formatos estandarizados en todos los navegadores.
Incorrecto
Correcto
Correcto
-
No utilizar las shorthand properties
Estas se tratan de propiedades con la función de simplificar el código permitiendo que se definan varios parámetros a la vez.
Por ejemplo, la propiedad margin permite definir el efecto de:
Margin top: Margen superior
Margin right: Margen derecho
Margin bottom: Margen inferior
Margin left: Margen izquierdo
De ese modo se puede reducir el número de líneas de código simplificando el proyecto y haciéndolo más fácil de mantener y leer.
Incorrecto
Correcto
Nota: Es muy recomendable buscar todos los tipos de shorthand properties en Google.
-
Selectores mal especificados
A la hora de aplicar los selectores de una clase lo mejor es no utilizar selectores de más de dos clases, ya que no es necesario ser excesivamente específico a la hora de definirlos; a su vez, tampoco se debe de ser muy poco específico como para aplicar los estilos a otros elementos que no debería.
Error
Correcto
-
No definir fuentes parecidas
A la hora de definir las fuentes de una página lo más recomendable es definir dos fuentes: una principal que será la predilecta y una secundaria similar para utilizar en caso de que no se pueda acceder a la fuente primaria.
El error consiste en que las dos fuentes seleccionadas sean diferentes o con notorias diferencias, ya que lo mejor es que estas sean similares para mantener la estructura y estilos de la página.
Ejemplo
-
No aplicar los estilos generales
Un error sería el definir repetidamente una propiedad para múltiples elementos; para esos casos lo mejor es simplemente declararla como una propiedad global en vez de asignarla a cada elemento.
Si se presenta la necesidad de que algún elemento posea un valor diferente en estas propiedades, allí sí es correcto definir la propiedad para aquel elemento en específico.
Error
Correcto
-
No diseñar el proyecto como Responsive Design
Actualmente es esencial para toda página web el poder adaptarse a los diversos tipos de dispositivos, por ello este tipo de planteamiento es sumamente importante hoy en día; a su vez, esto es conseguido utilizando Grid o FlexBox en conjunto con @media query.
Correcto
