pixeladas aleatórias » CSS Design

Maturando o HTML

Simone Villas Boas — Wed, 25 Jun 2008 22:32:03 +0000

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. Para isso, deve-se seguir regras bem simples:

Cada elemento-chave deve poder ser identificado

Em nosso código de teste, vamos usar uma lista não-ordenada simples:


    Primeiro item
    Segundo item
    Terceiro item
    Quarto item

Imaginando que haverá outras listas nesta tela, o ideal é identificá-la diretamente:


    Primeiro item
    Segundo item
    Terceiro item
    Quarto item

Ou pelo seu pai, onde todas as listas-filhas terão a mesma apresentação e comportamento:


    
        Primeiro item
        Segundo item
        Terceiro item
        Quarto item

Se esta lista for um menu, certamente o designer irá escolher uma forma de realçar cada item ou pedir certo comportamento diferenciado como por exemplo alterar a cor com o passar de cursor ou com o item ativado. Prevendo isso, cada item dentro da lista deve ser identificado:


    Primeira página
    Segunda página
    Terceira página
    Quarta página

Desta forma, seja qual for a implementação escolhida para o menu o desenvolvedor poderá manipular:

#menu-item-1 {background:pink;}
#menu-item-1 a{background:blue;}
#menu-item-1 a:hover{background:red;}

Mais um pé nos frameworks CSS

Seu designer favorito não consegue fazer outro tipo de layout que não seja de largura fixa, centralizado na tela? Então você já pode antecipar que o HTML terá um bloco logo abaixo da tag body somente para este fim. Não me lembro, inclusive, da última interface que montei que não precisei deste bloco. Nem todas as possibilidades de uma interface podem ser incluídas num HTML enxuto e puramente semântico. Algumas divs auxiliares sempre são necessárias. Da mesma forma, vejo que sempre preciso dos blocos de cabeçalho, rodapé e barra lateral.




    Meu site
    
    



    
        Olá mundo!
    
    
        Este é um elemento solto
        Lorem ipsum dolor sit amet, consectetur
           adipisicing elit, sed do eiusmod tempor
           incididunt ut labore et dolore magna
           aliqua.
    
    
        Primeira página
        Segunda página
        Terceira página
        Quarta página
    
    
        © 2008 Meu site

Evite expressões órfãs

Veja no exemplo anterior a expressão “Este é um elemento solto” e tente manipulá-la via CSS ou JavaScript. É mais complicado, não? Tente sempre manter os elementos dentro de marcações específicas:

    
        Este não é um elemento sem pai
        Lorem ipsum dolor sit amet, consectetur
           adipisicing elit, sed do eiusmod tempor
           incididunt ut labore et dolore magna
           aliqua.

Melhor antecipar do que alterar cinqüenta telas depois

Muitas das decisões podem ser antecipadas mesmo sem olhar o layout ou o sistema, mas é melhor que não seja assim. Antes de começar a montar o código HTML, analise a interface previamente aprovada e conheça bem as limitações do sistema. Não é bola de cristal ou receita de bolo, e sim uma questão de saber reconhecer os padrões de código que se repetem projeto após projeto.

Ordenando os seletores CSS

Simone Villas Boas — Wed, 14 May 2008 22:02:54 +0000

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.

De qualquer forma, não deveria estar me justificando! Já vi muito código como este:

h3{
display:block; width:190px; height:40px;
margin-left:20px;padding:2px 4px 2px 4px;
background-image:url(/img/titulo.gif);
background-repeat:no-repeat;
background-position:left top;
width:188px;
height:40px;
border-top:2px solid #006666;
border-bottom:2px solid #006666;
display:block;
overflow:hidden;
text-indent:-999px;
margin:10px 10px 10px;
}

Em qualquer um dos casos, não é só desperdício de bytes, é também um problema durante a manutenção do código e na solução de problemas. Também em CSS, menos é mais. Códigos mais simples são mais fáceis de ler e compreender.

Como já vimos anteriormente a otimização de CSS, vamos limpar o exemplo antes de ordená-lo:

h3 a{
	display:block;
	width:190px;
	height:40px;
	margin-left:20px;
	padding:2px 4px;
	background:url(/img/titulo.gif) no-repeat 0 0;
	width:188px;
	height:40px;
	border:0 solid #066;
	border-width:2px 0;
	display:block;
	overflow:hidden;
	text-indent:-999px;
	margin:10px
}

Agora podemos ordenar os seletores com alguns parâmetros pré-estabelecidos. O exemplo pode ficar assim, onde reparamos alguns seletores repetidos com valores conflitantes:

h3 a{
	display:block;
	display:block;
	overflow:hidden;
	width:190px;
	width:188px;
	height:40px;
	height:40px;
	margin-left:20px;
	margin:10px;
	padding:2px 4px;
	background:url(/img/titulo.gif) no-repeat 0 0;
	border:0 solid #066;
	border-width:2px 0;
	text-indent:-999px
}

O debug é automático assim mesmo. É só definir uma ordem que o desenvolvedor bate o olho e vê o que está errado ou sobrando no código. Tenha cuidado ao reordenar os seletores semelhantes para não alterar o resultado final.

Para ordernar os seletores basta definir uma ordem arbitrária: ordem alfabética, por tipo de seletor, pela melhor forma de memorização, não importa. Se não quiser pensar sobre isso, ofereço a minha cola.

A base desta lista foi a referência de CSS do W3Schools e está dividida e ordenada em grupos. Primeiro, lido com os fatores de dimensão e posicionamento dos boxes para depois tratar do formato e cores.

Posição e classificação do elemento na tela

Posicionamento

position
top
right
bottom
left
z-index
overflow
clip
vertical-align

Classificação

clear
float
display
visibility
cursor

Tamanho do elemento e sua relação com outros

Dimensão

width
height
max-width
max-height
min-width
min-height
line-height

Margens

margin
padding

Formato do elemento

Fundo

background
background-color
background-image
background-repeat
background-attachment
background-position

Bordas

border
border-width
border-style
border-color

Listas e marcadores

list-style
list-style-type
list-style-position
list-style-image

Tabela

border-collapse
border-spacing
caption-side
empty-cells
table-layout

Tipologia e conteúdo

Fontes

font
font-style
font-variant
font-weight
font-size
font-family

Texto

color
text-align
text-decoration
text-indent
text-transform
direction
letter-spacing
white-space
word-spacing

Conteúdo

content
quotes

Estou usando esta lista já há alguns meses com sucesso. Nenhuma lista é perfeita e adoraria idéias para aperfeiçoá-la. Até a segunda semana de uso não tirei-a do meu lado. Depois, tudo ficou automático e só a consulto para propriedades que uso raramente. Quando pego um código antigo, é instantânea a vontade de reordernar tudo antes de revisá-lo.

Referências:

CSS2 Reference, W3Schools;
Improving Code Readability With CSS Styleguides, na Smashing Magazine;
Dicas básicas para projetar Folhas de Estilos, por Maurício Samy Silva.

Uma outra visão sobre CSS Frameworks

Simone Villas Boas — Wed, 19 Mar 2008 21:57:23 +0000

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!

Dividindo por tipo de conteúdo

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

Reset, onde limpo todas as definições de estilo padrão do navegador;
Basic, onde estão as definições genéricas de tags e classes;
Grid, onde desenvolvo estrutura da página;
Format, onde configuro cores, fundos, tipologia, por área de layout;
Pages, onde estão as definições especiais de cada seção do site;
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.

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
}

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

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.
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
}
```

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

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.

CSS livre, leve e solto

Simone Villas Boas — Tue, 15 Jan 2008 23:19:38 +0000

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:

Procurar 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.
Se 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:

CSS Optimization: Make Your Sites Load Faster for Free, no Blogging Pro;
O artigo Best Practices for Speeding Up Your Web Site traz os parâmetros do YSlow para sites de grande porte;
Efficient CSS with shorthand properties, no 456 Berea Street

pixeladas aleatórias » CSS Design

Maturando o HTML

Cada elemento-chave deve poder ser identificado

Mais um pé nos frameworks CSS

Olá mundo!

Evite expressões órfãs

Este não é um elemento sem pai

Melhor antecipar do que alterar cinqüenta telas depois

Artigos relacionados:

Ordenando os seletores CSS

Posição e classificação do elemento na tela

Posicionamento

Classificação

Tamanho do elemento e sua relação com outros

Dimensão

Margens

Formato do elemento

Fundo

Bordas

Listas e marcadores

Tabela

Tipologia e conteúdo

Fontes

Texto

Conteúdo

Referências:

Artigos relacionados:

Uma outra visão sobre CSS Frameworks

Uma introdução

Dividindo por mídia

Dividindo por tipo de conteúdo

Agora cada item em detalhes e exemplos:

Reset

Basic

Grid

Format

Pages

Hacks

Dividir para conquistar

Ah, mas é mais trabalho?

E o Blueprint e genéricos?

Referências:

Artigos relacionados:

CSS livre, leve e solto

Diminuindo o número de requests

Usando atalhos

Para cores:

Para espessuras:

Para fundos, fontes e listas:

Usando alternativas

Pontuando corretamente

Vamos começar tudo de novo…

Robôs para seu prazer

Referências:

Artigos relacionados: