Cómo Refactorizar CSS - Una Guía

La refactorización de CSS debe ser una parte esencial del flujo de trabajo de desarrollo de front-end, si queremos tener una base de código manejable y optimizada. Cuando refactorizamos CSS, Limpiar y reorganizar nuestro código existente. Sin añadir nuevas funcionalidades ni corregir errores..

Refactorización ayuda previene la explosión de CSS, mejora la legibilidad del código y la reutilización, y hace CSS más elegante y más rápido de ejecutar.

La refactorización generalmente es necesaria después de un tiempo, ya que incluso los proyectos que comenzaron con una base de código concisa y organizada, tarde o temprano, comienzan a perder su claridad; Aparecen consistencia, reglas obsoletas y partes de código duplicado; y también comenzamos a anular estilos y empleamos más y más hacks y soluciones alternativas.

La mejor manera de mantener nuestra base de código CSS es apegarse a la “refactor temprano, refactor a menudo” regla de oro. En esta publicación, veremos algunos consejos sobre cómo podemos llevar a cabo un proceso eficaz de refactorización de CSS..

1. Realizar una auditoría inicial

Para tener una mejor imagen de lo que necesitamos refactorizar, es lo mejor Comience con una auditoría integral para ver lo que tenemos actualmente..

Hay muchas herramientas en línea excelentes que pueden ayudarnos en este esfuerzo. CSSDig es una potente extensión de Chrome que analiza el CSS de un sitio web y explora sus puntos débiles, como selectores demasiado específicos o propiedades repetitivas..

El CSS no utilizado investiga las reglas de CSS no utilizadas, mientras que las herramientas de alineación, como CSS Lint, permiten encontrar rápidamente la compatibilidad, el mantenimiento y otros problemas..

También es importante examinar manualmente el código durante la auditoría inicial, ya que muchos problemas en el nivel arquitectónico solo pueden detectarse de esta manera.

2. Establecer un plan manejable

Refactorizar el código de trabajo es siempre una tarea desalentadora, pero podemos aliviar el dolor si creamos un plan sobre lo que debemos hacer, dividimos el proceso de refactorización en partes manejables y hacemos un calendario viable.

En la refactorización de CSS hay una cosa crucial que siempre debemos tener en cuenta: algunas cosas que refactorizamos, por ejemplo cambiando los nombres del selector, lo hará Es necesario ajustar el código de los archivos HTML y JavaScript relevantes. también.

Por lo tanto, es una buena idea rastrear estas modificaciones adicionales que tendremos que realizar, y integrarlos en nuestro horario de refactorización junto con las tareas primarias relacionadas con CSS.

3. Seguimiento del progreso

Antes de emprender la refactorización, es un paso esencial para copia de seguridad de nuestros archivos iniciales. La introducción de un sistema de control de versiones, como Git o Subversion, en nuestro flujo de trabajo también puede mejorar significativamente el proceso de refactorización, ya que tendremos un registro de los pasos secuenciales que hemos tomado, y Podremos volver a una etapa previa si queremos rehacer cosas..

4. Apegarse a una guía de estilo de codificación

Una guía de estilo de codificación coherente puede mejorar notablemente la capacidad de lectura y mantenimiento del código, por lo que antes de comenzar a refactorizar es esencial configurar una guía de estilo de codificación CSS.

Las cosas importantes para decidir son:

• convenciones de nombres
• reglas de formato
• orden de declaración
• Unidades y valores que queremos utilizar.
• comentando reglas

Si no queremos crear nuestra propia guía de estilo de codificación, también podemos utilizar la de otra persona, como ThinkUp, que se encuentra en Github.

No es suficiente, sin embargo, simplemente presentar una guía de estilo de codificación, también necesitamos apégate a ella cuando reescribamos el código durante la refactorización, y esperar lo mismo de todos los demás quien trabaja en nuestro proyecto.

5. Configurar una estructura de archivo coherente

Una vez que estemos listos con los preparativos, lo primero que debemos hacer es configurar una estructura de archivos CSS adecuada que preste atención a la naturaleza en cascada de CSS..

Depende principalmente del proyecto cómo organizar mejor nuestros archivos, pero hay algunas reglas universales, como usar un normalize.css archivo para estilos de restablecimiento de CSS, un separado global.css para los estilos globales que se utilizan en todo el proyecto y para almacenar bibliotecas de terceros en una carpeta separada.

Si queremos estar seguros con nuestra estructura de archivos CSS, también hay arquitecturas ya hechas, como SMACSS o ITCSS, que ofrecen técnicas efectivas sobre Cómo organizar archivos CSS de forma escalable..

6. Deshacerse de las reglas no utilizadas y duplicadas

Después de un tiempo, los archivos CSS generalmente comienzan a abundar en reglas no utilizadas que necesitamos identificar y eliminar durante la refactorización. Hay muchas herramientas en línea que nos permiten investigar estas reglas obsoletas, Y a veces también nos permiten deshacernos de ellos rápidamente..

La herramienta más conocida para este propósito es probablemente UnCSS, un módulo Node.js que hace posible deshacerse rápidamente de las reglas CSS que no se utilizan, y también nos brinda opciones de configuración sofisticadas que facilitan la optimización del proceso de limpieza..

Es importante tener en cuenta que no necesariamente quiere eliminar las reglas no utilizadas de todos los archivos CSS que tenemos, por ejemplo, de hojas de estilo globales, restablecidas o de terceros, por lo que necesitamos excluirlos mientras se realiza la limpieza.

Junto con las reglas obsoletas, las reglas duplicadas también conducen a una inflexión de código superflua y pérdida de rendimiento. Podemos eliminarlos usando el módulo CSS Purge Node.js, pero también podemos trabajar con Linters CSS para buscar reglas duplicadas. en nuestros archivos CSS.

7. Reducir la especificidad

La especificidad de un selector de CSS se calcula a partir del número y los tipos de los selectores internos que contiene. La especificidad de CSS se expresa como un número de 4 dígitos que es más fácil de entender si revisamos esta calculadora de especificidad de CSS visual:

La especificidad más baja (0001) pertenece a selectores que solo apuntan a un elemento HTML general, como

o

. Cuantos más selectores internos contiene un selector compuesto, mayor es su especificidad..

Ciertos selectores, tales como carné de identidad o selectores provenientes de estilos en línea, tienen prioridades más altas porque anulan los estilos que pertenecen a más selectores genéricos. Por ejemplo, la especificidad de la # id1 selector es 0100.

En la refactorización, el objetivo es disminuir la especificidad de los selectores (mantenerlos cortos) tanto como sea posible, como Los selectores con mayor especificidad reducen significativamente la reutilización del selector, y conducir a una base de código hinchada.

Los 3 tipos principales de selectores de alta especificidad son:

1. Selectores calificados, como p.clase1 (definiendo la pag la etiqueta no es necesaria aquí, ya que hace que sea imposible usar la misma clase con otros elementos HTML)
2. Selectores profundamente anidados, como .class1 .class2 .class3 .class4…
3. Identificaciones, como # id1

Las herramientas en línea, como CSSDig que se menciona en el Paso 1, se pueden usar para encontrar rápidamente estos selectores de alta especificidad. También puede ser útil configurar una regla en la guía de estilo de codificación sobre cosas como el nivel máximo de anidamiento o un límite de uso carné de identidad selectores.

8. Eliminar !importante Reglas

Reglas CSS seguidas por la !importante declaración anular reglas de estilo regulares. Utilizando !importante las reglas tarde o temprano conducir al código incoherente. No es una coincidencia que la mayoría de las herramientas de linting las marcan como error.

Cuando necesitamos escribir CSS rápidamente, podemos comenzar a confiar en ellos aunque debido a su simplicidad.

El principal problema con !importante Las declaraciones son que si queremos anularlas en el futuro, necesitamos poner aún más !importante Declaraciones en uso, por lo que es mejor eliminarlas siempre que sea posible durante el proceso de refactorización..

9. Limpie los números mágicos y los valores codificados

Durante nuestro flujo de trabajo diario de CSS, a veces nos topamos con problemas que no podemos resolver, y comenzamos a utilizar los llamados números magicos, Valores que funcionan por algunas razones pero no entendemos por qué. Por ejemplo, tome el siguiente ejemplo:

 .class1 posición: absoluta; superior: 28px; izquierda: 15,5%; 

El principal problema con los números mágicos es que son circunstancial, y encarnan el “programación por permutación” antipattern Durante el proceso de refactorización, debemos eliminar estas reglas arbitrarias de nuestro código y reemplazarlas con soluciones más razonables siempre que sea posible..

La misma regla de oro se aplica para valores codificados también. Probablemente, la aparición más frecuente de valores codificados de forma rígida puede encontrarse en las reglas de altura de línea:

 / * mal, necesitaremos agregar reglas de altura de línea fija extra a los elementos secundarios de .class1 * / .class1 font-size: 20px; altura de línea: 24px;  / * bien, la regla de altura de línea flexible también puede ser utilizada de forma segura por elementos secundarios * / .class1 font-size: 20px; altura de la línea: 1.2; 

Los valores codificados hacen que nuestro código sea menos seguro para el futuro y más rígido, por lo que como parte de la refactorización debemos desenterrarlos, y Reemplácelos con valores flexibles..

10. Unidades y valores de refactor

Para facilitar el mantenimiento y la depuración en el futuro, y para evitar fallas que puedan derivarse del uso de diferentes unidades, como em y px, simultáneamente, necesitamos se adhieren a reglas coherentes sobre cómo usamos valores relativos y absolutos.

Si los usamos de manera inconsistente en el pasado, necesitamos convertirlos para que puedan constituir un sistema conciso

Si utilizamos demasiados colores similares en nuestro sitio, también puede ser una buena idea racionalizar el esquema de color Al reducir la cantidad de colores que empleamos. (Aquí hay una publicación sobre cómo elegir el esquema de color de un sitio web de manera práctica).