Indentação no CSS | HTML5 e CSS3 parte 1: crie uma página da Web

Olá Calina, sou estudante como vc aqui na Alura, mas já venho aprendendo html e css na faculdade de engenharia de software, vou tentar te ajudar. O html e o CSS não são sensíveis a endentação como o python por exemplo. Para o html segue a orientação de estrutura de elementos , abrir e fechar tags e elementos inline e de bloco. por exemplo: O código a seguir funciona da mesma forma.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>h1{margin: 15px;padding: 15px;}</style></head><body><h1>Texto</h1></body></html>

A questão é a legibilidade, mas para isso vc pode adotar práticas que vão além da endentação e de seguir uma ordem. Você pode usar os recursos para comentar o código. No html vc usa< !-- -- >:

<!-- -->

<!-----------------------------------------------------------------------
Artur Shon

Aluno Alura - 2022
------------------------------------------------------------------------>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <!-------------------------------------------------------------------
        Cabeçalho da Página
    -------------------------------------------------------------------->
    <header class="cabecalho">
        <h1> Titulo Principal da Página</h1>
    </header>
    <!-------------------------------------------------------------------
        Navegação
    -------------------------------------------------------------------->
        <nav class="menu">
            <button>Botão 1</button>
            <button>Botão 2</button>
            <button>botão 3</button>
        </nav>
    <!-------------------------------------------------------------------
        Conteúdo Principal
    -------------------------------------------------------------------->
    <div class="conteudo">
        <article>
            <h3>Título do Conteúdo</h3>
            <br>
            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Ea sequi magnam deserunt eligendi, impedit facere error reiciendis 
                quae voluptatem blanditiis facilis dolores, porro voluptatibus, 
                ut voluptas laudantium enim excepturi? Laboriosam.</p>
        </article>
    </div>
    <!-------------------------------------------------------------------
        Rodapé da Página
    -------------------------------------------------------------------->
    <footer class="rodape">
        Exemplo do Artur - 2022 © - Todos os direitos reservados. <small>kkkk </small> 
    </footer>
</body>
</html>

E no CSS você pode usar /**/;

/**/
/*----------------------------------------------- 
HTML
------------------------------------------------*/
*{
    margin: 0;
    padding: 0;
}
/*----------------------------------------------- 
Body
------------------------------------------------*/
body{
    display: grid;
    grid-template-columns: 25% auto 25%;
    grid-template-rows: 150px 50px 450px 100px;
}
/*----------------------------------------------- 
Cabeçalho
------------------------------------------------*/
.cabecalho{
    grid-area: 1 / 1 / 2 / 4;
    background-color: rgb(91, 120, 121);
    color: rgb(255, 255, 255);
    text-align: center;
    padding-top: 25px;
}
/*----------------------------------------------- 
Menu
------------------------------------------------*/
.menu{
    grid-area: 2 / 2 / 3 / 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(35px, auto));
}
.menu button{
    color: rgb(255, 255, 255);
    background-color: rgb(56, 56, 56);
    border: none;
}
.menu button:hover{
    color: rgb(56, 56, 56);
    background-color: rgb(255, 255, 255);
    border: 1px solid;
}
/*----------------------------------------------- 
conteúdo Principal
------------------------------------------------*/
.conteudo{
    grid-area: 3 / 2 / 4 / 3;
    margin: 15px;
    padding: 10px;
    text-align: justify;
}
/*----------------------------------------------- 
Rodapé
------------------------------------------------*/
.rodape{
    grid-area: 4 / 1 / 5 / 4;
    color: aliceblue;
    text-align: center;
    padding-top: 25px;
    font-size: 12px;
    background-color: rgb(56, 56, 56);
}

Você pode usar este recurso para anotar no seu próprio código suas dúvidas e descobertas. Além de usá-lo para deixar o seu código mais estruturado. Eu gosto de criar estas divisórias, não dá trabalho, faz a primeira e copia as próximas. kkkk Espero ter ajudado de alguma forma.

Mergulhe em programação