Diez errores comunes de CSS

Recientemente he estado modificando el código en un sitio web diseñado por alguien más, cuando vi a varios errores comunes en la hoja de estilos. Pensé que sería útil señalar una lista de estos y otros errores en CSS que he visto antes.

1. 
   

   Redundantes unidades para los valores nulos

   
   El código siguiente no se necesita la unidad especificada si el valor es cero.
   
   padding:0px 0px 5px 0px;
   
   Puede estar escrito en lugar de esta manera:
   
   padding:0 0 5px 0;
   
   Lo mismo ocurre con otros estilos. Por ejemplo:
   
   margin:0;
   
   No pierda bytes mediante la adición de unidades tales como px, pt, em, etc, cuando el valor es cero. La única razón para hacerlo es cuando se quiere cambiar el valor rápidamente más adelante.De lo contrario se declara la unidad no tiene sentido. píxeles cero es lo mismo que cero puntos.
   
   Sin embargo, la línea de altura puede ser sin unidades. Así que esto es perfectamente válido:
   
   line-height:1;
   
   Además, todavía puedes usar una unidad como em si lo deseas.


2. 
   

   Colores Hexadecimal ¿Necesitas un Hash(#)?

   
   Esto es incorrecto:
   
   color:ea6bc2;
   
   Debe ser:
   
   color:#ea6bc2;
   
   O incluso:
   
   color:rgb(234,107,194);
   
   El código anterior podría ser útil para abandonar los estilos en un documento de ColdFusion, que utiliza '#' para indicar el inicio del código para ser analizado. De lo contrario, tendrá que acordarse de añadir otro hash para evitar errores. Por ejemplo:
   
   color:##ea6bc2;


3. 
   

   Condensación al Duplicar Códigos de Color

   
   No escribas código de la siguiente manera:
   
   color:#ffffff;
background-color:#000000;
border:1px solid #ee66aa;
   
   Los valores duplicados se puede condensar. Escribe el código de esta forma:
   
   color:#fff;
background-color:#000;
border:1px solid #e6a;
   
   Por supuesto que no funciona para un código como este!
   
   color:#fe69b2;


4. 
   

   Evita la repetición por condensación de Código

   
   A menos que sea probable que cambies mucho tu código, evita el uso de varias líneas en una sola línea es suficiente. Por ejemplo, al establecer los bordes, algunas personas ajustan cada lado por separado:
   
   border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #00f;
   
   Pero ¿por qué? Cada borde es el mismo! Así se condensaría:
   
   border:1px solid #00f;


5. 
   

   La duplicación es aceptable en uso de cascada

   
   No hay que olvidar que los estilos en cascada (de ahí el nombre de "Cascading Style Sheets"). Así que está bien con el estilo de un mismo elemento dos veces, si significa evitar la repetición mencionada en el punto anterior. Por ejemplo, digamos que tiene un elemento en el que sólo el borde izquierdo es diferente. En lugar de escribir cada borde por medio de cuatro líneas, sólo tiene que utilizar dos:
   
   border:1px solid #00f;
border-left:1px solid #f00;
   
   Aquí, todos los estilos de bordes de un solo color, el borde izquierdo es remodelado con un color diferente.


6. 
   

   Estilos No validos no hacen Nada

   
   La semana pasada me encontré con el código en un sitio que estaba vomitando errores en un número de comandos. Los errores eran simples: el autor tenía de entrada una serie de estilos que no se aplica al código usado. Es evidente que no habría sido analizado, por lo que el código fue inútil.
   
   Un ejemplo fue padding:auto . Ese estilo puede aplicar a la anchura y la altura, pero no con relleno.


7. 
   

   Código específico del explorador

   
   Obviamente, esto sólo funcionará en el navegador que lo soporta.A veces lo deseen, como cuando se necesita esquinas redondeadas en Firefox, pero recuerda, nadie más pueda verlas.Tienes que tener como objetivo el diseño de las páginas que los usuarios ven más o menos de la misma manera. Todavía nos encontramos con sitios que utilizan estilos en línea para agregar colores de borde de una manera que sólo funciona en Internet Explorer. No lo hagas!. Tus visitantes te lo agradecerán. O dicho de otra manera, tu sitio así puede parecer un lío en otros navegadores. ;)


8. 
   

   Desperdiciar espacio

   
   No estoy seguro de por qué, pero a veces los diseñadores les gusta perder mucho espacio en su código, utilizando un montón de innecesarios saltos de línea o espacios antes y después del código. Recuerda, sólo se va a hacer la hoja de estilos más grande, lo que significa que va a costar más a largo plazo, como el uso de tu ancho de banda será mayor.  Además tu código será más fácil de leer y depurar con menos brechas (habrá menos desplazándose hacia arriba y hacia abajo necesarios para empezar). Por supuesto que es conveniente dejar un espacio en que siga siendo legible, aunque algunas personas les gusta todo lo que se condensan, sin dejar ningún espacio en absoluto.


9. 
   

   Especificar colores sin usar palabras

   
   Bueno, todos hemos sido culpables de esto. Es mucho más fácil definir un color como ' white 'o' red ', pero no es una buena idea. Si estas confiando en que el navegador debe de saber exactamente que color es al que te refieres. Por ejemplo, ¿qué es rojo? ¿Es #f00 ? O #f33 ? O algo completamente distinto? ¿Y si se utiliza un color comolightgoldenrod ? He encontrado que a veces un color sólo funciona en algunos navegadores. Así que es una buena práctica especificar siempre el color por su código hexadecimal. Por ejemplo: el uso #fff en lugar de white . Yo no solía hacer esto, pero es necesario.


10. 
    

    Agrupación de estilos idénticos

    
    Es común ver a un estilo aplicado a muchos elementos diferentes, aunque el estilo es el mismo. Deja el estilo de cada elemento por separado y el estilo que se aplique a todos en una sola declaración algo así:
    
    h1, p, #footer, .intro {
font-family:Arial,Helvetica,sans-serif;
}
    
    También se hará la actualización del estilo mucho más fácil. Saludos!