Maturando o HTML

Construir um bom código HTML garante um bom andamento de um projeto de desenvolvimento de interfaces. Muitos dos atributos e marcações que normalmente sentimos falta apenas na integração das camadas de apresentação e de comportamento podem ser antecipados em um código HTML maduro e eficiente, deixando apenas as particularidades de cada interface para ajustes pós-integração.

Tags: ,

Ordenando os seletores CSS

O artigo sobre organização do CSS era para ser dividido em duas partes. Desisti logo depois. Achei que estava indo longe demais na minha mania de código limpo. Mas a Smashing Magazine me provocou e tive que voltar atrás. Vamos listar alguns parâmetros para pôr uma ordem definitiva nos seletores CSS.

Tags: , , ,

Uma outra visão sobre CSS Frameworks

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:

Tags:

CSS livre, leve e solto

Há várias formas de deixar seu CSS levinho, levinho. Algumas são automáticas, mas as melhores mesmo são aquelas que exigem apenas um pouco de disciplina e atenção na hora de evoluir com o código e a montagem.

Os melhores métodos para diminuir o tamanho dos arquivos passam por configurações no servidor. Compressão GZIP e configuração do “expires” estão entre os meus métodos favoritos. Mas nem sempre o desenvolvedor tem permissões para fazer isso ou solicitar. Aqui seguem algumas dicas de fazer otimização no CSS que não precisam de mais ninguém a não ser o próprio desenvolvedor de interfaces.

Diminuindo o número de requests

Alguns layouts exigem vários pedacinhos de botões, fundos, setas, efeitos. Cada uma das imagens recortada pode ser bem pequena, 1Kb apenas, mas para cada arquivo solicitado para o servidor há outro 1Kb referente à requisição do arquivo. Algumas sugestões para não sofrer na mão dos requests são:

  • Todos os ícones de uma mesma palheta num mesmo arquivo - icon-king.comProcurar imagens .gif ou .png que utilizem a mesma palheta de cores e condensá-las num mesmo arquivo. Se for usar como fundo, use posicionamento da imagem e um crop. Ninguém vai notar.
  • Imagem de referência para efeito de item no estado normal e ativo - everaldo.comSe houver menus com estado de inativo, ativo e hover, coloque todos os estados em um mesmo arquivo, posicionando um estado sobre o outro. Altere o posicionamento do fundo para cada estado.
  • Cada arquivo CSS é um request diferente, não importando se ele está sendo chamado no HTML ou importado dentro do CSS (@import). Economize arquivos! Use novos arquivos CSS apenas se absolutamente necessário. Para melhorar a organização, faça blocos de definições divididos por mídia (@media) e por tipo (tags, classes, IDs). É como usar o conceito de CSS frameworks, mas com menos arquivos.

Usando atalhos

Para cores:

Antes:

border-color: #FF0099;

Depois:

border-color: #F09;

Para espessuras:

Antes:

border-width: 1px 1px 1px 1px;
margin: 10px 0px 10px 0px;

Depois:

border-width: 1px;
margin: 10px 0;

Para fundos, fontes e listas:

Antes:

font-weight: bold;
font-style: italic;
font-variant:small-caps;
font-size: 1em;
line-height: 1.4em;
font-family: Verdana, Arial, Helvetica,sans-serif;

Depois:

font: bold italic small-caps 1em/1em verdana, sans-serif;

Usando alternativas

Algumas propriedades possuem alternativas. Escolha sempre a com menos caracteres. Por exemplo, troque font-weight:bold por font-weight:800, background-position:left top por background-position:0 0 e assim por diante.

Pontuando corretamente

Não é necessário encerrar cada bloco de seletores com ponto-e-vírgula:

a{
    color:#F09;
    text-decoration:underline
}

Vamos começar tudo de novo…

Mesmo que você não seja fã de CSS frameworks, use pelo menos um conjunto de parâmetros CSS para limpar todos as definições de estilo nativas do navegador. Causa um estranhamento no início, mas é bem mais rápido de implementar. Além disso, evita várias definições para limpar estilos espalhados pelo site e hacks para tentar igualar as definições de um browser para outro. Veja sobre reset.css mais no site do Eric Meyer.

Robôs para seu prazer

Para a publicação de uma inteface, é interessante usar alguma ferramenta de otimização como o Icey – CSS Compressor, Clean CSS e o CSS Tweak. Teste o site nestes e em outras ferramentas pois os resultados variam de projeto para projeto.

Lembre-se sempre de fazer um back-up dos seus arquivos antes de utilizar uma destas ferramentas. E teste, teste tudo novamente depois de passar os arquivos .css por estes filtros.

Há ferramentas para condensar arquivos de CSS e de JavaScript.

Referências:

Tags: , ,