CSS: 3 simples pasos para que sus hojas de estilo sean más eficientes

En este artículo se pretende cubrir como podemos  generar las hojas de estilo en su forma más eficiente.

1. Una hoja de estilo debe ser fácil de leer.
2. Una hoja de estilo debe ser fácil de mantener.
3. Una hoja de estilo debe ser bien comentada
4. El tiempo para alcanzar estos objetivos no debería afectar negativamente el tiempo de desarrollo de un sitio web.

Sugerencia 1: Comentario de su hoja de estilo

Lo primero sería componer la hoja de estilos por secciones. Esto tiene una serie de beneficios. Es decir, cabecera, navegación, el pie de página, etc -, esto hace que sus hojas de estilo sean mucho más manejables. El segundo beneficio es la legibilidad. Le tomará sólo un momento tener en cuenta cuando la sección de encabezado y la sección de navegación comienza.

1.   /**** Cabecera ****/
2.  /**** Contenido ****/

El segundo es explicar el uso poco ortodoxo de los estilos. Esto le permite recordar rápidamente la razón por la que ha insertado un truco o propiedad. Esto puede ser muy útil a la hora de regresar a una hoja de estilo después de un número de meses, y también ayudará a entender a otros desarrolladores porque se utilizó esa declaración.

1.  ! Importante / ** Hack para hacer la navegación del IE correcta ** /

Sugerencia 2: Organice sus estilos alfabéticamente.

Eche un vistazo al siguiente ejemplo.

1   .#header {
2.            width:200px;
3.          margin:0 auto;
4.            height: 80px;
5.            background:url(../images/header.png) no-repeat;
6.            padding:1px 0;
7.    }

Ahora compárelo con la siguiente.

1.    #header {
2.            background:url(../images/header.png) no-repeat;
3.            height: 80px;
4.            margin:0 auto;
5.            padding:1px 0;
6.            width:200px;
7.    }

Por orden alfabético la lista de atributos mejora la legibilidad de la hoja de estilos. Es mucho más fácil elegir rápidamente un elemento y modificarlo.

Sugerencia 3: Ficha de elementos anidados

Esto es algo similar a  lo de comentar sus hojas de estilo. En un esfuerzo para hacer su hoja de estilo más fácil de leer es una buena idea la ficha de elementos anidados. Veamos el siguente ejemplo.

01.    #header{ }
02.
03.            #header #logo { }
04.
05.                    #header #logo a { }
06.
07.                    #header #logo a:hover { }
08.
09.    #container { }
10.
11.            #container #sidebar { }
12.
13.            #container #content { }

Ahora compárelo con el siguiente.

01.    #header{ }
02.
03.    #header #logo { }
04.
05.    #header #logo a {}
06.
07.    #header #logo a:hover { }
08.
09.    #container { }
10.
11.    #container #sidebar { }
12.
13.    #container #content { }

La Tabulación de elementos anidados le permite ver rápidamente lo que está anidado y lo que a su vez le permite ver fácilmente cómo se anidan los elementos que afectan a uno u otro.

Dejar un comentario

*