• Hosting Joomla Spanish
  • Hosting Joomla Spanish

Recursos Técnicos

Imprimir

Sugerencias para la Edición de Hojas de Estilo CSS

Las plantillas Joomla! confían en CSS para su estilo. Muchos nuevos usuarios no están familiarizados con CSS y, cuando empiezan, caen fácilmente en la tendencia a usar muchos más divs de los necesarios, lo que agranda el archivo en proceso. Un archivo CSS innecesariamente grande reduce la velocidad de carga de una página en un sitio.

Hay maneras de reducir el tamaño de su archivo CSS. En este artículo proporcionaremos algunas sugerencias básicas. Una aclaración, este artículo se refiere a Joomla, no a HTML/XHTML & CSS.

Puede haber leído páginas en las que se sugiere a la gente que use CSS reducido. Esto significa usar selectores más cortos para hacer lo mismo que están haciendo con mucho más código de lo necesario. Veamos algunos ejemplos:

Valores de Longitud

En CSS todos los valores de longitud deben tener un valor unitario inmediatamente después, sin espacios entre ellos.  Ejemplo:

Código:

margin:10 px; Mal!
margin:10px; Bien.

Pero hay dos excepciones a esta regla. El valor cero (0) y la función line-height. La función line-height no necesita una unidad de valor. El cero es cero no importa a qué unidad se relaciona. Por ejemplo: 0em & 0px todavía es 0. ¿Por qué usar más código del que necesita ? Ejemplo:

Código:

margin:0px; Mal
margin:0; Bien

CSS Reducido: Margen, Relleno y Borde

Ahora, miremos más detenidamente un ejemplo de CSS reducido. Un error común de la gente es escribir muchos más selectores de los que se necesitan. Ejemplo:

Código:

margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

Todos los márgenes son cero, así que debería escribirse como:

Código:

margin:0; 

¿Ve cuánto espacio puede ahorrar?

Los márgenes (margin), rellenos (padding) y bordes (borders) se escriben en el sentido de las agujas del reloj, empezando desde arriba (las 12), siguen así: arriba - derecha - abajo - izquierda.

Así, tenemos este ejemplo:

Código:

margin-top:1.5em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

Podemos ahorrar tiempo y espacio usando CSS reducido.

Código:

margin:1.5em 0 2em 0.5em;

Usando nuestra dirección de reloj arriba-derecha-abajo-izquierda, podemos ver que una línea corta significa exactamente la misma cosa que el grupo de cuatro selectores de arriba.

Relleno (Padding) y borde (borders) pueden escribirse de la misma modo que utilizamos vimos para margen (margin).

CSS Reducido: Nombres de DIVS

Otro ahorro de espacio es con la forma en que escribimos los nombres del elemento dentro de los selectores.

Por ejemplo: div#footer = #footer (así que no es necesario escribir "div").

CSS Reducido: Colores

Ahora los colores. Los colores se introducen generalmente como dígitos hexadecimales, precedidos por un octothorpe (Un octothorpe también es conocido como un símbolo de la libra en algunos países y como un símbolo de resumen en algunos otros, se representa por #).

Donde tiene tres pares de dígitos hexadecimales puede usar CSS reducido omitiendo cada segundo digito. Ejemplo:

Código:

#ffffff = #fff #000000 = #000 #336699 = #369

Nota: Esto funciona con cualquiera de los tres pares de dígitos hexadecimales en los que los dígitos están en pares secuenciales. #eaeaea por ejemplo, no son pares de “ee” y “aa” en orden y #eee producirían un color diferente al que buscaba con #eaeaea.

Una de las ventajas de limpiar el código CSS usando la reducción es que puede leerlo más fácilmente y puede ver donde utiliza los mismos selectores para diversas áreas del código.

Por ejemplo, puede tener fuentes, colores, colores del fondo, etc usados del mismo modo en varios elementos diferentes. Por ejemplo si usamos el mismo color para h1, h2 y h3 y todos en negrita.

Código:

h1 { background: #fff; color: #000; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 3em; }
h2 { background: #fff; color: #000; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 2em; }
h3 { background: #fff; color: #000; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 1em; }

Esta redacción, ¿no ocupa mucho espacio?

Aquí está la misma cosa escrita en CSS reducido:

Código:

h1, h2, h3 { background: #fff; color: #000; font-family: arial, helvetica, sans-serif; font-weight: bold; }
h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1em; }

Reducción del Tamaño de Archivo

Al desarrollar una plantilla, es más fácil leer el CSS cuando se escribe de la manera en que se ha demostrado. Pero antes de subirlo al servidor podemos reducir el tamaño del archivo aún más.
Una forma de hacer esto y todavía mantener legibilidad, es poner los selectores para cada elemento en una línea. Por ejemplo

Código:

h2 {font-size: 2em;}

Una vez tenga construido el sitio y no piense en cambiar el CSS rápidamente, podría optimizarlo. Una gran herramienta para la optimización está aquí: http://cdburnerxp.se/cssparse/css_optimiser.php

Nota: Esto eliminará los espacios blancos y dará un tamaño de archivo menor. Hacer esto hará que la lectura sea más difícil, así que asegúrese de tener una copia local no optimizada.

Ultima Sugerencia

Pudo notar que se escribieron los ejemplos en minúsculas. Esta es una muy buena costumbre a seguir. Cuando el CSS se utiliza con XHTML, los nombres de los elementos en selectores son sensibles a mayúsculas o minúsculas. De manera que, #FOOTER es diferente a #footer. Si está intentando validar en XHTML 1.0 o más alto, DEBE utilizar todo en minúscula. Adquirir el hábito de usar minúsculas también nos hace referir a otro problema común en los nuevos usuarios: los cuales suelen utilizar un tipo de estilo (mayúsculas o minúsculas) en el index.php de su plantilla, y otro diferente en el CSS. Si escribe div id="FOOTER" en su index.php y #footer en su CSS, se preguntará que ha hecho mal cuando el footer no cambie. Lo que escribe dentro de HTML/XHTML *DEBE* ser la forma en que escribe los elementos en su CSS.

 Texto original: "CSS tips", por Elpie (Mambo Guru).
 Traducido por: Equipo de Traducción y Documentación de Joomla! Spanish.