Breaking

Post Top Ad

Your Ad Spot

martes, 10 de diciembre de 2019

Escribir CSS mantenible

El código que se puede mantener es una de las alegrías del desarrollo de software. La sensación que tienes cuando abres una base de código y la sonrisa en tu rostro y en tu corazón no tiene precio . Aunque algunos podrían argumentar que esto solo se aplica a las bases de código de programación como JavaScript o PHP , pero supongo que eso significará que CSS sostenible es la alegría de un desarrollador frontend que tiene un punto débil específico para CSS.
Comenzar a usar CSS es bastante sencillo, como he mencionado en la introducción a CSS , pero a medida que avance, encontrará términos como especificidad y cascada .
Cuanto más crezca su base de código, tendrá que realizar un seguimiento de tantas cosas como nombres de variables y selectores . Una convención de nomenclatura puede ocuparse de lo último y una buena nomenclatura puede ocuparse de lo primero, pero puede hacer más para ayudarse a sí mismo o a cualquier otro desarrollador que trabaje en esta base de código en el presente o en el futuro.
En palabras de Edsger W. Dijkstra en su libro Una disciplina de programación :
... Me vi obligado a admitir que la mayoría de los programas se presentan de una manera adecuada para la ejecución mecánica pero, aunque sea de alguna belleza, totalmente inadecuados para la apreciación humana.
Hay muchas técnicas que puede considerar para asegurarse de que su base de código CSS sea adecuada para la apreciación humana. Los discutiremos y depende de usted elegir.
Contrariamente a la tradición de esta serie, esta publicación es más una teoría que un código .

Maintainable CSS se trata de escribir CSS que sea modular, escalable y mantenible.
Cuando hablamos de código modular, nos referimos a módulos que son partes independientes de la página web que se pueden combinar con otras partes para crear toda la estructura de la página web. Los ejemplos incluyen encabezados y navegación .
La escalabilidad, por otro lado, significa que cuando la base de código aumenta de tamaño, es fácil de mantener.
La capacidad de mantenimiento significa que se pueden hacer cambios sin causar una cadena de reacciones que conducirán a otro problema en otra parte de la base de código.
Desde la perspectiva de los principiantes, la siguiente es una lista incompleta de recomendaciones sobre cómo escribir CSS mantenible:
  • Escribir comentarios
  • Usar HTML semántico
  • Usar nombres de clase semántica
  • Use la identificación con moderación
  • Use una convención de nomenclatura
  • Haz tu código legible

Escribir comentarios

Los comentarios sirven como una nota para usted u otro desarrollador que trabajará en su base de código en algún momento. Deben estar bien escritos y ser descriptivos de lo que está sucediendo o por qué tomó una decisión de codificación .
Es posible que esté resolviendo un problema en particular y la solución se le ocurrió de la nada y luego continúe e implemente la solución y ¡listo! ¡funciona!.
En ese momento, debe explicar la parte crítica de su implementación en un comentario. Cuando abra su base de código después de un largo período de tiempo, no debería sorprenderse de que los comentarios puedan ser su guía.
Tome el siguiente ejemplo hipotético:
.header {
  /*
   * The margin bottom is applied to create an outer spacing
   * thereby preventing the header from touching the main
   * content.
  */
  margin-bottom: 2em;
}

.box {

  /*
   * The padding property is actually shorthand for four
   * other properties namely padding-top, padding-right
   * padding-bottom, padding-left.
  */
  padding: 3em;
}
El siguiente tweet podría no ser sobre CSS, pero dice mucho sobre la importancia de los comentarios en una base de código.

Usar HTML semántico

El HTML semántico es un buen HTML con toneladas de funciones de accesibilidad gratuitas. Cuando escribes HTML semántico con nombres de clase significativos (discutidos a continuación) te estás obligando a escribir un buen CSS.
Mira el siguiente ejemplo:
<header>
  <h1>Header here</h1>
</header>

<main>
  <section>
    <!--Text here -->
  </section>
</main>

<footer>
  <!-- Footer text here -->
</footer>
Comparado con
<div>
  <h1>Header here</h1>
</div>

<div>
  <div>
   <!-- Text here -->
  </div>
</div>

<div>
  <!-- footer text here -->
</div>

Usar nombres de clase semántica

El nombre de clase semántica describe el propósito de un elemento HTML y no cómo se ve o los estilos aplicados a él .
<!-- this -->

<header class="hero">
  <h1><!--Text here--></h1>
</header>

<main class="site-content">
  <p class="introductory-text"></p>
</main>

<!-- compared to this -->

<div class="f1 pd2 mt3">
  <p class="p1"></p>
</div>
Algunas de las ventajas de los nombres de clase semántica incluyen:
  • Son más fáciles de encontrar
  • Más fácil de depurar
  • Son legibles

Use la ID con moderación

Los selectores de Id tienen una especificidad más alta que las clases y los selectores de atributos . Cuando use muchas ID en su CSS, será difícil anularlas y tendrá que resolverlo !importantpara asegurarse de que se apliquen ciertos estilos.
La recomendación es usar un ID cuando solo hay una instancia de una cosa y usar selectores de clase cuando hay varios.
Dado el fragmento de código a continuación:
<header id="header">
  <p id="paragraph-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <p id="paragraph-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
Puedes escribir esto en su lugar:
<!-- There are more than one paragraph so its best to use a class -->

<header id="header">
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
Y tu CSS sería:
.paragraph {
  /* Your styles here */
}
Eso sí, si usa !importantdos selectores, gana el que tenga la mayor especificidad .
/* specificity 0001 */
article {
  background-color: yellow !important;  /* This will be ignored */
}

/* specificity 0002 */
body article {
  background-color: green !important; /* The browser will use this */
}

Use una convención de nomenclatura

Las convenciones de nomenclatura le brindan pautas recomendadas que puede emplear para que su CSS sea más legible y fácil de mantener.
Hemos discutido esto antes, puedes leer la publicación a continuación.

Haz tu código legible

La legibilidad es uno de los principios del código mantenible. La capacidad de mirar una base de código y ganar la confianza de que puede darle sentido dice mucho.
/* This */
.header,.logo{padding:1.2em;margin:2em;width:500px;}

/*compared to this*/
.header,
.logo {
  padding: 1.2em;
  margin: 2em;
  width: 500px;
}
Estas son solo recomendaciones, cuando escriba más CSS descubrirá su propia forma de escribir CSS mantenible, cuando lo haga, solo asegúrese de que cualquier desarrollador que herede su base de código no tenga dificultades para darle sentido.
Si desea profundizar en este tema, eche un vistazo a los siguientes recursos:
  • Mantenible CSS
  • Escribe mejor CSS

Hemos llegado al final de nuestra discusión sobre CSS para esta serie . A continuación, referencias y recursos para mejorar su aprendizaje de CSS.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas