Muitas pessoas utilizam css somente para formatação de texto, outras ja usam em tudo desde a montagem do layout.

até que ponto você utiliza?, deixe sua sugestão de uso

Exibições: 91

Respostas a este tópico

Utilizo muito muito .css para formatar tabelas,alturas ,larguras,formatações de tipo de fonte em geral,mais temos que tomer cuidado com seu uso,entao vou dar algumas dicas sobre sua utilização


Introdução

Não importa se você é um iniciante na área ou já desenvolveu vários sites: a essa altura, você já está cansado de saber que as folhas de estilo externas são obrigatórias em qualquer projeto. Porém algumas dicas simples são sempre úteis para facilitar nosso trabalho. Veja 11 delas a seguir:


1 - div1 é diferente de menu
Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada e na hora da manutenção vão tornar seu trabalho mais lento. Da mesma maneira, barra_azul não faz muito sentido: e se você mudar a cor do site? Prefira nomes explicativos, como menu ou barra_links.


2 - Maiúsculas e minúsculas
Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.


3 - id x class
Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (como #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .noticia).

4 - Compartilhe declarações entre vários elementos comuns
Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula:
h1, h2, h3, h4 {font-family: Arial, Helvetica, Sans-Serif;}

5 - Lembre-se da hierarquia e organize-se
Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!).


6 - Comente os códigos avançados
Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz:
#menu ul li a /* aba normal */ {background: #444; color: #FFF; border: 1px #FFF solid;} #menu ul li a:hover{ /* aba selecionada*/ {background: #FFF; color: #F00; border: #F00 1px solid;}

7 - Anote suas cores
#09F ou #F09, qual é o rosa e qual é o azul? Mesmo se você conseguir fazer cálculos RGB de cabeça pra saber a tonalidade da cor sem uma tabela de cores hexadecimal, econonize tempo anotando a cor correspondente de cada código no seu arquivo: VEJA A TABELA DE CORES,CLICANDO AQUI




8 - Declare as unidades
Quando trabalhar com valores diferentes de zero, declare as unidades (px, pt, etc). Cada navegador assume uma unidade padrão quando ela não é especificada, gerando resultados diferentes em cada navegador.


9 - Tenha certeza que o efeito desejado funciona em todos os navegadores
Barras de rolagem coloridas, divs semi-transparentes... Tudo isso é muito bonitinho, mas não funciona em todos os navegadores. Projete seu site de uma maneira atraente sem esses recursos, e, de novo, certifique-se de que seu CSS tem o mesmo efeito no maior número de navegadores possível.


10 - Não confie na sua memória
Com o tempo, é natural que decoremos os principais elementos e seus atributos. Mesmo assim, tenha sempre um guia de consulta rápida ao seu alcance, para tirar dúvidas sobre o funcionamento deles.
Muito bom Rodrigo, concordo com muitas das coisas ditas.

E lendo os itens numerados, eu me deparei com o item 5 que fala q hierarquia e organização e lembrei de uma coisa que detesto ver em um CSS. A cláusula "!important".

Pessoal jamais usem !important em seu CSS. Isso é resultado q seu CSS está muito, very, power, extreme mal organizado, ou seja, se deparar com essa cláusula entre em pânico e reveja todo seu CSS.

A cláusula !important foi criada para soluções de alternativas rápidas de problemas que significa GAMBIARRA!!

Para quem usa muito o !important, está se fazendo a pergunta: Mas como eu paro de usar o !important??
Resposta: Antes de entrar com a mão na massa no código faça um documento de especificação de client-side. Este documento tem a finalidade de especificar os padrões de interface de seu projeto com apoio de wireframes e diagramas estruturais.

Um dia estive lendo sobre documentação de interface e encontrei um post de um blog muito interessante de uma Designer explanando a importância do documento. Segue os posts abaixo.

http://blog.talitapagani.com/index.asp?cod=50
http://blog.talitapagani.com/index.asp?cod=51
http://blog.talitapagani.com/index.asp?cod=52

E quanto aos efeitos CSS, use e abuse deles. Pois na maioria das vezes são esses efeitos q vão encher seu bolso.... hehe. Quando um cliente vé q a aplicação dele tá bonitinha, além de ser a primeira coisa q ele fala contigo, ele tbm indica seus serviços com mais confiança. (Experiência própria)

Enfim, mas existem muitas formas de adaptar seu CSS em vários browser´s diferentes. Essa adaptação é tão frequente q tornou-se uma técnica chamada de Cross-Browser. Este nome é válido tanto para CSS e JS.

As tecnicas Cross-Browser mais usadas são:
- Conhecimento de propriedades especificas de cada browser
EX: * Somente no IE existe a propriedade Filter
* todos os outros browser´s fora o IE usa-se a opacity

- Hacks
Ex: * No IE6: coloque um underline antes da propriedade, assim: _margin:2px;
* No IE7: coloque uma tralha antes da propriedade, assim: #margin:2px;

- Trapaças
Ex: para fazer opacidade de uma div utilize um PNG semi-transparente

Enfim, eu axo q é isso ae.
abraços.

RSS

© 2017   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço