1- Use formatos abreviados:
Usando el formato abreviado la depuración y la decodificación será más rápida, también sería menos probable cometer errores de escritura. Las abreviaturas funcionan generalmente en sentencias como padding, margin, border o background:
padding-top: 5px;
padding-right: 10px
padding-bottom: 15px;
padding-left: 20px;
En una sola linea sería:
padding: 5px 10px 15px 20px; (por ende el orden sería arriba, derecha, abajo, izquierda)
border-top-width: 2px;
border-top-style: solid;
border-top-color: #666;
En una linea sería:
border-top: 2px solid #666; (primero el ancho del borde, tipo de borde, color del borde)
background-image: url(../imagenes/fondo.jpg);
background-repeat: repeat-x;
background-color: #FFF;
background-position: top;
En una sola lienea sería:
background: #fff url(../imagenes/fondo.jpg) repeat-x top; (color de fondo, ruta de la imagen, repetición y posición)
Para los colores se puede acortar siempre y cuando los pares sean iguales por ejemplo #112233 sería #123 de ser #123321 no es posible acortar el color.
2-Comentar la hoja de estilos
Comenta una hoja de estilos es muy útil ya que podemos separar los estilos por secciones como por ejemplo cabecera, barra lateral, menús o de algún script, incluso para definir zonas que sospechamos puedan dar problemas de compatibilidad con navegadores diferentes, la forma de comentar es simple solo se debe agregar: /* texto del comentario * /
3-Agregar paleta de colores
Muchas veces cuando hacemos una web especialmente cuando es grande tenemos problemas para recordar la paleta de colores, sobre todo cuando hacemos modificaciones y correcciones, por eso siempre es útil y una buena práctica dejar la paleta de colores para evitar los problemas a futuro, podría ser algo así:
/ *
/ * azul claro: # 4595be
/ * azul oscuro: # 367595
/ * Rojo: # 9F1212
********************************/
4-Evitar el uso de hacks
Los hacks salidas fáciles a problemas de compatibilidad de navegadores, estos hacks lo que hacen es aprovechar las deficiencias de los navegadores para darles un valor a una clase en particular para cada navegador. Si bien es una solución tentadora, no pasa por validadores y descarta esta solución.
La mejor solución es usar condicionales como este:
<!–[if IE]> <link rel=»stylesheet» type=»text/css» href=»nombre_del_css.css» /> <![endif]–>
Hay diveras variables para estos condicionales variando el contenido dentro de [if IE]
Para todos los internet explorer: [if IE]
Para todos los navegadores menos Internet Exporer: [if !IE]
Para solo Internet Explorer 7: [if IE 7]
Para solo Internet Explorer 6: [if IE 6]
Para Internet Explorer 6 e inferiores:Â [if lt IE 7] o [if lte IE 6]
Para Internet Explorer 7 e inferiores:Â [if lt IE 8] o [if lte IE 7]
Para Internet Explorer 8 e inferiores:Â [if lt IE 9] o [if lte IE 8]
Para Internet Explorer 6 y superiores: [if gt IE 5.5] o [if gte IE 6]
Para Internet Explorer 7 y superiores: [if gt IE 6] o [if gte IE 7]
Para Internet Explorer 8 y superiores: [if gt IE 7] o [if gte IE 8]
5-Utiliza una sola imagen para los Rollover
Cuando en un efecto de rollhover se llama a una nueva imagen esta hace una nueva llamada http y por ende recién carga la imagen y da un espacio en blanco pero esto lo podemos evitar creando una sola imagen y variándola de posición con el estilo.
6-Dar formato a la hoja de estilos
Primero y muy importante es que la hoja de estilos se haga con herencias y de preferencia de forma aserrada para poder mantener un orden que posteriormente nos permita trabajar mejor y encontrar cruces en los estilos:
#principal
#principal #cabecera
#principal #cabecera h1
#principal #contenedor
#principal #pie
6-Utilice pixel para el tamaño de las fuentes no ems ni %
En este campo las opiniones van divididas aunque definitivamente prefiero los pixel como unidad de medida fija hay quienes apoyan mi creencia tal como Cameron Moll
7-No tenga miedo a usar etiquetas
Es importante no llenar el html de divs y spans, por muchos motivos siempre es útil usar las etiquetas como h1, p, a, etc.
Esto será útil también para motivos de Posicionamiento, dado que google le da prioridad a las etiquetas de h1 hacia h6.