Elemento HTML body: como aproveitá-lo melhor

Eu lhes apresento o elemento body:

    view plaincopy to clipboardprint?

    <body>  
    <!-- todo o conteudo do site aqui dentro -->  
    </body>

Todos nós o conhecemos, mas será que estamos utilizando-o de verdade?

O body é o elemento no nosso documento responsável por ser o container de todo conteúdo do site.
Diferente do <head>, o que está dentro do <body> é oque fica, ou ficará, disponível para a visualização do visitante, como títulos, textos e imagens. Todos nós já usamos o body para isso, mas o que mais podemos fazer com ele?

Pode parecer absurdo falar isso, mas convém lembrar: o body é uma tag HTML; e como tal, aceita atributos: veja! Os mais interessantes são o id e a class.

Vocês já tinham colocado um desses no body de algum site?

    view plaincopy to clipboardprint?

    <body id="home">

Usar o body com um ID

É uma proposta interessante e nos ajuda a economizar alguns elementos de estruturação de layout de vez em quando. Por exemplo, aqueles layouts onde a home do site difere por poucas coisas das páginas internas, como: topo mais alto, ou o rodapé inexistente. Esse tipo de situação de ser facilmente resolvida usando o atributo ID no body.

Sendo a home, estilizamos o topo diferente do que ele seria nas internas:

    view plaincopy to clipboardprint?

    body#home #header { height: 200px; }  
    #header { height: 100px; }

A marcação HTML fica intacta e assim evitamos coisas, como #header_home. E isso nos levará a escrever um CSS mais bonito também. Afinal, fizemos um condicional no CSS!

Usar o body com uma ou mais CLASSes

Na verdade, eu comecei explicando o ID, porém hoje em dia, eu prefiro uma CLASS:

    view plaincopy to clipboardprint?

    <body class="home">

E tudo pelo simples motivo de poder usar mais de uma. Com CLASSes, temos todos os benefícios que citei do ID:

    view plaincopy to clipboardprint?

    body.home #header { height: 200px; }  
    #header { height: 100px; }

E é possível colocar mais de uma, veja:

    view plaincopy to clipboardprint?

    <body class="cursos html">

A motivação disso é um menu dropdown.

    view plaincopy to clipboardprint?

    <li>Cursos  
       <ul>  
          <li>HTML</li>  
          <li>CSS</li>  
          <li>JavaScript</li>  
       </ul>  
     </li>

Assim cada página interna teria uma combinação de CLASS para o body diferente:
class=”cursos html”, class=”cursos css”, class=”cursos javascript”. A vantagem disso, é que a class=”cursos” é comum a todos eles e no CSS podemos fazer facilmente um destaque naquele item de menu – se estivermos dentro de um dos filhos. Mais uma vez, levamos o poder do CSS à outro nível!

Tendo a CLASS HTML, CSS e sabendo que cada página interna terá somente um título H1, podemos, por exemplo, fazer o H1 ser azul na página de HTML, ser vermelho na página de CSS e ser de qualquer outra cor por padrão, nas páginas em que não definirmos nada.

    view plaincopy to clipboardprint?

    .html h1 { color: #00f; }  
    .css h1 { color: #f00; }  
    h1 { color: #000; }

A grande sacada disso é não precisarmos adicionar nada mais no HTML, além das respectivas classes no body.

O body é pai de todo mundo

Conhecendo o efeito cascata do CSS e sabendo que tudo o que o visitante verá está dentro do body do documento, é melhor usar a herança do CSS para definir os padrões do site, como:

    view plaincopy to clipboardprint?

    body { font-size: 12px; font-family: Tahoma, sans-serif; color: #333; }

E por que o body? Porque todos os elementos posteriores herdarão dele e isso tudo com uma especificidade bem baixa. Então, não precisamos brigar para sobrescrever estilos.

Deve ter ficado implícito, mas quero ressaltar com uma ressalva: todos os elementos, menos os de formulário. Por algum motivo que desconheço, input, select e textarea, não herdam ‘naturalmente’ as definições de fonte declaradas no body.

    view plaincopy to clipboardprint?

    body, input, select, textarea {  
        font-size: 12px; font-family: Tahoma, sans-serif; color: #333;  
    }

Com isso, cobrimos todas as tags e não estragamos as definições padrões, como: <small> terá uma fonte menor que o body e <h1> continua com uma fonte maior. Por esse motivo que não uso o seletor global * para esse trabalho. Ele aplica a todos os elementos, mas de forma “forçada”; elemento por elemento. E não por herança como ocorre quando trabalhamos com o body.

A ideia é brigarmos menos com nós mesmos. E só sobrescrever poucas propriedades. Isso é ótimo por uma outra questão: não corremos o risco de “esquecer” de alguma tag, visto que com uma declaração simples, e aproveitando a herança do CSS, nós a atingimos. Por este motivo não gosto daqueles CSS resets gigantescos e milagrosos – entretanto isso é assunto para um próximo artigp.

O body aceita CSS

Sabe aquele fundo do topo com degradê e aquela linha do header que vai de uma ponta a outra do browser? Então, aplica como background do body. Simples assim! Descartamos a necessidade de um #wrap_header, e jogamos em uma só imagem como background do body, pois ele mesmo já tem de graça para gente, 100% de largura da viewport.

Esse é apenas um exemplo para tentar “abrir” a mente. As possibilidades são muitas. Às vezes, precisamos rever coisas “óbvias” ou “básicas”, pois podem fazer coisas impressionantes.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: