7 Puntos a considerar para desarrollar el CSS

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.

JE Image © 2020