Clicky

¿Cómo optimizar tus hojas de estilo CSS?

Crear archivos CSS más pequeños y mejor organizados que sean fáciles de navegar y editar

hojas de estilos CSS Mantener los archivos CSS pequeños y organizados es muy importante, sobre todo si vas gastar tiempo en la edición de tu sitio en el futuro (o si, por ejemplo, tus posibles clientes van a usar el código).

Por suerte, hay una serie de diferentes técnicas que pueden utilizarse para ayudar a la organización y el tamaño de los archivos CSS con el fin de hacerlos más eficientes.

Tener un código CSS más racionalizado te ahorrará a largo plazo tiempo y estrés por lo que es importante hacer las cosas bien.

En primer lugar, mantener un estilo único, normalmente llamado style.css, es un buen principio para empezar en la organización del CSS. Tener un estilo único para la mayoría (si no todo) el sitio web mantiene todo unido en un solo lugar lo que hace el proceso de edición más racionalizado.

Código del estilo CSS

código del estilo CSS


Con el fin de mantener tus archivos CSS más eficientes es importante comenzar con un buen editor de código, como TextWrangler en Mac o Notepad++ en Windows. Esto tiene una serie de ventajas importantes. Además de ser fácil de usar, un programa como TextWrangler también muestra las partes del código con diferentes colores, lo que ayuda en el progreso de la codificación. Esto es muy útil para asegurarse de que todos los estilos que se han definido están escritos correctamente. El estilo no cambiará de color a menos que sea reconocido por TextWrangler como un estilo CSS. Tabs es otra buena característica de TextWrangler que te permite mantener abiertos más de un archivo a la vez haciendo más fácil el cotejo.

Para simplificar aún más los archivos CSS es una buena idea establecer un diseño de conjunto que se utilizará en todas sus hojas de estilo CSS. Quizás la técnica más comúnmente utilizada es definir el ID o la clase (con # o . respectivamente.) Y luego un paréntesis abierto { seguido de una nueva línea con sangría para comenzar un estilo, tal que así:

#header {
 width:500px;
 height:250px;
 }

Siguiendo esta técnica comúnmente utilizada el estilo estará más organizado y será más fácil de codificar. Las siguientes técnicas serán todas de ayuda para asegurarte que tu diseño es constante a través de los archivos CSS.

Organiza por localización

organizar el estilo CSS


En cualquier sitio el número de ID y las clases utilizadas de CSS pueden llegar fácilmente a un gran número, por lo que es vital que tu hoja de estilo CSS esté bien organizada. Una de las técnicas que es extremadamente útil es organizar las identificaciones y clases por el lugar en que aparecen en la propia página web. Por ejemplo, colocando el estilo CSS para la cabecera hacia la parte superior de la hoja de estilos y el estilo del pie de página hacia la parte inferior. Al mantener esta constante en el código en todo el sitio web, cada vez que abras una hoja de estilo que has creado sabrás exactamente dónde mirar para encontrar el estilo que deseas editar.

Por otra parte, para la organización de ayuda adicional de estilos es conveniente nombrar los elementos con los nombres obvios, como cabecera, pie de página, barra lateral, contenido principal, etc., lo que te permitirá trabajar con lo que a cada pieza de diseño se refiere, además ayudar a la organización. Si los elementos cambian su propósito, sin embargo, asegúrate de que sus nombres reflejen los cambios ( tener un elemento denominado encabezado que se encuentre en la parte inferior de la página puede ser muy confuso y hace la localización por la ubicación una tarea más desalentadora).

Comentarios CSS

comentarios CSS


Esto nos lleva a utilizar los comentarios de CSS dentro de nuestras hojas de estilo. Aunque no siempre se usan, los comentarios de CSS son muy útiles para distinguir las diferentes partes de la hoja de estilos. Si has estructurado tus hojas de estilo con estilos relacionados con la cabecera hacia la parte superior y viceversa, entonces puedes utilizar los comentarios CSS para marcar el inicio y el final de las secciones diferentes, tales como el encabezado, pie de página o los elementos de contenido principal.

El uso de comentarios CSS es simple. En cualquier lugar dentro de la hoja de estilos inicia el comentario con /* y luego asegúrate de terminar el comentario con */ . Fundamentalmente, cualquier cosa dentro de los comentarios, ya sea en código o en texto, no será analizado por el navegador, lo que hace a los comentarios CSS muy útiles para dejar notas y descripciones relacionadas con diversas partes de la hoja de estilos.

Tal vez otros dos usos de los comentarios CSS podrían ser la de dejar comentarios a tus clientes, por lo que si desean realizar más ediciones a su sitio en el futuro puedan tener una guía en su lugar para ayudar. Además, puedes poner diferentes estilos para un mismo ID o clase que deseas conservar para su posible uso o para su análisis. En lugar de etiquetar las identificaciones y las clases con un 2 al final, por ejemplo, header2, dejarás que ese estilo no sea analizado simplemente envolviendo lo que sería header2 en /* y */ .

Además de mantener tu hoja de estilo más organizada, con el uso de la 'técnica de 2' puede además no convertirlo en desordenado, esta técnica también ayuda en la creación de diferentes versiones de un estilo dentro de la hoja de estilos de una manera no obstructiva con la facilidad de despliegue (copiar y pegar en lugar de cambiar los números y eliminar el estilo antiguo).

Sin embargo, mientras que los comentarios de CSS son muy útiles también es importante tener en cuenta el tamaño y la longitud de la hoja de estilos, para equilibrarla en consecuencia. Los comentarios no deben ocupar más espacio que el CSS real, sino que deben ser cortos y concisos. También es importante tener en cuenta esta en relación con diferentes versiones. ¿Realmente necesitas todas las versiones que has guardado dentro de tu hoja de estilo? ¿Podría salvar una hoja de estilo duplicada en otra parte? Tener múltiples versiones de estilos dentro de su hoja de estilo puede ser confuso, así que la consideración de alternativas es crucial, como guardar los archivos duplicados.

Evitar la duplicación

Una vez que la hoja de estilo está estructurada en una forma accesible puede ser más fácil seleccionar duplicaciones innecesarias dentro de un estilo. Debido a la naturaleza del CSS, las identificaciones y las clases heredan automáticamente el estilo de su padre, lo que elimina la necesidad de duplicar el estilo. Quizás la técnica más sencilla es definir una serie de estilos clave en el inicio de la hoja de estilos. Definición de estilos universales para los enlaces y el texto es útil y elimina la necesidad de definir un estilo para cada constante de identidad y de clase. Cabe destacar que esto también es una forma efectiva de mantener un estilo consistente a través de un sitio web y también tiene un impacto positivo en la reducción del tamaño de la hoja de estilos.

Utilizando herramientas como Google Chrome"™s Inspector o Firebug para Firefox, es posible ver que estilos se heredan y de dónde, lo que además ayuda en la eliminación de las duplicaciones no deseadas dentro de tu hoja de estilos.

Usa lo que necesites

Siguiendo, para simplificar aún más el CSS hay que tener en cuenta lo que las clases CSS están implementando. ¿No es necesario utilizar todas? Es fácil dejarse llevar y definir las clases que directamente no se necesitan (las que crees que puedes necesitar en el futuro), con el fin de mantener la hoja de estilos CSS racionalizada, pequeña y organizada, sólo debes utilizar las clases CSS que son esenciales para el funcionamiento de tu sitio web. Sólo el código que se necesita. A fin de lograr evitar la duplicación de este estilo, como se dijo, hay que recordar eliminar estilos no utilizados y los que ya no son relevantes.

Conclusión

Siguiendo estas sencillas técnicas es posible crear archivos CSS más pequeños y mejor organizados que sean fáciles de navegar y editar, tanto ahora como en el futuro, para ti y tus clientes.

Jesus_Caceres