Evitando errores CSS

cssErrores 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;}



Usamos cookies para brindarle la mejor experiencia en línea. Al aceptar que acepta el uso de cookies de acuerdo con nuestra política de cookies.

Privacy Settings saved!
Configuracion de Privacidad

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

These cookies are necessary for the website to function and cannot be switched off in our systems.

In order to use this website we use the following technically required cookies
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

Rechazar todos los servicios
Acepto todos los servicios