Consejos para limpiar y mantener un gran archivo css

Question

Acabo de comenzar este nuevo trabajo, donde como diseñador tengo que mantener el archivo CSS para nuestra aplicación web. En este momento abarca casi 7000 líneas, pesa más de 160 kb y tiene cientos de reglas importantes.

Me gustaría reorganizar el archivo, dividirlo en secciones secundarias, limpiarlo y homogeneizar su sintaxis.

Pero parece una gran empresa y el archivo y la aplicación son tan grandes y complejos que me pregunto si es posible incluso sin romper algo (y no verlo).

He auditado el archivo usando herramientas en línea, y parece que puedo usar algún tipo de refactorización automática sin arriesgar demasiado. También probé algunas herramientas para comprobar si realmente se usan selectores, el problema es que esta aplicación web está escrita completamente en JavaScript, por lo que todo es dinámico y las herramientas comunes son prácticamente inutilizables (no hay enlaces adecuados a seguir, no hay un mapa del sitio etc.)

¿Tienen alguna recomendación sobre cómo proceder, dónde empezar y si vale la pena?

Answer 1

Refactoring una enorme pieza de código de este tipo será muy lento y difícil, aquí está mi 2p pena, desde mi experiencia:

1. inicio de ramificación del proyecto (en este caso supongo que está utilizando un control de versiones herramienta) - que le permitirá jugar de forma independiente con el código y etiquetar cualquier hito que alcance.

2. formatee su CSS con un embellecedor: aumentará la legibilidad y ayudará a buscar declaraciones específicas sin perder ninguna instancia.

3. intenta identificar el CSS no utilizado/redundante y deshazte de él.

4. usted podría tratar de hacer que sus selectores más corto (por ejemplo .main .foo .bar podría estar bien, .bar) - Se va a mejorar la legibilidad y aumentar el rendimiento, pero tomar esto con una pizca de sal y estar listo para volver si las cosas empiezan a romper en cada paso que tomes.

5. intente eliminar, si es posible, cualquier !important - haga el selector más específico si es necesario. Un reinicio css podría ayudar con eso si la mayoría de las declaraciones !important se hicieron para corregir problemas específicos del navegador, de lo contrario, introducir un reinicio css ahora podría agregar más problemas que resolverlos, esto, si no hay ningún reinicio css en su aplicación en absoluto .

6. rompa y reagrupe el css en diferentes módulos (y archivos si eso ayuda) - CSS orientado a objetos es una técnica posible para mantener las cosas más fáciles de mantener, funciona mejor si se comienza pero también puede ayudar en la refactorización . https://github.com/stubbornella/oocss/wiki es válido pero hay alternativas que puede considerar, como SMACSS.

7. Después de eso, se puede considerar el uso de un preprocesador CSS como Less o Sass, que le permite definir variables y mixins (similares a las funciones), modularidad y mucho más - esto puede llegar a ser una tarea muy costosa, sin embargo, así que evalúe cuidadosamente si esto le brindará más beneficios que dolor.

8. pruebe tantas veces como sea posible, tenga en cuenta las pruebas unitarias para asegurarse de que los cambios que realice no rompan nada en otro lugar.

9. A veces volver a escribir todo puede terminar requiriendo menos tiempo que la refactorización, por lo que no tema dejar las cosas como están si su evaluación muestra que la refacturación no traerá suficientes beneficios.

Lo que enfrenta es una de las tareas más desalentadoras, ¡así que buena suerte con él!

Answer 2

Las cosas se romperán, pero está bien, ya vivirás. Ya que está reescribiendo podría ser bueno buscar un lenguaje CSS dinámico como Saas o menos

Answer 3

Al principio recomendaría usar algún preprocesador de CSS. Por ejemplo, puede usar MENOS. Al principio, haga su CSS más atractivo usando http://www.procssor.com con sus opciones personalizadas, luego péguelo en http://css2less.cc/. Probablemente deba hacer algunos cambios para "modularizar" el código.

Luego puede sacar los fragmentos de código, que no aparecen en todas las páginas y cargarlos manualmente en el lugar en que se necesiten.

Compila CSS desde LESS y comienza a usarlo.

Editar:

Así que su CSS podría tener este aspecto:

#wrapper #nav { some-rules } 
#wrapper #content { some-rules } 
#wrapper #footer { some-rules } 

#wrapper #content form#register-form { some-rules } 

Aplicar css2less:

#wrapper { 
    #content { 
     some-rules; 
     form#register-form { 
      some-rules; 
     } 
    } 
    #footer { 
     some-rules; 
    } 
    #nav { 
     some-rules; 
    } 
} 

Y modularizar que:

main.less

#wrapper { 
    #content { 
     some-rules; 
    } 
    #footer { 
     some-rules; 
    } 
    #nav { 
     some-rules; 
    } 
} 

register.less

#wrapper { 
    #content { 
     form#register-form { 
      some-rules; 
     } 
    } 
} 

Answer 4

que sería empezar de nuevo

En primer lugar claramente el estilo con el css placa boilder http://html5boilerplate.com/ más claro esto debería eliminar la necesidad de que todas las reglas! Importantes, el texto modelo tiene como objetivo eliminar las diferencias de estilo entre los navegadores.

A continuación, utilice potencialmente algo así como http://lesscss.org/ para crear una hoja de estilo dinámica y manejable.

Busca elementos comunes y usa la clase compartida para estos.

Incluso en las aplicaciones más complejas, no debería necesitar una hoja de estilo de 7000 líneas.

Answer 5

Vas a tener que revisar todo el código y entenderlo. No puede intentar ejecutarlo a través de algunas utilidades automáticas y hacer que haga el trabajo por usted. Escribir CSS compacto es un arte y no puedes tomar atajos, de lo contrario, tu archivo tendrá más de 160kb.

Por otro lado, puede comenzar desde cero y basar básicamente sus estilos en el original.

Lo que recomendaría, sin embargo, es utilizar una utilidad "Inspeccionar elemento" como Firebug en Firefox para ver si hay algún estilo redundante.

También intente y divida los estilos que aparecen en varias páginas en un archivo CSS general y otros en archivos específicos.