Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

23 2009 janeiro

Documento base para CSS

Autor: g3 em CSS

Última modificação: 13 junho 2012

LESS

Para desenvolvimento CSS, utilizamos a linguagem dinâmica de estilos LESS, a qual nos permite estender o CSS com comportamento dinâmico através de variáveis, mixins, operações e funções.

Para usar LESS é necessário usar um JavaScript que permite ao browser interpretar diretamente a linguagem, ou algum compilador que converta seu código do formato LESS para CSS.

Existem vários compiladores para diferentes sistemas operacionais; no nosso caso utilizamos um compilador que, ao detectar a atualização do arquivo LESS, gera automaticamente o CSS minificado (sem espaços, comentários e quebras de linha), o qual puxamos diretamente em nossos HTMLs.

Organização dos arquivos CSS

Nosso padrão de organização para estilização é separado entre os seguintes arquivos:

Estilos gerais

  1. geral-min.less – Estilos para todos os dispositivos;
  2. desktop-min.less – Dispositivos com largura a partir de 769px;
  3. tablet-min.less – Dispositivos com largura de 480px até 768px;
  4. mobile-min.less – Dispositivos com largura de 320px até 479px;
  5. impressao-min.less – Estilos para versão de impressão.

Estilos específicos

Para grandes projetos deve-se manter os arquivos:

  1. desktop-templates-min.less – Estilos específicados por página (id) para versão desktop;
  2. tablet-templates-min.less – Estilos específicados por página (id) para versão tablet;
  3. mobile-templates-min.less – Estilos específicados por página (id) para versão mobile.

Conforme à dimensão do projeto é recomendavél adicionar o arquivo:

Além de todos arquivos utilizamos um arquivo como biblioteca de classes com estilos gerais. Nesse arquivo ficam as váriaveis e mixins globais do LESS, que podem ser utilizadas em qualquer definição de estilo.

  • elementos.less – Classes com estilos gerais, utilizados em todo os arquivos LESS.

Os arquivos com estilos gerais incluem os arquivos de estilos específicos via @import, portanto nos arquivos HTML são adicionados apenas os arquivos gerais.

Media Query

Incluímos no HTML nesse formato:

  <link href="css/geral-min.css?v=1" rel="stylesheet" />
  <link href="css/mobile-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 479px)" />
  <link href="css/tablet-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 768px)" />
  <link href="css/desktop-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 769px)" />
  <link href="css/impressao-min.css?v=1" rel="stylesheet" media="print" />
  <!--[if lt IE 9]>
    <link href="css/desktop-min.css?v=1" rel="stylesheet" />
    <script src="js/selectivizr-min.js"></script>
  <![endif]-->

*Selectivizr é um script que interpreta pseudo-classes e seletor por atributo no Internet Explorer 6-8.

Caso o projeto seja pequeno, não usamos nenhum arquivo específico para páginas, incluímos todos estilos nos arquivos: “geral.less”, “mobile.less”, “tablet.less” e “desktop.less”.

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.

elementos.less

/*
  --------------
  BIBLIOTECA DE CLASSES
  --------------
*/


/*
  --------------
  PALETA DE CORES
  --------------
*/


@cor_textos: #000; // Textos de conteúdo.
@cor_body: #fff; // Cor do fundo do site.


/*
  --------------
  CLASSES
  --------------
*/


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

/* image replacement */
.rpl { font: 0/0 a; color: transparent; }

geral-min.less

/*
  Cliente: 
  Projeto: 

  --------------
  PADRÕES DE CODIGO - Frameworks FED v3.0
  --------------

  Nossos projetos são desenvolvidos de acordo com um padrão de escrita.
  Mais informações sobre ele em: http://www.webstandards.blog.br/checklist-para-desenvolvimento-css/
  Qualquer dúvida, mande um e-mail para: contato[at]webstandards.blog.br
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/*
  --------------
  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: @cor_textos; }
  body { background-color: @cor_body; font-size: .75em; } /* tamanho da fonte: 12px */


  /* formulário */
  form {
    @largura_label: 100px;
    @padding_right_label: 10px;

    #instrucoes-formulario { padding: 1.66em 0;
      p { margin-bottom: .83em;
        &amp;:last-child { margin-bottom: 0; }
      }
    }

    ol, ul { list-style: none; }

    ol {
      li { margin-bottom: .41em; padding: .41em 0; }

      /* label */
      label,
      p,
      ol li:first-child label { float: left; width: @largura_label; padding-right: @padding_right_label; line-height: 2em; text-align: right; }

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

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

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

    /* margin left de alinhamento com os campos */
    #instrucoes_formulario,
    ol li p.erro,
    ol ol li:first-child p.erro,
    ol li.confirmacao label,
    button { margin-left: @largura_label + @padding_right_label; }
  }

  // correções ie

  /* linhas */
  .ie6 form ol li { height: 1%; overflow: hidden; }

  /* listas internas */
  .ie6, .ie7 {
    form {
      ol {
        ol,
        ul,
        li li { display: inline; }
      }
    }
  }

  /* mensagem de erro */
  .ie6 form ol p.erro { display: inline; float: left; }


/* ------- CLASSES ------- */

  /* paginação */
  .paginacao {
    li { display: inline-block;
      a[rel="prev"], a[rel="next"] {
        &amp;:hover {
        }
      }
    }
  }

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

  /* botões */
  .botao,
  .botao strong { display: inline-block; background: url(../images/botao.png) no-repeat; line-height: 25px; text-decoration: none; }
  .botao { padding-left: 10px;
    strong { padding-right: 10px; background-position: right 0; font-weight: normal; }
    &amp;:hover {
      background-position: 0 0;
      strong { background-position: right 0; }
    }
  }
  button.botao::-moz-focus-inner { border: 0; padding: 0; }


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


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

desktop-min.less

/*
  --------------
  DESKTOP - Dispositivos com largura a partir de 769px
  --------------
*/

@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("desktop-templates-min.css"); /* estilos específicos dos templates */


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


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

  /* chrome frame */
  .chrome_frame { position: relative; display: none; height: 116px; padding-top: 25px; background: url(../imagens/chrome-frame-bg.jpg) center 0 repeat-x; font: 12px Arial sans-serif !important; color: #545454 !important;
    .limites { position: relative; width: 845px; margin: 0 auto; padding: 0 20px 0 135px; background: url(../imagens/chrome-frame-logo.png) 20px 0 no-repeat; }
    h3 { margin-bottom: 1em; font-size: 1.33em !important; }
    p { margin: 0 240px 12px 0; }
    a { text-decoration: none; color: #0000ff; }
    .instalar { position: absolute; top: -5px; right: 20px; width: 190px; height: 70px; padding: 15px 10px; border: 1px solid #dadada; background: #fff; font-size: .9em !important;
      p { margin: 0; text-align: center; }
      a.botao_instalar { display: block; width: 118px; height: 30px; margin: 0 auto 15px; background: url(../imagens/chrome-frame-botao.png) no-repeat; line-height: 30px; font-weight: bold; font-size: 1.3em; text-align: center; text-decoration: none; color: #fff; }
    }
    a.fechar { position: absolute; top: -15px; right: -15px; width: 14px; height: 14px; background: url(../imagens/chrome-frame-fechar.png) no-repeat; text-indent: -9999em; overflow: hidden; }
  }


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


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

tablet.css

/*
  --------------
  TABLET - Dispositivos com largura de 480px ate 768px
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("tablet-templates-min.css"); /* estilos específicos dos templates */


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


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



/* ------- CLASSES ------- */



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


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

mobile-min.less

/*
  --------------
  MOBILE - Dispositivos com largura de 320px ate 479px
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("mobile-templates-min.css"); /* estilos específicos dos templates */


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


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

  /* formulário */

  form {
    ol {
      /* label */
      label,
      p,
      ol li:first-child label { display: block; float: none; width: auto; padding-right: 0; text-align: left; }

      li p.erro,
      ol li:first-child p.erro,
      li.confirmacao label { margin-left: 0; }
    }

    #instrucoes_formulario,
    button { margin-left: 0; }
  }


/* ------- CLASSES ------- */
.limites { padding: 10px; }


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


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

“desktop-templates-min.less”, “tablet-templates-min.less”, “mobile-templates-min.less” e “templates-min.less”

/*
  --------------
  PÁGINAS ESPECÍFICAS
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/* ------- PÁGINA INICIAL ------- */
#inicial { }

impressao-min.less

/*
  --------------
  VERSÃO PARA IMPRESSÃO
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/*
  --------------
  ELEMENTOS, ESTRUTURA e CLASSES
  --------------
*/


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

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) ")"; }


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


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

Faça download do Framework padrão e veja os arquivos, organização das pastas e ajuste conforme sua necessidade.

5 comentários

Responder
  1. 22 de abril de 2009

    Alinhamento vertical e horizontal com CSS | Blog Web Standards disse:

    […] padrão de documento base para CSS coloque o seguinte […]

  2. 26 de novembro de 2010

    Leonardo Rodrigues disse:

    Bacana! Uso um “esquema” parecido! Só acho que a ordem alfabética dos atributos ainda ajuda bastante :) Primeira visita minha aqui. Show!

  3. 14 de dezembro de 2011

    Dennis disse:

    Hi, you should use english/international/conventional class names … then I could read the code :-)

  4. 31 de março de 2012

    Leandro Freitas disse:

    Muito boa essa adptação para html5/css3 com desgin responsive!
    Eu posso colocar os estilos de mobile, tablets e desktop no mesmo arquivo?
    Faz muita diferença eu chamar uma folha de estilo ou várias folhas de estilo?

    Acredito que já esta na hora mesmo de desfrutarmos dessas novas tecnologias!

    Parabéns, abraço!

  5. 11 de abril de 2012

    g3 disse:

    @Leandro Freitas: Quando desenvolvemos projetos pequenos (landing page, fanpage, hotsite) não usamos os arquivos “xxxx_templates.css”, nós removemos os arquivos e os import e caso seja necessário incluir estilo específico colocamos no final de cada arquivo css conforme o dispositivo.

Escreva seu comentário