Uma outra visão sobre CSS Frameworks

mar 19

CSS Design 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: