Incrementamos o conteúdo do Checklist para HTML.

Assim como temos definido a ordem das propriedades CSS, também documentamos uma ordem para os atributos de HTML.

Agora o Checklist para HTML possui a seção sobre Ordem dos atributos HTML.

Nosso padrão de organização para estilização é separar os estilos nos seguintes arquivos:

1. estilo_geral.css – para estilos gerais de todo o site
2. estilo_paginas.css – estilos específicos de todas as páginas
3. estilo_print.css – estilos para impressão

Incluímos no HTML nesse formato:

  <link href="css/estilo_geral.css?v=1" rel="stylesheet" />
  <link href="css/estilo_paginas.css?v=1" rel="stylesheet" />
  <link href="css/estilo_print.css?v=1" rel="stylesheet" media="print" />

Caso o projeto seja pequeno, não usamos o arquivo “estilo_paginas.css”, incluímos os estilos no arquivo “estilo_geral.css”.

No documento de estilos gerais incluímos nosso padrão de estilização para formulários. Que incluí estilos prontos para determinados códigos HTML pré-definidos.

estilo_geral.css

/*
  Cliente:
  Projeto: 

  --------------
  PADROES DE CODIGO - Frameworks FED v2.5
  --------------

  Nossos projetos sao desenvolvidos de acordo com um padrao de escrita.
  Mais informacoes sobre ele em: http://www.webstandards.blog.br/checklist-para-desenvolvimento-css/
  Qualquer duvida, mande um e-mail para: contato[at]webstandards.blog.br

  --------------
  PALETA DE CORES
  --------------

  #000000 - Textos
*/

/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/

/* ------- ELEMENTOS ------- */

  /* reset */
  body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, menu, form, fieldset, legend, button, figure, section, summary { margin: 0; padding: 0; }
  article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
  button, fieldset, iframe, img { border: 0; }
  input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; }
  details summary::-webkit-details-marker { display: none; }

  html { font: 100% Arial, Helvetica, sans-serif; color: #000; }
  body { font-size: .75em; } /* tamanho da fonte: 12px */

  /* formulario */
  form ol, form ul { list-style: none; }
  form ol li { margin-bottom: .41em; padding: .41em 0; }
  .ie6 form ol li { height: 1%; overflow: hidden; }
  form #instrucoes_formulario { padding: 1.66em 0; }
  form #instrucoes_formulario p { margin-bottom: .83em; }
  form #instrucoes_formulario p:last-child { margin-bottom: 0; }

    /* label */
    form ol label, form ol p, form ol ol li:first-child label { float: left; width: 80px; padding-right: 10px; line-height: 2em; text-align: right; }

    /* listas internas */
    form ol ol, form ol ul, form ol li li { display: inline-block; vertical-align: top; }
    .ie7 form ol ol, .ie7 form ol ul, .ie7 form ol li li, .ie6 form ol ol, .ie6 form ol ul, .ie6 form ol li li { display: inline; }
    form ol li li { margin: 0 10px 0 0; padding: 0; }

    /* label interno */
    form ol li li label, form ol p.erro, form ol li.confirmacao label { float: none; width: auto; padding-right: 0; text-align: left; }
    form ol ul li label { margin-right: 0; }

    /* mensagem de erro */
    form ol p.erro { display: block; }
    .ie6 form ol p.erro { display: inline; float: left; }
    form p.erro, form ol li.erro { color: #e33; }
    form li.erro { border-radius: 3px; }
    form li.erro, form input.erro, form textarea.erro { background-color: #f7cac9; }
    form ol li li p.erro { margin-left: 0; }

  form #instrucoes_formulario,
  form ol li p.erro,
  form ol ol li:first-child p.erro,
  form ol li.confirmacao label,
  form button { margin-left: 90px; }

/* ------- CLASSES ------- */
.limites { width: 980px; margin: 0 auto; }

  /* alinhamentos */
  .direita { float: right; }
  .esquerda { float: left; }
  p.direita, p.esquerda { float: none; }
  p.direita { text-align: right; }
  p.esquerda { text-align: left; }
  .centro { text-align: center; }

  /* paginacao */
  .paginacao li { display: inline-block; }
  .paginacao li a[rel="prev"], .paginacao li a[rel="next"] { }
  .paginacao li a[rel="prev"]:hover, .paginacao li a[rel="next"]:hover { }

  /* popup */
  .popup { display: none; position: absolute; z-index: 10; }
  .popup a.fechar { }
  .pelicula { position: absolute; z-index: 9; }

  /* botoes */
  a.botao, a.botao strong { display: inline-block; background: url(../images/botao.png) no-repeat; line-height: 25px; text-decoration: none; }
  a.botao { padding-left: 10px; }
  a.botao strong { padding-right: 10px; background-position: right 0; font-weight: normal; }
  a.botao:hover { background-position: 0 0; }
  a.botao:hover strong { background-position: right 0; }

/*
  --------------
  ESTRUTURA
  --------------
*/

/* ------- TOPO ------- */
#topo { }

/* ------- CONTEUDO ------- */
#conteudo { }

  /* coluna1 */
  #conteudo #coluna1 { }

  /* coluna2 */
  #conteudo #coluna2 { }

/* ------- RODAPE ------- */
#rodape { }

estilo_paginas.css

/*
  --------------
  PAGINAS ESPECIFICAS
  --------------
*/

/* ------- PAGINA INICIAL ------- */
#home { }

estilo_print.css

/*
  --------------
  VERSAO PARA IMPRESSAO
  --------------
*/

/*
  --------------
  ELEMENTOS, CLASSES E ESTRUTURA
  --------------
*/

/* ------- ELEMENTOS ------- */
* { background: transparent !important; text-shadow: none !important; color: black !important; }
body { font-size: 11pt; } /* tamanho da fonte: 12px */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
form { display: none; }
iframe, img { border: 0; }
img { max-width: 100% !important; }
table { border: 1px solid #000; border-collapse: collapse; }
a { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }

/* ------- CLASSES ------- */
.paginacao, .popup { display: none; }

/* ------- ESTRUTURA ------- */
#topo, #coluna1, #rodape { display: none; }

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Gostaria de padronizar seus documentos XHTML? Uma boa forma de começar seu código é com o nosso exemplo utilizado pela equipe, ao início de todos os projetos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/estilo_geral.css?v=1" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/estilo_paginas.css?v=1" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/estilo_print.css?v=1" rel="stylesheet" type="text/css" media="print" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script src="scripts/swfobject.js"></script>
  <script src="scripts/funcionalidades.js"></script>
  <!--[if lt IE 9]><script src="scripts/selectivizr-min.js"></script><![endif]-->
  <!--[if lt IE 8]><script src="scripts/ie6update.js"></script><![endif]-->
  <!--[if IE 6]><script src="scripts/DD_belatedPNG_0.0.8a-min.js"></script><![endif]-->
</head>
<body>

<!-- abre limites -->
<div class="limites">

<!-- abre topo -->
  <div id="topo">

  </div>
<!-- fecha topo -->

<!-- abre conteúdo -->
  <div id="conteudo">

  </div>
<!-- fecha conteúdo -->

<!-- abre rodapé -->
  <div id="rodape">

  </div>
<!-- fecha rodapé -->

</div>
<!-- fecha limites -->

</body>
</html>

Scripts usados

• jQuery
• SWFObject
• selectivizr
• IE6 Update
• DD_belatedPNG