¿Cómo garantizar la legibilidad de HTML?

Posted on by Rudeus Greyrat

Un código HTML conciso le ahorra tiempo a otro desarrollador, así como su tiempo y esfuerzo cuando lo revisa después de mucho tiempo. En las empresas donde hay grandes proyectos de software, su código debe ser legible y comprensible porque el código tendrá que ser modificado por otra persona en algún momento.

En este artículo, veremos 3 consejos para mejorar notablemente la legibilidad del código HTML y JavaScript.

  1. Formato y sangría
  2. Uso de nombres descriptivos
  3. Evitar comentarios innecesarios

Formato y sangría: si las personas revisan su código HTML, seguramente notarán si tiene un formato incorrecto a primera vista. En la mayoría de los casos, el código no está alineado correctamente o no tiene el estilo de formato correcto. Los desarrolladores siempre adoptan un código limpio, y la ausencia de un formato adecuado puede volverse realmente molesto para algunas personas.

  • Mala práctica: a continuación se muestra un fragmento de código HTML razonable que se ejecutará sin errores. Si bien este fragmento es correcto, es bastante discordante para nosotros. Simplemente no es posible leer el código. Una persona nunca puede entender el código de inmediato, en lugar de aprender algo de él, puede comenzar a descifrarlo. 

    HTML

    <!DOCTYPE html>
    <html><head><style>body{color:green;}</style></head><body><h1>GeeksforGeeks</h1>
    <p>A computer science portal for geeks</p></body></html>

  • Buena práctica: el formato debe aplicarse de manera coherente en todo momento. El mismo código HTML con la sangría adecuada y el espacio entre paréntesis se ve correctamente formateado y limpio ahora.

    HTML

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          body{
            color: green;
          }
        </style>
      </head>
      <body>
        <h1>GeeksforGeeks</h1>
        <p>A computer science portal for geeks</p>
      
      </body>
    </html>

Uso de nombres descriptivos: uno debería poder escribir código JavaScript descriptivo . Incluso un principiante debería poder leer su código sin ningún problema y comprender lo que se intenta lograr o lograr en él. Incluso si la sintaxis no es clara para ellos, deben tener una gran comprensión de lo que está sucediendo. A continuación se muestra un contraejemplo en JavaScript.

  • Mala práctica: Uno no puede decir lo que se supone que está sucediendo en esto sin algún contexto. Si cambiamos el fragmento de código de arriba con el código de abajo usando nombres descriptivos, será más fácil entender lo que está pasando en él, aunque no tengamos ningún contexto o descripción de la función como comentario.

    JavaScript

    function fn(o) {
      o.mk = 'Toyota';
    }
      
    var c = {mk: 'Honda', md: 'Accord', y: 1998};
    var x, y;
      
    x = c.mk;
    fn(c);
    y = c.mk;

  • Buena práctica: Basándonos simplemente en el nombre de la variable y la función, es claro que estamos cambiando el nombre de la empresa de un automóvil. Aunque en el segundo ejemplo se usan más letras, seguramente tiene más ventajas que el primero.

    JavaScript

    function ChangeCompany(car) {
      car.company = 'Toyota';
    }
      
    var car = {company: 'Honda', model: 'Accord', year: 1998};
    var car1, car2;
      
    car1 = car.company;
    ChangeCompany(car);
    car2 = car.company;

Evitar comentarios innecesarios: una cosa más que podemos hacer para evitar el desorden y la confusión es evitar comentarios innecesarios y asegurarnos de que el código sea autoexplicativo y suficiente. Esto significa que debemos tratar de evitar por completo los comentarios y eliminarlos siempre que sea posible. La única excepción son los comentarios que son más relevantes, e incluso estos deben usarse con las mínimas palabras para explicarlos.

  • Mala práctica: a continuación se muestra un contraejemplo que se puede encontrar en algunos lugares. En este ejemplo, el principal problema es que la persona que lo lee se distraerá del código en sí. Los párrafos adicionales innecesarios de los comentarios abarrotan el código real, que tiene solo 3 líneas.

    HTML

    <!DOCTYPE html>
    <html>
        <!--The <head> element is a container for metadata
        and is placed between the <html> tag and the <body>
        tag. Metadata is data about the HTML document
        and it is not displayed-->
        <head>
            <!--The <style> tag is used to define style
            information for a document. It is specified
            how HTML elements should render in a browser
            inside the <style>-->
            <style>
                body{ color: green; }
            </style>
        </head>
        <!--The <body> tag defines the document's body.
        The contents of an HTML document, such as
        headings, paragraphs, images, etc are contained
        inside the <body> element -->
        <body>
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p>
      
        </body>
    </html>

  • Buena práctica: en el fragmento anterior, hay 12 líneas de comentarios, lo que significa que se centra más en los comentarios que en el código real. A continuación se muestra la forma correcta de escribir código HTML limpio.

    HTML

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                body{ color: green; }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p>
      
        </body>
    </html>

Publicación traducida automáticamente

Artículo escrito por prasoon19999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *