Una vez que terminaste tu 煤ltimo proyecto es muy probable que olvides la estructura, sus numerosas clases, combinaciones de colores y estilos tipogr谩ficos. Para entender el c贸digo a帽os despu茅s de haberlo escrito necesitas crear una estructura de c贸digo sensible.
La estructura de c贸digo sensible reducir谩 dram谩ticamente la complejidad, mejorar谩 el manejo del c贸digo y simplificar谩 su mantenimiento 驴C贸mo puedes lograr una estructura sensible? Aqu铆 te ofrecemos 5 t茅cnicas para que tu c贸digo se vea bien.
Hay varias opciones para crear una estructura sensible y una de ellas es comentar. Los desarrolladores han ideado formas muy creativas de usar comentarios para mejorar la lectura y el mantenimiento de c贸digo CSS. Este tipo de comentarios se combinan generalmente con gu铆as de estilo CSS, partes de c贸digo CSS que se supone dar谩n a los desarrolladores algunas claves para el entendimiento de la estructura del c贸digo e informaci贸n de fondo relacionada con 茅l.
Este art铆culo presenta 5 t茅cnicas de codificaci贸n que pueden mejorar mucho el manejo y simplicar el mantenimiento de tu c贸digo. Puedes aplicarlas a CSS, otras hojas de estilo o cualquier lenguaje de programaci贸n que uses:
1. Divide y conquista tu c贸digo
Primero ten en cuenta la estructura e identifica los m贸dulos m谩s importantes de tu c贸digo CSS. En la mayor铆a de los casos es 煤til seleccionar el orden de los selectores CSS dependiendo del orden de los divisores (div鈥檚) y las clases. Antes de empezar a escribir el c贸digo, agrupa elementos comunes en secciones separadas y nombra cada grupo con un t铆tulo. Por ejemplo, puedes seleccionar Estilo Globales (body, p谩rrafos, listados, etc.), Layout, Cabeceras, Estilos de Texto, Navegaci贸n, Formularios, Comentarios y Extras.
Para separar los fragmentos de c贸digo claramente, utiliza banderas o comentarios apropiados (cuantos m谩s s铆mbolos *- tengas en tu c贸digo, m谩s destacado ser谩 el encabezado). En la hoja de estilos servir谩n como un encabezado para cada grupo. Antes de aplicar una bandera a tu c贸digo, aseg煤rate de que puedes reconocer los bloques individuales de inmediato al escanear el c贸digo. De esta manera sabr谩s si este recurso sirve o no.
Sin embargo, esto puede no ser suficiente para grandes proyectos cuando un m贸dulo solo es muy largo. Si este es el caso, es probable que necesites dividir el c贸digo en archivos m煤ltiples para mantener una visi贸n general de grupos individuales de fragmentos de c贸digo. En estas situaciones las hojas de estilo maestras son usadas para importar grupos. Al usar hojas de estilo maestras generar谩s consultas innecesarias al servidor, pero producir谩s un c贸digo limpio y elegante muy f谩cil de reutilizar, f谩cil de entender y f谩cil de mantener. Y s贸lo necesitas incluir la hoja de estilo maestra en tus documentos.
|
Para proyectos importantes o grandes equipos de desarrollo tambi茅n es bueno tener un breve registro de actualizaciones y alguna informaci贸n adicional sobre el proyecto. Por ejemplo, puedes agregar informaci贸n de a qui茅n le ha sido asignado este archivo CSS y cu谩l es su uso principal.
2. Define una tabla de contenidos
Para tener una visi贸n general de la estructura del c贸digo podr铆as considerar definir una tabla de contenidos al principio de tu archivo CSS. Una posibilidad de integrar la tabla de contenidos es mostrar una visi贸n de 谩rbol de tu diagramaci贸n, con los IDs y clases en cada rama del 谩rbol. Seguramente usar谩s palabras clave como 鈥渆ncabezado de secci贸n鈥 o 鈥済rupo de contenido鈥 para poder ir a un c贸digo espec铆fico r谩pidamente.
Tambi茅n seleccionar谩s algunos elementos que vayas a cambiar con frecuencia cuando el proyecto se haya terminado. Estas clases y IDs podr铆an aparecer tambi茅n en tu tabla de contenidos para que las encuentres f谩cilmente cuando sea necesario sin necesidad de escanear todo el c贸digo o recordar cu谩les fueron las clases y IDs que hab铆as usado.
|
..o algo as铆:
|
Otra posibilidad es usar numeraci贸n simple sin indentaci贸n. En el ejemplo de abajo, una vez que necesites saltar a la secci贸n RSS, s贸lo deber谩s usar la herramienta de b煤squeda para encontrar en tu c贸digo 8. RSS. Es f谩cil, r谩pido y efectivo.
|
|
Definir una tabla de contenidos permite a otras personas una lectura y entendimiento mucho mayor de tu c贸digo. Para grandes proyectos podr谩s incluso imprimir la tabla y tenerla a mano para leer el c贸digo. Cuando trabajas en equipo no deber铆as subestimar esta ventaja.
3. Define tus colores y tipograf铆a
Como todav铆a no trabajamos con constantes CSS necesitamos darnos cuenta r谩pido de cu谩les son las 鈥渧ariables鈥 que estamos usando. En desarrollo web, los colores y la tipograf铆a son considerados muchas veces como 鈥渃onstantes鈥, valores que se repiten muchas veces a lo largo del c贸digo.
Como alguna vez declar贸 Rachel Andrew, 鈥渦na forma de manejar la falta de constantes en archivos CSS es crear algunas definiciones al inicio del documento a trav茅s de comentarios, para definir esas 鈥渃onstantes鈥. Una forma com煤n de hacerlo es crear un glosario de color. Esto significa que tendr谩s una breve referencia de los colores utilizados en el sitio para evitar usar colores alternativos por error y, si necesitas cambiar los colores, todo estar谩 a mano para hacer los reemplazos que necesites.鈥
|
De manera alternativa puedes describir estos colores. Para un color determinado, podr谩s mostrar las secciones de ese sitio que usan esos colores. O viceversa, para una secci贸n determinada puedes describir los elementos de dise帽o y color que se usan鈥
|
Lo mismo con la tipograf铆a. Agrega notas para entender el 鈥渟istema鈥 detr谩s de las definiciones.
|
4. Ordena las propiedades CSS
Cuando escribes c贸digo a veces es 煤til aplicar cierto tipo de formateo para ordenar las propiedades CSS, para hacer que el c贸digo sea m谩s legible, m谩s estructurado y m谩s intuitivo. Algunos desarrolladores tienden a poner los colores y fuentes primero, otros prefieren poner primero las asignaciones 鈥渕谩s importantes鈥 como las relacionadas con la posici贸n. Con esta misma idea, los elementos tambi茅n se ubican seg煤n la tipolog铆a de un sitio y la estructura de su diagramaci贸n. Y esto puede aplicarse tambi茅n a los selectores CSS:
|
Algunos desarrolladores usan algo muy interesante: agrupan propiedades en orden alfab茅tico.
|
No importa el formato de agrupaci贸n que uses, aseg煤rate de definir claramente el formato y el objetivo que quieres alcanzar. Tus colegas agradecer谩n tu esfuerzo. Y t煤 estar谩s agradecido de que mantengan tu formato.
5. 隆La indentaci贸n es tu amiga!
Para una mejor vista general de tu c贸digo es bueno que consideres el uso de las l铆neas para peque帽os fragmentos de c贸digo. Este tipo de estilo puede producir resultados desordenados cuando defines m谩s de 3 atributos para un selector dado. De todos modos, usado con moderaci贸n, puedes hacer resaltar la relaci贸n entre los elementos de una misma clase. Esta t茅cnica mejorar谩 la legibilidad de tu c贸digo cuando debes buscar un elemento espec铆fico en tu hoja de estilos.
|
Cuando recuerdas exactamente lo que has hecho, podr谩s arreglarlo f谩cilmente. 驴Pero qu茅 sucede cuando has hecho muchos cambios en un d铆a y no puedes acordar exactamente qu茅? Chris Coyier sugiere una soluci贸n interesante para resaltar cambios recientes en tu c贸digo CSS. Simplemente indentando las l铆neas nuevas o modificadas. Tambi茅n puedes usar comentarios.
|
Conclusi贸n
Las hojas de estilo CSS son de gran ayuda siempre y cuando se usen bien. Ten en mente la posibilidad de eliminar cualquier hoja de estilo que no te ayude a mejorar el entendimiento del c贸digo o que no tenga una buena estructura. Evita muchas hojas de estilo para muchos elementos. Tu meta es lograr un c贸digo legible y f谩cil de mantener. Ap茅gate a 茅l y te ahorrar谩s muchos problemas.
Fuente: Smashing Magazine
Lunes, 5 de Mayo de 2008 a las 17.55
Ustedes son unos grosos me parece