10 errores comunes en los css

Esta es una recopilación de errores comunes en las hojas de estilo. Es bastante provechoso hacer una lista con estos y otros errores comunes.

1.Uso innecesario del valor 0

El código siguiente no necesita la unidad especificada si el valor es cero.

padding:0px 0px 5px 0px;

En su lugar puede ser escrito de esta manera:

padding:0 0 5px 0;

De la misma manera es igual para otros estilos. Ej.:

margin:0;

No malgastes espacios agregando unidades tales como px, pt, em, etc, cuando el valor es cero. La única razón de hacer esto es si necesitas cambiar estos valores más tarde. Si no declarar estas unidades no tiene sentido. Los pixeles cero son iguales que los puntos cero.

Sin embargo,line-height puede no tener unidad.Por eso es válido lo siguiente:

line-height:1;

De cualquier manera puedes utilizar una unidad en concreto como em si lo deseas.

2.Los colores en formato hexadecimal necesitan una almohadilla

Esto está mal:

color: ea6bc2;

Debe ser:

color: #ea6bc2;

O esto otro:

color: rgb (234.107.194);

3.Valores duplicados en los códigos de colores

No escribir el código de esta manera:

color: #ffffff;
background-color:#000000;
border:1px solid #ee66aa;

Los valores duplicados pueden ser omitidos.Escribiendo los códigos de esta manera:

color:#fff;
background-color:#000;
border:1px solid #e6a;

¡Por supuesto esto no debes hacerlo con códigos como este!

color: #fe69b2;

4.Evitar repeticiones de código innecesaria

Evita usar varias líneas cuando lo puedes conseguir con una sola. Por ejemplo, al fijar los bordes, algunas veces se debe hacer por separado pero en casos como el siguiente no es necesario:

border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #00f;

Podríamos resumirlo en una única línea esta:

border:1px solid #00f;

5.La duplicación es necesario con los estilos en cascada

En los estilos en cascada es aceptable repetir el mismo codigo para un elemento elemento dos veces, si significa evitar la repetición mencionada en el punto arriba. Por ejemplo, digámos que tenermos un elemento donde solamente es diferente el "border" izquierda. En vez de poner cada "border" escrito usando cuatro líneas, uso sólo dos:

border:1px solid #00f;
border-left:1px solid #f00;

En este caso primero definimos todos los "borders" con el mismo color pero más tarde para ahorrarnos dos lineas de código redefinimos el "border" izquierda a otro color, de esta manera hemos ahorrado dos líneas de código. <7p>

El ejemplo malgastando espacio quedaría así:

border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #f00;

Obviamente supuestamente este ahorro de carga supone un retraso en la carga de la página pues estamos definiendo el "border" izquierda dos veces, pero la carga de este proceso es insignificante.

6.Los estilos inválidos no hacen nada

Un ejemplo es suficiente para explicar este error:

padding:auto

Este estilo solo puede ser aplicado a width y height pero no a padding.

7.Código Específico para cada navegador

Obviamente este tipo de código solo funcionará en el navegador al que va destinado , pero es hay que pensar si es rentable puesto que solo algunos usuarios podrán apreciar esos cambio. <7p>

8.Espacio perdido

No estoy seguro del porqué pero muchos diseñadores estan empeñados en desaprovechar el espacio en su código, usando un montón de innecesarios saltos de línea. Recuerda que eso sólo lo verás tu y estas haciendo un uso excesivo de ancho de banda. Tambien tu código será más facil de leer puesto que tendrá menos "boquetes".

Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les encanta condensar todo, no dejando ningún espacio.

9.Especificar los colores sin usar palabras

Definir los colores usando las palabras que lo definen no es una buena idea puesto que estaríamos confiando en el navegador para que el interprete que color y código debe aplicar.Las tonalidades para un mismo nombre de color cambian mucho de un navegador a otro.

Es una buena práctica especificar siempre el color por su código hexadecimal.

Ej.: utilizar "#fff" en lugar de blanco.

10.Agrupar estilos idénticos

Es común ver los estilo escritos una y otra vez con el mismo código, aún cuando el estilo es igual.

Sería conveniente agruparlos y asi optimizaríamos espacio:

h1, p, #footer, .intro {
font-family:Arial,Helvetica,sans-serif;
}

Tambien nos hara mucho más facil la tarea de actualizar el código.

Compartir

Comentarios

Anibal

04/12/2007
Es medianamente interesante, pero hay cosas que realmente no me gusta, como por ejemplo el título, la mayoría de las cosas que mencionas son para optimizar ancho de banda y no errores.

Yo en mi caso, prefiero que cuando aparece un 0 se ponga la unidad en la cual está medida, eso lleva a que si necesitas modificar no sea tan tedioso. El de los valores en hexadecimal, prefiero la forma #ffffff a #fff para blanco por ejemplo, y no creo que sea un error sino convenciones para escribir código, y un par de cosas mas que ahora no recuerdo pero que realmente no son errores sino que ahorran bytes para transmitir por la red.

No te olvides que uno es el diseñador de la página y que en algún momento si quiere puede llegar a querer cambiarla y si no hace código css que el entienda esa tarea se vuelve titánica, como bien dijiste los que navegan la página no ven el css, pero puedes tener 2 versiones y usar algún programa que te comprima el código css para subirlo al servidor.

tfeserver

06/12/2007
Hola,

"Este estilo solo puede ser aplicado a width y height pero no a padding."
El attributo "auto", también se puede utilizar para "margin". Creo que es necesario decirlo, ya que es un muy bien metodo para centrar los elementos.

Un saludo :)

JuanM

03/4/2010
auto
"Este estilo solo puede ser aplicado a width y height pero no a padding."

overflow ?

fani

29/1/2015
Buena información
Gracias por tu información, he aprendido varias cositas :D gracias por compartir