Mantener los archivos CSS pequeños y organizados es muy importante, sobre todo si actualizarás tu sitio en el futuro.
Aquí te doy una serie de técnicas que se utilizan para mejorar la organización y el tamaño de los archivos CSS, haciéndolos más eficientes.
Tener el código CSS más racionalizado te ahorrará muchísimo tiempo a largo plazo, por lo más importante es hacer las cosas bien.
En primer lugar, debes tratar de mantener el código CSS dentro de un único archivo, normalmente llamado style.css o estilos.css, y en una carpeta aparte.
Tener un archivo de estilos único en tu sitio web, mantiene todo unido en un solo lugar lo que hace que el proceso de edición sea más ordenado.
Codificando
Con el fin de trabajar mas eficientemente en los archivos CSS, es importante codificar con un buen editor de código como TextWrangler en Mac o Notepad + + y Dreamweaver, en Windows.
Esto tiene una serie de ventajas importantes. Además de ser fácil de usar, un programa como TextWrangler maneja colores diferentes para cada parte del código que ayuda en el progreso de escritura. Esto es muy útil para asegurarse de que todos los estilos que se han definido, están escritos correctamente ya que el estilo no cambiará de color a menos que sea reconocido por TextWrangler como un estilo CSS válido.
Tabs es otra buena característica de TextWrangler que te permite mantener abiertos más de un archivo a la vez.
Para simplificar aún más los archivos CSS que es una buena idea establecer un diseño de escritura que se utiliza en todas las 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 una llave abierta “{“ seguido de una nueva línea con sangría para comenzar un estilo.
EJ:
#caja {
color: #ff0000;
}
Siguiendo esta técnica, será más organizado y más fácil de codificar tu código CSS.
Organizar por ubicación
En cualquier pagina web, el número de ID de CSS y las clases utilizadas pueden llegar ser, muchísimas, por lo que es vital que tu hoja de estilo CSS está bien organizada.
Una de las técnicas que es extremadamente útil es la de declarar las propiedades y clases dentro del archivo CSS, ubicadas en el mismo lugar en que aparecen en la propia página web o documento HTML.
Por ejemplo, colocando el estilo CSS de la cabecera, en la parte superior de la hoja de estilos y el estilo del pie de página, en la parte inferior.
Al mantener esta organización, sabrás exactamente dónde mirar para encontrar el estilo que desea editar.
Por otra parte, es conveniente nombrar los elementos HTML con los nombres obvios, como cabecera, pie, sidebar, etc , etc
Esto permitirá trabajar de forma más rápida y organizada.
Comentarios
Los comentarios de CSS con muy útiles para distinguir las diferentes partes de la hoja de estilos.
Si has estructurado tus hojas colocando los estilos de la cabecera hacia la parte superior y viceversa, entonces puedes utilizar los comentarios CSS para marcar el inicio y el final de estas secciones o bloques.
El uso de los comentarios CSS es simple. En cualquier lugar dentro de la hoja de estilos iniciamos un comentario con / * y luego lo terminamos con * / .
EJ:
/* Comienzo de la cabezcera */
Cualquier cosa dentro de estos símbolos, no será analizado por el navegador.
Otro uso de los comentarios CSS podría ser el de dejar notas a tus clientes o propietario del sitio, por si desean realizar más ediciones en el futuro, esto puede ser una guía muy útil.
Evitar la duplicación
Debido a la naturaleza de la CSS, los IDs y las clases heredan automáticamente el estilo de su padre. Esto elimina la necesidad de duplicar el estilo.
La técnica más sencilla es definir una serie de estilos clave en el inicio de la hoja de CSS. Definiendo estilos universales para los enlaces y el texto, eliminando la necesidad de tener que definir un estilo para cada elemento HTML.
Estos simples consejos te ayudarán a mantener tus hojas de estilo CSS mucho más ordenadas y optimizadas.
Ponlas en práctica!!
*** RECURSO RECOMENDADO:
Curso de Completo Maquetaci
ón con XHTML y CSS
Deja una respuesta