| Código | Código refactorizado |
|---|---|
| Antes | Simplificando los selectores CSS |
|
.container .header .title { font-size: 24px; color: blue; } .container .header .subtitle { font-size: 18px; color: green; } |
.title { font-size: 24px; color: blue; } .subtitle { font-size: 18px; color: green; } |
Los selectores .container .header .title y .container .header .subtitle han sido simplificados a .title y subtitle
| Código | Código refactorizado |
|---|---|
| Antes | Eliminando Código CSS Duplicado |
|
.btn-primary { background-color: blue; color: white; padding: 10px; border: none; cursor: pointer; } .btn-secondary { background-color: green; color: white; padding: 10px; border: none; cursor: pointer; } |
.btn { color: white; padding: 10px; border: none; cursor: pointer; } .btn-primary { background-color: blue; } .btn-secondary { background-color: green; } |
En este ejemplo 2 se simplifican los selectores btn-primary y btn-secondary por un estilo btn que agrupa las especificaciones que son aplicadas a ambos botones y diferencia aquellas que son particulares de cada botón, como son los cambios en el color de fondo del btn-primary (blue) respecto al btn-secondary (green).
| Código Antes |
|---|
|
button onclick= "showMessage1()"> Click me function showMessage1() { let message1 = "My, World!"; alert(message1); } |
| Código Refactorizado |
|
Reutilizar la función para diferentes mensajes.
button onclick= "showMessage ('Hello, World!')" Click me button onclick= "showMessage ('Goodbye, World!')" Click me too function showMessage(message) { alert(message); } |
La function original showMessage() tiene una aplicación limitada de emitir el mensaje Hello, World!.
La function al modificarse showMessage(message) ha sido configurada
con la facilidad de pasarle el argumento message, de forma tal que puede imprimir diferentes mensajes, dependiendo del argumento.
En este ejemplo al hacer clic sobre los botones, se ejecuta la function ,
y se pueden imprimir mutiples mensajes utilizando la misma funcion.
De esta manera se ha incrementado su funcionalidad.
| Código | Código refactorizado |
|---|---|
| Antes | Optimizar la carga de recursos CSS y JavaScript |
|
link rel="stylesheet" href="styles.css"> script src="script.js"> /script> /head> body> h1>Welcome/h1> /body> |
link rel="stylesheet" href="styles.css"> /head> body> h1>Welcome /h1> script src="script.js" defer>/script> /body> |
Se ha trasladado el script que incluye el archivo script.js al final del body
ya que es una práctica común en desarrollo web por varias razones:
a - Mejora de la Velocidad de Carga de la Página.
b - Asegura el rendimiento de la página.
c - Permite el acceso completo al DOM.
d - Evita problemas de dependencias.
Resumiento, la ejecución del código JavaScript del archivo
incluido, requiere que se haya cargado la lógica de la página totalmente.
Estos efectos se comprobarán a lo largo de este instructivo.
| Código | Código refactorizado |
|---|---|
| Antes | Optimizar la carga de recursos CSS y JavaScript |
|
div id="content"> div class="post"> h2 class="post-title">Title 1 p class="post-content">Content 1 /p> /div> div class="post"> h2 class="post-title">Title 2 p class="post-content">Content 2 /p> /div> div class="post"> h2 class="post-title">Title 3 p class="post-content">Content 3 /p> |
div id="content"> article class="post"> h2 class="post-title">Title 1 /h2> p class="post-content">Content 1 /p> /article> article class="post"> h2 class="post-title">Title 2 /h2> p class="post-content">Content 2 /p> /article> article class="post"> h2 class="post-title">Title 3 /h2> p class="post-content">Content 3 /p> /article> |
Sustituir la etiqueta div class="post"> por article class="post"> en un documento HTML tiene
varias ventajas, especialmente en términos de semántica y accesibilidad.
Aquí se detallan algunas de las ventajas clave:
a - La etiqueta article> es semánticamente significativa y específica para
contenido que es independiente y autocontenido, como un artículo de blog,
un comentario de un foro, una entrada de una lista de productos, etc.
b - Las etiquetas semánticas ayudan a las tecnologías de asistencia a
determinar el propósito de cada sección del contenido.
c - Las etiquetas semánticas, como article>, indican a los motores de búsqueda
que el contenido es significativo y relevante,
lo que puede mejorar el posicionamiento en los resultados de búsqueda.
d - Los selectores CSS y las manipulaciones de DOM en JavaScript pueden ser
más significativos cuando se utilizan etiquetas semánticas.
e - Las etiquetas semánticas ayudan a asegurar
que el contenido se presenta de manera coherente y lógica.
| Código | Código refactorizado |
|---|---|
| Antes | Utilizar variables CSS para evitar repetición. |
|
body { background-color: #f0f0f0; color: #333; } .header { background-color: #f0f0f0; color: #333; padding: 10px; } .footer { background-color: #f0f0f0; color: #333; padding: 10px; } |
:root { --bg-color: #f0f0f0; --text-color: #333; } body { background-color: var(--bg-color); color: var(--text-color); } .header, .footer { background-color: var(--bg-color); color: var(--text-color); padding: 10px; } |
Funcionalidad del Código
a - Consistencia de Estilos: Usando variables CSS, se asegura una consistencia
de colores a lo largo de todo el documento. Si se necesita cambiar el color
de fondo o el color del texto, solo se debe actualizar el valor de la variable
correspondiente en :root, y todos los elementos que usen esas variables se
actualizarán automáticamente.
b - Facilidad de Mantenimiento: Las variables CSS facilitan el mantenimiento del
código. Cambiar los colores de fondo y texto en múltiples elementos se simplifica,
ya que solo es necesario cambiar los valores en un solo lugar.
c - Reusabilidad: Las variables CSS permiten reutilizar los mismos
valores en diferentes partes del documento, evitando la duplicación de código
y reduciendo posibles errores.
d - Claridad: El uso de variables hace que el CSS sea más legible y
entendible, ya que las variables pueden tener nombres descriptivos que
indiquen su propósito.