Después de completar un trabajo inicial, muchas personas olvidan la estructura y los detalles del proyecto. Sin embargo, el código no estará completamente finalizado de inmediato. Habrá trabajos de mantenimiento continuo durante el tiempo restante y es posible que usted no pueda completar estos trabajos. Por lo tanto, un código bien estructurado puede optimizar en gran medida su mantenibilidad. Aquí hay cinco formas de mejorar la capacidad de mantenimiento de sus archivos CSS, que es una mejor guía de estilo CSS.
1. Divide tus estilos
Para proyectos pequeños, antes de escribir código, divida el código en varios bloques según la estructura de la página o el contenido de la página y proporcione comentarios. Por ejemplo, puedes separar estilos globales, diseños, estilos de fuente, formularios, comentarios y otros en varios bloques diferentes para seguir trabajando.
En proyectos más grandes, esto obviamente no tendrá ningún efecto. En este punto, el estilo debe dividirse en varios archivos de hojas de estilo diferentes. La hoja de estilo maestra a continuación es un ejemplo de este enfoque y su trabajo principal es importar otros archivos de estilo. El uso de este método no solo puede optimizar la estructura de estilo, sino que también puede ayudar a reducir algunas solicitudes innecesarias del servidor. Hay muchas formas de descomponer archivos y la hoja de estilo maestra utiliza la más común.
/*------------------------------------------------ ------------------ [Hoja de estilo maestra] |
Al mismo tiempo, para proyectos grandes, también puede agregar indicadores de actualización para archivos CSS o algunas medidas de diagnóstico, que no se detallarán aquí.
2. Crear índice de archivos CSS
Para comprender rápidamente la estructura de todo el archivo CSS, es una buena opción crear un índice de archivo al principio del archivo. Un método posible es construir un índice en forma de árbol: la identificación estructural y la clase pueden convertirse en una rama del árbol. como sigue:
| /*------------------------------------------------ ------------------ [Disposición] * cuerpo + Encabezado / #encabezado + Contenido / #contenido - Columna izquierda / #leftcolumn - Columna derecha / #rightcolumn - Barra lateral / #barra lateral -RSS/#rss - Buscar / #buscar - Cajas / .box - Blog paralelo / #sideblog + Pie de página / #pie de página Navegación #barra de navegación Anuncios .anuncios Encabezado de contenido h2 ——————————————————————-*/ |
O también se puede hacer esto:
/*------------------------------------------------ ------------------ [Tabla de contenido] -------------------------------------------------- ------------------*/ |
Otra forma es simplemente enumerar el contenido primero, sin sangría. En el siguiente ejemplo, si necesita saltar a la sección RSS, simplemente busque 8.RSS.
/*------------------------------------------------ ------------------ [Tabla de contenido] -------------------------------------------------- ------------------*/ /*------------------------------------------------ ------------------ |
Definir un estilo de búsqueda de este tipo puede facilitar de manera efectiva que otros lean y aprendan su código. Cuando trabaje en proyectos grandes, también puede imprimir la búsqueda para consultarla fácilmente al leer el código.