-4

Queria dicas para aplicar no meu aprendizado. Sou um iniciante e sempre escuto falar do código limpo.

2
  • 1
    Basta comentar, identar, e organizar bem o código, também mante-los em pastas para não deixar tudo espalhado, evitar ao máximo os famosos POG programação orientada a gambiarra. Commented 11/09/2016 às 17:57
  • Da uma olhada nesse link pode te ajudar: browserdiet.com/pt Commented 11/09/2016 às 18:51

2 Respostas 2

4

Não existem regras para um código limpo. Nem nas linguagens de marcação, como é o seu caso, e nem nas de programação.

Público alvo do código fonte: trabalho em equipe é OP!

É preciso levar em consideração quem lerá o seu código, é importante definir entre a equipe (se houver) convenções, pois existem diversas formas de fazer uma mesma coisa.

1. Use letras minúsculas nos elementos. O HTML5 permite a mistura de elementos em letras maiúsculas e minúsculas.

Você pode usar assim:

<DIV> 
  <p>Uma vaga noção de tudo, e um conhecimento de nada. — Charles Dickens</p>
</DIV>

ou:

<Div> 
  <p>Sábio é aquele que conhece os limites da própria ignorância. — Sócrates</p>
</DIV>

ou até:

<div> 
  <p>Bom humor. A forma mais simples de superar os problemas. — Rui Barbosa</p>
</div>

É recomendado que use o nome dos elementos como no último exemplo, em letras minúsculas, segundo o w3schools, pois:

  • Misturar letras maiúsculas e minúsculas é ruim.
  • Os desenvolvedores normalmente usam em letras minúsculas. (como ocorre no XHTML)
  • Letras minúsculas parecem mais organizados.
  • Por fim, a escrita com letras minúsculas são mais fáceis e rápidas de escrever.

2. Feche todos os elementos. O HTML5 permite que não precisemos fechar todos os elementos.

<section>
  <p>Todos os seus sonhos podem se tornar realidade se você tem coragem para persegui-los. — Walt Disney
</section>

No exemplo acima, o elemento p foi aberto, porém não foi fechado. Num código mais bonito e organizado (lembrando, você pode e deve definir suas próprias convenções com a sua equipe estas apresentadas são dicas, que podem servir como um ponto de partida) seria assim:

<section>
  <p>Eu não falhei. Só descobri 10 mil caminhos que não eram o certo. — Thomas Edison</p>
</section>

3. Não economize nos atributos das imagens O alt, por exemplo é importante pois vão existir momentos que por alguma razão a imagem que você definiu não poderá ser exibida, seja por que ela tenha mudado de caminho, ou que ela não exista mais, nestes casos, a sua descrição será exibida.

Já definir a altura e largura da imagem é importante pois o navegador reservará espaço para imagem mesmo antes dela ser carregada, reduzindo o tempo de renderização evitando repaints e reflows desnecessários.

Um exemplo ruim de uma imagem seria:

<img src="minha-imagem.jpg">

Um bom exemplo seria:

<img src="minha-imagem.jpg" alt="Descrição da imagem" style="width:128px;height:128px" />

4. A semântica pode deixar o seu código organizado. Não vou entrar no mérito de explicar a semântica aqui, mas você pode ler clicando aqui (vale a pena!). Em resumo, ela divide sua página internamente, sem afetar o visual. Essa divisão deixa seu código mais organizado e segmentado, se quiser mais informações, leia o link que deixei ali em cima.


Existem diversos padrões a se estabelecer, inclusive para as folhas de estilo CSS.

As folhas de estilo podem ser curtas, em uma linha só, como esta:

p.intro {font-family: Verdana; font-size: 16em;}

E elas podem ser escritas de forma longa, como esta:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

Agora resta a você escolher como você deve definir o padrão, é bom levar alguns parâmetros em consideração: (lembre do início, não são regras)

  • Linhas muito longas não são legais e podem ser um pouco difícil de manusear, portanto evite.
  • A chave de abertura ({) pode ser colocada na mesma linha que o selector.
  • Use aspas somente entre valores que contém espaço.
  • Use a chave para fechar o bloco (}) na linha logo abaixo do fim do código, evitando espaços.
  • Use o ponto e vírgula depois de cada propriedade, até mesmo na última.

Veja o exemplo de um código HTML bonito:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">

    <title>Portfolio | Chris Coyier</title>

    <!--[if !IE]><!-->
        <link rel="stylesheet" href="/css/main.css" />
    <!--<![endif]-->

    <!--[if gte IE 7]>
        <link rel="stylesheet" type="text/css" href="/css/main.css" media="screen, projection" />
    <![endif]-->

    <!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" media="screen, projection" />
    <![endif]-->
</head>

<body id="home">

    <header>
        <a id="logo" href="/">Site Title</a>
        <div id="slogan">web craftsman, blogger, author, speaker</div>

        <nav>
            <?php include("inc/main-menu.php"); ?>
        </nav>
    </header>

    <section class="container">

        <article>
            <h1>Hipsters</h1>

            <img src="//chriscoyier.net/images/hipster.jpg" alt="Hipster and Company" height="120" width="570" />

            <p>You can&#8217;t dress up as a hipster for Halloween. Their attire is already so bizarre that there isn&#8217;t an
            exaggeration of it that looks like a costume. It would just look like you are another hipster about to read a poem about reading poems.</p>

            <h2>Secondary Title</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </article>

        <article>
            <!-- Additional Article -->
        </article>

    </section>

    <aside>
        <h3>My Major Projects</h3>
        <dl>
            <dt><a href="http://aremysitesup.com">Are My Sites Up?</a></dt>
            <dd>Monitor your sites</dd>

            <dt><a href="http://css-tricks.com">CSS-Tricks</a></dt>
            <dd>A web design community</dd>

            <dt><a href="http://digwp.com">Digging Into WordPress</a></dt>
            <dd>Learn about WordPress</dd>
        </dl>
    </aside>

    <footer class="container">
        <h4>People I Enjoy</h4>
        <ul class="col">
            <li><a href="http://fastfoodreviewed.com">Jesse Lynch</a></li>
            <li><a href="http://jeffcampana.com">Jeff Campana</a></li>
            <li><a href="http://perishablepress.com">Jeff Starr</a></li>
        </ul>
        <ul class="col">
            <li><a href="http://davidwalsh.name">David Walsh</a></li>
            <li><a href="http://thestrategicretreat.com">Jeff Penman</a></li>
            <li><a href="http://http://shiftedfrequency.com">Richard Felix Jr.</a></li>
        </ul>

        <h4>Sandwiches</h4>
        <ul class="col container" id="sandwich-list">
            <li><a href="http://jimmyjohns.com">Jimmy Johns</a></li>
            <li><a href="http://subway.com">Subway</a></li>
            <li><a href="http://potbelly.com">Potbelly</a></li>
        </ul>

        &copy;2007-<?php echo date("Y"); ?> Chris Coyier
    </footer>

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script src='/js/main.js'></script>

    <!-- Google Analytics Code -->
    <?php include_once("inc/analytics.php"); ?>

</body>

</html>

Fonte: CSS-Tricks

Ele é bonito porque segue um padrão, do início ao fim, todos os elementos estão sendo fechados, as imagens todas argumentadas, semântico, entre outros fatores.

Legibilidade e manutenção

Um código ilegível pode funcionar? Sim.

É o que diz Robert C. Martin em Clean Code (livro que já foi citado aqui). A questão é por que não devemos escrever um código ruim? A resposta é manutenção.

Recorrendo ao que já foi falado lá em cima, o público alvo do seu código é a sua equipe, e se existe uma equipe, eles também vão prestar manutenção no código que foi escrito.

Um código bem escrito, documentado e legível poupará tempo na manutenção, levando à produtividade.


Falar sobre esse assunto é muito delicado pois envolve opinião, já que não existe um guia oficial de HTML/CSS. Tentei deixar o mínimo de argumentação e mais teoria, explicando porque uma coisa é preferível à outra. Deixo para você alguns links que possam ajudar a definir convenções ou até para leitura posterior:

1
  • Bem, talvez seja bom começar a aplicar às boas práticas de programação que o W3C fornece pois com estas práticas é possível realizar manutenções futuramente e serem interpretados por outros programadores.
  • Outra prática para o CSS é aplicar às Linguagens de Folha de Estilos Dinâmica, existe muitas ferramentas como SASS, LESS, STYLUS e dentre outros pois você vai trabalhar com a hierarquia dos elementos e a repetição de códigos, e estas ferramentas tenta minimizar a repetição.
  • Por ultimo para otimizar seja bom aprender os Automatizadores de Tarefas como o Gulp (Neste caso será necessário aprender sobre NodeJS nesta etapa), ele traz várias ferramentas que vai diminuir os arquivos sem perder a qualidade, vai verificar os prefixos adequados e organiza-los.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .