Errores en el código de los archivos HTML y CSS los puede cometer desde el desarrollador más principiantes al más avanzado. La mayoría de estos erroresprovienen deun descuido oen algunos casos,la falta de experiencia. Tomarse el tiempo necesario para asegurar queel códigoestá lo más limpioayudará a mejorarlas habilidadesde los desarrolladoresytambién puede eliminarla necesidad deeditarlomás tarde,lo que le ahorrarátiempo.
No hay muchas otrastecnologías web comoCSSque los recién llegadospuedenrecoger amedida que avanzan. Es una herramientaque se puede utilizarpara salir adelantesin prestar demasiadaatención alas mejores prácticas.
El efecto de esto esque hay muchosdiseñadores web quepasardemasiadas horasreparandodiseñosrotosy la depuración delossitiosporque tienenun conocimiento incompleto deCSS ylos problemasquepuede crear. A continuación vamos a ver unos cuentos de loserroresde CSSmás comunesde diseñadores webdetodos los nivelesde experiencia.
Utilizar varias clases cuando no es necesario:
.boxy{ background: #ccc; border: 1pxdashed#000; color: #fff; font-weight: bold; padding: 5px;}
.boxy_right{ background: #ccc; border: 1pxdashed#000; color: #fff;float: right;font-weight: bold;padding: 5px; }
La única diferencia entre elloses que este últimotieneun float:right.En lugar de teneruna larga línea decódigo, podemos utilizar:
.flright{float:right}
Y hacerlo mucho más simple
<divclass="boxy flright">
Utilización de selectores largos
#wrapper #header .logo img.logo { margin:1em; }
No introducir fuentes alternativas
.thebox { font-family: Helvetica;}
En su lugar, se debe añadir más fuentesporque no todoslos visitantesvan a tenerHelveticaen suequipo; así podemos elegirel tipo de letraque van aver enla página,en lugar deteneruno aleatorioallí.
.thebox { font-family: Helvetica, Arial, sans-serif;}
No acortar el codigo
margin: 2px3px0px4px; /* evitar */
margin: 2px3px04px;
color: #ff0000; /* evitar */
color: #f00;
padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; /* evitar */
padding: 5px;
padding: 5px10px5px10px; /* evitar */
padding: 5px10px;
font-style:italic; font-weight:bold; font-size: 90%; font-family: Arial, Helvetica, sans-serif; /* evitar */
font: italicbold90%Arial, Helveticasans-serif;
background-color:#fff; background-image: url(logo.png); background-repeat: no-repeat; background-position: 010%;/* evitar */
background: #f00url(logo.png) no-repeat010%;
No agrupar las clases con los mismos atributos
.button-group-docs a{font-family:'Lato', Arial, Helvetica, sans-serif; color:#d3ffce;text-decoration:none;margin:1em0;background:#ccc;padding:1em;}
.button-group-docs2a{font-family:'Lato', Arial, Helvetica, sans-serif; color:#fff5a2;text-decoration:none;margin:1em0;background:#ccc;padding:1em;}
.button-group-docs3a{font-family:'Lato', Arial, Helvetica, sans-serif; color:#ff6b4f;text-decoration:none;margin:1em0;background:#ccc;padding:1em;}
En lugar de rellenar suarchivo CSS con líneas de código, intente agruparlas.
.button-group-docs a, .button-group-docs2a, .button-group-docs3a {font-family:'Lato', Arial, Helvetica, sans-serif; text-decoration:none;margin:1em0;background:#ccc;padding:1em;}
.button-group-docs a{color:#d3ffce;}
.button-group-docs2a{color:#fff5a2;}
.button-group-docs3a{color:#ff6b4f;}
