A Importância da Indentação do Código

E ai pessoal? Tudo certo? Vamos falar hoje de algo que parece trivial, mas que pode fazer a diferença em uma situação rotineira. A indentação é a forma como o texto se comporta em ralação à sua margem, ou seja, os avanços e recuos que ele possui. Em computação voltada para programação, seja ela de qualquer tipo, a indentação é geralmente utilizada apenas para fins estéticos e organizacionais. Porém existem linguagens em que este recurso é obrigatório. O Python, o Occam e o Haskell, por exemplo, utilizam a indentação para definir a hierarquia do seu código.

Mas o que é, de fato, um texto indentado? O exemplo abaixo é de um trecho completamente indentado.

<div class="header-container">
    <div class="logo"></div><!-- .logo -->

    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Contato</a></li>
        </ul>
    </div><!-- .menu -->
</div><!-- .header-container -->

E abaixo temos o mesmo código mas sem indentação.

<div class="header-container">
<div class="logo"></div>

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div><!-- .menu -->
</div><!-- .header-container -->

Existe ainda os que escrevem o HTML da seguinte maneira:

<div class="header-container"><div class="logor"></div> <div class="menu"><ul><li><a href="#">Home</a></li><li><a href="#">Sobre</a></li><li><a href="#">Contato</a></li></ul></div></div>

Por mais incrível que pareça, existe.

Tendo isso em vista, nos perguntamos: mas para que realmente serve a indentação? Pensemos na seguinte situação: Você escreveu um código imenso, suponhamos que um HTML, cheio de <div> umas dentro das outras, e por fim, na hora de visualizar o seu código no navegador, algum bloco não aparece porque falta o fechamento da tag. O que fazer?

Bom, se você indentou o seu código de forma que você consiga se localizar, está tudo bem... Se não, vai ter que ralar bastante para descobrir onde está o erro.

Mas mesmo que tenha indentado de forma que você consiga se localizar, pense na possibilidade: você trabalha em uma empresa desenvolvendo códigos em grupo e, em dado momento, o seu código vai ser atualizado por um de seus colegas... Será que ele vai conseguir fazê-lo de forma tranquila?

Tudo não passa de questão de organização. Se repararem nos códigos que eu escrevo aqui no site, apesar de nem sempre conseguir indentar de forma agradável, pelo tamanho dos códigos, verão que toda vez que eu escrevo estes códigos eles estão com algum tipo de identificação nos fechamentos das tags. Assim, por exemplo:

<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</div><!-- .menu -->

No caso, a tag de comentário <!-- .menu --> indica que naquele ponto do código, a tag </div> está fechando a <div class="menu">. Essa identificação é crucial, para o segundo exemplo acima. Apesar de eu indentar o código sempre, eu coloco também a identificação. Certa vez um amigo meu me disse algo que ficou gravado em minha cabeça...

Você só será "punido" por algo que deixou de fazer... Mas nunca por algo que você a mais e que não era necessário.

Ou seja, o que você puder fazer para deixar seu código mais fácil de ser interpretado por você mesmo ou por outra pessoa, faça!

Pro CSS a regra é a mesma. Abaixo o exemplo de forma indentada, sem indentação e a forma que algumas pessoas insanas se utilizam.

*{
    margin: 0;
    padding: 0;
}

.header-container{
    width: 978px;
    height: 160px;
    background: #444;
} /* ESTA É A FORMA INDENTADA */

*{margin: 0; padding: 0;}
.header-container{width: 978px; height: 160px; background: #444;}
/* ESTA É A FORMA SEM INDENTAÇÃO */

*{margin: 0; padding: 0;}.header-container{width: 978px; height: 160px; background: #444;} /* ESTA É A FORMA INSANA */

Isso fará o seu código não funcionar? A menos que esteja programando em uma linguagem que não seja as citadas no inicio do post, não fará! Mas existem boas práticas na hora de programar, seja em qual linguagem for. Isso é apenas uma dica, embora eu considere algo de suma importância.

Espero que tenham apreciado e até a próxima.