Dentro de los lenguajes de programación web, coincidimos todos en que CSS es el más sencillo. Está basado en una lista simple de propiedades que afectan a un elemento. ¿Que necesitas cambiar el tamaño de un texto? Tienes la propiedad la font-size, y así con todos los elementos.
La dificultad viene cuando estás embarcado en un proyecto profesional con una cierta complejidad y esperas un rendimiento alto de la programación. Ahí el CSS se convierte en un sistema también complicado, teniendo en cuenta además que a la gran variedad de propiedades a aplicar a un elemento o conjunto de elementos hay que sumar múltiples navegadores y motores de diseño.
Este artículo pretende ser una recopilación de los errores más comunes.
1- Utilización de nombres de colores en vez de valores hexadecimales.
Nunca debes dejar que un navegador determinado decida cómo va a mostrar la página web que has desarrollado. En el caso de los colores, ante una declaración de un color como color: red; cada navegador mostrará lo que entiende por rojo. Esto parte de que tú como desarrollador has tirado por el camino rápido de poner red en vez de buscar el valor hexadecimal del color que quieres utilizar.
Es algo que parece obvio, pero las pequeñas cosas son las que definen la calidad de los proyectos grandes. En este caso puede utilizar un listado de colores con su código equivalente hexadecimal como éste.
2- Selectores redundantes.
Las formas de trabajar el código CSS son particulares de cada desarrollador, y cada uno tiene sus manías y formas de estructurarlo de forma que le funcionan a él. Lo que suele ser bastante común es la redundancia en la declaración de algún estilo dirigido a algún elemento que se nos pasa por alto.
Es altamente recomendable el realizar una comprobación al final para asegurarte de que no hay repetición de selectores. Conviene que cuando el proyecto ya esté en producción este tipo de errores ya se hayan corregido.
En este caso puede serte útil este listado de herramientas para la optimización y chequeo del código CSS.
3- Propiedades redundantes.
Similar al punto anterior, se trata de asegurarse de que no repetimos propiedades para dos o más selectores. Quiero decir, si dos selectores aplican las mismas propiedades, no las dupliques, combina los selectores con ( , ).
Por ejemplo:
# Selector-1 {
font-style: italic;
color: # e7e7e7;
margen: 5px;
padding: 20px
}
. Selector de 2- {
font-style: italic;
color: # e7e7e7;
margen: 5px;
padding: 20px
}
Entonces pondremos:
# Selector-1,. Selector de 2- {
font-style: italic;
color: # e7e7e7;
margen: 5px;
padding: 20px
}
Así ahorras en dos conceptos, mantenimiento y velocidad de carga de la página.
4- No utilizar un restablecimiento adecuado de CSS.
Primero vamos a ver qué significa esto. Un restablecimiento de CSS establece los estilos de todos los elementos HTML a un valor de referencia fiable para todos los navegadores. Si esto se realiza con eficacia al comienzo, el trabajo posterior es mucho más sencillo.
Debes partir siempre de la idea de que los diferentes navegadores sean tus amigos, al fin y al cabo ellos son los que van a presentar tu página web, con lo que lo mejor es complacerlos. En un principio una de las funciones básicas de los navegadores es la de proporcionar un estilo predeterminado a los elementos HTML ya que podría ocurrir que algún desarrollador no hubiera fijado los elementos CSS para el estilo de su página. El problema viene porque raramente el estilo predeterminado de dos navegadores es idéntico. Para esto es para lo que conviene asegurarse un uso del restablecimiento CSS eficaz.
Hay diferentes bases de código de restablecimiento de CSS como por ejemplo el Eric Meyer Reset.
5- No utilizar propiedades abreviadas.
Siempre que puedas, utiliza las propiedades CSS resumidas, con ello ahorrarás ingentes líneas de código.
Un claro ejemplo es este:
# Selector {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0;
}
Claramente esta declaración se puede quedar reducida a lo siguiente:
# Selector {
margen: 50px 0;
}
Aplica esta lógica siempre que puedas, y para ayudarte en esta tarea, puedes consultar este listado de propiedades CSS resumidas.
6- Utilización de 0px en vez de 0.
No hay ninguna necesidad de añadir px detrás de un 0. Parece una tontería, pero cuando el archivo CSS es grande y las líneas de código muchas, todo se suma para llegar a conseguir un menor tamaño de archivo.
Así que quítale los px a los 0 cuando escribas esto:
# Selector {margin: 20px 0px 20px 0px; }
7- Ser demasiado específico al nombrar un selector.
Si te fijas en el siguiente ejemplo de selector, vamos a comentarlo:
ul#navegacion li a { ... }
Normalmente la estructura de una navegación de primer nivel comienza con <ul>, habitualmente con un ID como #nav o #navegacion, y después una lista de <li> cada uno con su etiqueta <a> correspondiente para enlazar con cada página.
Esta estructura es formalmente correcta, pero vamos a ver como la optimizamos.
Lo primero es que no es necesaria la <ul> delante de #navegacion ya que esta última es el selector más específico posible. Tampoco es necesario poner li en la sintaxis del selector ya que todos los elementos a son elementos propios de la navegación, con lo que no es necesario ser tan específico.
Por lo tanto, puedes condensar este selector de esta manera:
#navigation a { ... }
En definitiva, sé específico cuando escribas tus selectores CSS, pero no demasiado específico.
8- No definir las Fallback Fonts.
Las Fallback Fonts son las fuentes que definimos en nuestra hoja de estilos como fuentes alternativas cuando el navegador no encuentra la fuente definida como principal.
Todos los desarrolladores desearíamos que todas las fuentes que utilizamos en nuestros proyectos estuvieran luego disponibles en los equipos de los usuarios que visitan nuestra web. Pero como tú ya sabes, esto es una utopía.
Afortunadamente existen las Font Stacks o secuencias de fuentes, listas de fuentes que el navegador chequea para escoger la que tiene disponible.
Las Font Stacks es la forma que tiene los desarrolladores para proporcionar al navegador las Fallback Fonts que debe utilizar si el usuario no tiene instalada la fuente escogida como principal.
Por ejemplo, ante este selector:
#selector {
font-family: Helvetica;
}
Mejor indica las Fallback Fonts por si acaso:
#selector {
font-family: Helvetica, Arial, sans-serif;
}
Así, si la Helvetica no se encuentra disponible, pasará a la Arial, y sino a cualquier Sans-serif que se esté instalada.
Esta recomendación te proporciona un mayor control sobre la forma en que tus webs se muestran en los navegadores.
9- Espacios en blanco innecesarios.
Todo cuenta cuando de reducir el tamaño de los archivos CSS se trata. Lógicamente una hoja de estilo bien organizada en la fase de desarrollo ayuda a encontrar y distribuir los elementos de forma más fácil. Pero no hay ninguna razón para que esto sea así cuando el proyecto ya está online y el tamaño del archivo cuenta.
Siempre dependerá de la magnitud del proyecto y las hojas de estilo que hay que mover, pero es un error muy común no tener en cuenta este aspecto cuando los proyectos manejan archivos CSS extensos.
10- Una hoja de estilo para todo.
Todo es válido, sin embargo, la modulación de los contenidos es una tendencia extendida y entiendo que recomendable.
El compartimentar los estilos en diferentes archivos CSS, cada uno con su temática específica, ayuda a encontrar y modificar los estilos. Quizás esto no sea algo muy evidente cuando un desarrollador afronta la tarea de un nuevo sitioweb, sin embargo, con el crecimiento de un único archivo se llegan a situaciones en las que es difícil de mantener. Por eso el consejo de dividirlo en función de los parámetros que se establezcan. Además esto permite cargar en un archivo HTML concreto lo estilos necesarios para ese módulo, y nada más que pueda ser innecesario.
De esta manera, puedes llamar solo a aquéllas que te hagan falta:
@ Import url ("reset.css");
@ import url ("ie.css");
@ import url ("fuentes.css");
@ import url ("estilo.css");
11- No proporcionar un estilo para impresión.
Proporcionar un estilo específico de impresión te permite ocultar los elementos que no deseas que formen parte de la impresión (por ejemplo el menú de navegación, cabecera…), hacer que el fondo sea blanco e indicar tipografías más adecuadas para la impresión en papel. Esto muestra un interés por tu parte en que al imprimir tu página, sabes que va a ofrecer un resultado mucho mejor para el usuario que si se imprime con los estilos definidos para la pantalla.
Al final es tan sencillo como esto:
<link rel="stylesheet" href="imprimir.css" media="print" />
12- No organizar tu archivo CSS de manera lógica.
Si te has enfrentado alguna vez con un CSS en el que el scroll no tiene fin, enseguida entenderás esta recomendación. Organiza tu código e introduce comentarios.
Dedica un tiempo antes de comenzar a escribir código a la forma en que vas a estructurar el HTML. Ya solo con esto te conviene separar los elementos que formarán parte de las diferentes zonas de tu página, cabecera, body, barras laterales y el pie.
Un simple vistazo a una hoja de estilos ya indica si el desarrollador ha ido escribiendo estilos según los iba necesitando, o por el contrario se ha querido facilitar las cosas para el futuro.
Comentarios