Queria dicas para aplicar no meu aprendizado. Sou um iniciante e sempre escuto falar do código limpo.
-
1Basta 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.– Felipe DuarteCommented 11/09/2016 às 17:57
-
Da uma olhada nesse link pode te ajudar: browserdiet.com/pt– Gabriel FariaCommented 11/09/2016 às 18:51
2 Respostas
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’t dress up as a hipster for Halloween. Their attire is already so bizarre that there isn’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>
©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:
- Guia de HTML e CSS, do Google
- Naming Conventions for Class and ID in CSS, por Molly E. Holzschlag
- Guia de HTML, do Wordpress
- Mastering the Language of Web Design, por Eric Meyer
- Como escrever um código legível e de fácil manutenção?, por Maniero — foge do ramo HTML/CSS e vai mais para o conceito, também pode te ajudar.
- O que define um código limpo?, por Maniero — mesma coisa do de cima.
- Como perder peso no browser?, por Zeno Rocha e equipe — muitas dicas úteis e mais convenções.
- Por que não comentar o código?, por CypherPotato — explica porque não é ideal usar comentários no código.
- 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.