pixeladas aleatórias

Uma outra visão sobre CSS Frameworks

mar 19 2008

CSS Design css frameworks 19 comentários

Existem várias formas de produzir com CSS frameworks. A visão que irei mostrar aqui consiste em mais uma forma de organizar e otimizar os estilos de um site, bem diferente do conceito de reutilização de código para outros sites futuros. É uma visão próxima do artigo original em A List Apart.

Importante! Esta é apenas uma sugestão de trabalho com CSS e nenhum padrão de desenvolvimento. Cada empresa ou desenvolvedor deve procurar a sua própria forma de construir seu código.

Costumo dividir meus arquivos CSS em dois tipos de blocos de tags, identificadores e classes: um por mídia e outro por tipo de conteúdo.

Uma introdução

Mas antes mesmo de começar a trabalhar o estilo, que tal um comentário sobre que projeto que estamos trabalhando? É a única chance que um desenvolvedor de interface tem que ter algum controle textual sobre seu trabalho.

/*
Theme Name: Layout em curvas insanas
Theme URI: http://teste.sydi.net
Description: Desenvolvimento da nova versão do site
Version: 0.9
Author: Simone Villas Boas
Author URI: http://sydi.net/
*/

É uma idéia descaradamente roubada do WordPress – que deve ter sido pega em outro lugar também – e que adotamos em todos os projetos.

Dividindo por mídia

Não há novidade alguma aqui:

@media screen{
	/* minhas definições para visualização num
		monitor comum de computador ou notebook */
}

@media print{
	/* minhas definições para impressão do arquivo */
}

@media screen,print{
	/* minhas definições para ambos */
}

Como ando obcecada em diminuir os requests HTTP, não uso o outro método de separar os tipos de mídias em arquivos diferentes. Esta é uma escolha do desenvolvedor de interface!

<link rel="stylesheet" type="text/css"
		media="all" href="/css/principal.css" />

<link rel="stylesheet" type="text/css"
		media="screen" href="/css/monitor.css" />

<link rel="stylesheet" type="text/css"
		media="print" href="/css/imprimir.css" />

Dividindo por tipo de conteúdo

Esta é uma lista que fui testando e aprimorando nos últimos projetos. Definindo dentro de cada mídia:

1. Reset, onde limpo todas as definições de estilo padrão do navegador;
2. Basic, onde estão as definições genéricas de tags e classes;
3. Grid, onde desenvolvo estrutura da página;
4. Format, onde configuro cores, fundos, tipologia, por área de layout;
5. Pages, onde estão as definições especiais de cada seção do site;
6. Hacks, onde junto todos os códigos pré-construídos de CSS como image replacements, clear-fix e outras definições genéricas.

Agora cada item em detalhes e exemplos:

Preferi manter os títulos em inglês para manter algum distanciamento. No entanto, como todo o resto neste artigo, esta é mais uma convenção.

1. Reset

   Uso a opção testada pelo Eric Meyer com algumas pequenas revisões particulares:

   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, font, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
   	margin: 0;
   	padding: 0;
   	border: 0;
   	outline: 0 !important;
   	font-weight: normal;
   	font-style: normal;
   	font-size: 100%;
   	font-family: inherit;
   	vertical-align: baseline
   }
   body {
   	line-height: 1;
   	background: #fff;
   	color: #000
   }
   ol, ul {
   	list-style: none
   }
   blockquote, q {
   	quotes: none
   }
   ins {
   	text-decoration: none
   }
   del {
   	text-decoration: line-through
   }
   table {
   	border-collapse: collapse;
   	border-spacing: 0
   }
   address{
   	font-style: normal
   }

2. Basic

   Definição dos estilos das tags, que é a parte mais genérica da folha de estilo:

   body {
   	background: #DDD;
   	font: 62.5% Arial, Helvetica, sans-serif;
   	color: #666;
   }
   h2 {
   	font-size: 2.5em;
   	font-weight: 400;
   	color: #013671;
   }
   h3 {
   	font-size: 1.2em;
   	padding: 1.4em 0 0.8em;
   }
   td {
   	background: #FFF;
   }

   e de classes que deveria ser também bem genérico e muito focado.

   .alert{
   	font-color: #F00;
   }
   td.even{
   	background: #DDD;
   }

3. Grid

   É a estrutura essencial da página. É aqui que grande parte dos CSS Frameworks trabalha quando fornece um layout pré-moldado. Este é um exemplo de tela com conteúdo centralizado como é o caso do tema atual doPixeladas:

   body{
   	text-align: center
   }
   #page{
   	width: 700px;
   	margin: 0 auto;
   	text-align: left
   }
   #header{
   	height: 100px
   }
   #content{
   	float: left;
   	width: 500px
   }
   #sidebar{
   	float: right;
   	width: 200px
   }
   #footer{
   	height: 40px
   }

   O segredo aqui é a simplicidade. Mantendo o mínimo de informações sobre a estrutura primordial da tela é mais fácil fazer alterações estruturais que normalmente seriam traumáticas, como mudar a largura da coluna lateral. Se a folha de estilos acabasse aqui, teríamos uma formatação muito básica, quase um protótipo navegável. É por aqui que gosto de começar a montar uma tela.

   Obs.: O truque do text-align é para o Internet Explorer 6 e anteriores.

4. Format

   Aqui sim centralizamos todas as decisões de cores, fundos e tipologia que não são tão genéricas quanto para tags e classes e nem tão específicas que funcionem apenas em uma parte do site. Para começar, vamos definir para as seções do layout que vimos anteriormente em Grid:

   #page{
   	background: #FFF
   }
   #header{
   	background: #333;
   	color: #FFF
   }
   #content{
   	color: #333
   }
   #sidebar{
   	font-size: 0.8em;
   }
   #footer{
   	background: #000;
   	font-size: 0.8em;
   	color: #FFF
   }

   E um pouco além:

   #sidebar li{
   	list-style: square
   }
   #sidebar li li{
   	list-style: disc
   }

5. Pages

   Considerando que algumas seções do site precisam de um tratamento especial. Por exemplo, uma imagem conceitual para cada seção do site:

   #content{
   	background: no-repeat right top;
   }
   #about #content{
   	background-image: url(images/bg_about.gif);
   }
   #products #content{
   	background-image: url(images/bg_products.gif);
   }
   #contact #content{
   	background-image: url(images/bg_contact.gif);
   }

6. Hacks

   Este não é o melhor rótulo para o bloco já que aqui não estão hacks de CSS e sim configurações genéricas que ajudam a construir o layout como image replacement e clear-fix:

   /* img repl */
   h1 a, h3.description, #menu a{
   	display: block;
   	overflow: hidden;
   	text-indent: -999px;
   }
   /* clear-fix */
   #main: after{
   	content: ".";
   	display: block;
   	clear: both;
   	visibility: hidden;
   	/*line-height: 0;*/
   	height: 0;
   }
   #main{
   	display: inline-block;
   }
   html[xmlns] #main{
   	display: block;
   }
   * html #main{
   	height: 1%;
   }

   Cada um tem sua técnica favorita para o image replacement e outros usam a definição display: table ao invés do clear-fix. Não importa. Isto é apenas um exemplo.

Dividir para conquistar

Se sentir que o arquivo está grande e de difícil manejo, o desenvolvedor de interfaces pode decidir dividí-lo em várias partes e importá-los em um único CSS:

@import url("reset.css");
@import url("basic.css");
@import url("grid.css");
@import url("format.css");
@import url("pages.css");
@import url("hacks.css");
...

Ah, mas é mais trabalho?

Estabelecer critérios para organizar o código CSS é mais trabalhoso no início, mas vale a pena durante o projeto e durante a manutenção, principalmente se for um código compartilhado por vários desenvolvedores. E como tudo no desenvolvimento de acordo com os padrões, a prática torna tudo mais rápido e fácil.

Teste seus próprios critérios e compartilhe com a gente!

E o Blueprint e genéricos?

Não, obrigada.

Referências:

• Frameworks for Designers, A List Apart;
• CSS Frameworks + CSS Reset: Design From Scratch, Smashing Magazine.