 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
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.
28/11/07 - 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.
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.
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.
+ 1 categoria relacionada
+ 1 comentario (Añadir)
+ 1 comentario no revisado
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Manu Gutierrez*
URL: http://www.tufuncion.com Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestra un comentario revisado |
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.
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
