• Compartilhar
  • ?
  • Perfis ▼
  • Comunidades ▼
  • Aplicativos ▼

Blogs

  • Meus Blogs
  • Blogs Públicos
  • Minhas Atualizações

Essa comunidade pode ter membros de fora da organização. iMasters

  • Efetue login para participar
fd26864d-cb41-49cf-b719-d89c6b072893 Blog

▼ Marcações

▼ Entradas Semelhantes

我为什么要来 IBM 微讲堂讲 Loop...

Blog: developerWork...
developerWorks中国 2700027P1B
Atualizado
0 pessoas curtiram istoCurtir 0
Sem ComentáriosComentários 0

开源技术 * IBM 微讲堂:LoopB...

Blog: developerWork...
developerWorks中国 2700027P1B
Atualizado
0 pessoas curtiram istoCurtir 0
Sem ComentáriosComentários 0

Understanding E-Mark...

Blog: CSE-WebSphere...
ShoebBihari 3100001AME
Atualizado
0 pessoas curtiram istoCurtir 0
Sem ComentáriosComentários 0

ITCAM for Transactio...

Blog: Application P...
ericmtn 1000009W88
Atualizado
0 pessoas curtiram istoCurtir 0
Sem ComentáriosComentários 0

ITCAM for Transactio...

Blog: Application P...
ericmtn 1000009W88
Atualizado
0 pessoas curtiram istoCurtir 0
ComentáriosComentários 1

▼ Archive

  • janeiro de 2014
  • agosto de 2013
  • julho de 2013
  • maio de 2013
  • abril de 2013
  • março de 2013
  • fevereiro de 2013
  • janeiro de 2013
  • dezembro de 2012
  • novembro de 2012
  • outubro de 2012
  • setembro de 2012
  • agosto de 2012
  • julho de 2012
  • junho de 2012
  • maio de 2012
  • abril de 2012
  • março de 2012
  • fevereiro de 2012
  • janeiro de 2012
  • dezembro de 2011
  • novembro de 2011
  • outubro de 2011
  • setembro de 2011
  • agosto de 2011
  • julho de 2011
  • junho de 2011
  • maio de 2011
  • abril de 2011
  • março de 2011
  • fevereiro de 2011
  • janeiro de 2011
  • dezembro de 2010
  • novembro de 2010
  • outubro de 2010
  • setembro de 2010
  • agosto de 2010
  • julho de 2010
  • abril de 2010

▼ Autores do Blog

iMasters

Visualizar Todas as Entradas
Clicar no botão faz uma atualização completa da página. O usuário pode acessar a região "Lista de Entrada" para visualizar o novo conteúdo.) Lista de Entrada

Mau cheiro em código CSS – como sentir

iMasters 27000343BF | | Marcações:  web css standards ‎ | 4.334 Visualizações

Não quero falar apenas sobre como “melhorar” o seu código. Muitos já escreveram sobre isso, e você já deve estar cansado de ouvir as mesmas coisas:

  • Use algum CSS reset;
  • Ordem alfabética (?) [eu prefiro ordenar por 'tipo'];
  • Use regras resumidas (agrupamento): margin-top: 10px; margin-bottom: 5px;.. seria melhor: margin: 10px 0 5px;
  • Comente para organizar;
  • Identar elementos encaixados (?) [particularmente não sou muito fã disso] [fonte];
  • Dividir de forma lógica, algo como: estrutura, classes utilitárias, módulos…
  • Um único padrão de nomenclatura [camelCase, dash-case, underscore, ou...] (seja consistente);
  • Escolha bons nomes; (meu artigo anterior fala um pouco sobre isso);
  • Uma Regra = Uma linha … Múltiplas regras = Múltiplas linhas; [fonte];
  • Índice [um comentário no início mostrando os grupos de seletores que você usou];
  • Mais de uma folha de estilos [se o site for "grande," isso vale a pena] [fonte].

E outras tantas parecidas, derivadas, e com nomes diferentes dessas acima.

Quero falar sobre o mau cheiro. Sobre quando é que o seu código deve lhe parecer “estranho”, “incorreto”, apesar de funcionar.

Afinal, é necessário identificar que algo está errado para poder corrigir.

Quando você notar duplicação de código

Por exemplo, você possui uma área parecida com isto:

#box_telefone {
   background: #fff; border-radius: 10px;
   float: left;
   width: 100px; height: 50px;
}
#box_email {
   background: #fff; border-radius: 10px;
   float: left;
   width: 200px; height: 75px;
   margin: 20px;
   color: #ddd;
}

Ambos são “caixas” no layout e possuem estilos (formatações básicas) semelhantes. Eu sugiro fazer algo assim:

.box { background: #fff; border-radius: 10px; }
.fleft { float: left; }
#box_telefone {
   width: 100px; height: 50px;
}
#box_email {
   width: 200px; height: 75px;
   margin: 20px;
   color: #ddd;
}

Note que também retirei o float dos seletores, e fiz uma “classe utilitária” para ele. Dessa forma, posso, sei lá, usar o #box_telefone na esquerda na home, e na direita na página de contato.

Existem técnicas e “boas horas” para separar, vá com cuidado.

Quando tiver muitos seletores com vírgulas

Algo assim:

#box_telefone,
#box_email { /* .. */ }

Isso “tende” a crescer. Tende a sair do controle. Então, se você precisar de mais uma caixa com estilos parecidos, vai lá e adiciona outro seletor com vírgula aí.

Nesse caso, aplique a dica de cima. Vale mais a pena criar classes “modulares”, do que ir listando IDs para um mesmo conjunto de regras.

Quando a cascata CSS não estiver sendo utilizada

Um outra forma de evitar duplicação de código CSS é aproveitar bem a cascata CSS. Coisas como: definir o font-family para o seletor body, que então os demais elementos herdarão dele.

Mas não definir tag por tag, pois, quando você precisar sobrescrever, ficará brigando por especificidade.

Use a cascata, porém tente ser genérico. Bem pouco específico, ou nada (senão, não é cascata).

Quando um efeito/posicionamento estiver lhe dando muito trabalho

Se você entender corretamente o boxmodel, e souber utilizar todas as propriedades CSS, conhecendo tudo o que elas fazem (de acordo com as especificações), então aquele posicionamento que está te dando mais trabalho, te fazendo usar 10-15 regras, pode estar errado.

É bem sutil isso. Mas existem várias formas de se fazer uma mesma coisa.

Se você começar a fazer uma que não está dando certo, e for ficando cada vez mais complexo, então repense e tente fazer de outra forma.

Às vezes, basta mudar um pouco o outro elemento que estava antes na marcação, ou posicionar de uma outra maneira o problemático, e tudo se resolve.

Posso dizer que, quanto mais complicada ficar a sua estratégia para resolver, mais chances você tem de encontrar incompatibilidade entre os browsers.

A minha regra aqui é:

Deve primeiro fazer sentido para você mesmo.

Digo isso, pois muitos desenvolvedores saem jogando propriedades, “até dar certo”. Na base do chute. Não é assim que se desenvolve “bem”.

Consigo me lembrar dessas por hora. Conhece mais alguma forma?

Me conte nos comentários.

  • Incluir um Comentário Incluir um Comentário
  • Editar
  • Mais Ações v
  • Colocar esta Entrada em Quarentena
Notificar Outras Pessoas
notification_ex

Enviar Notificação por Email

Colocar esta entrada em quarentena

deleteEntry
duplicateEntry

Marcar como Duplicata

  • Entrada Anterior
  • Principal
  • Próxima Entrada
Feed para Entradas de Blog | Feed para Comentários de Blog | Feed para Comentários desta Entrada