CSS e HTML são línguas principais para começar com, quando você decidir investir seu tempo em web design e desenvolvimento. Eles são poderosas linguagens e na maioria das vezes pode parecer simple trabalhar com.
No entanto, cada um de nós, iniciantes ou desenvolvedores avançados, cometeram erros básicos ou grandes trabalhando com ambas estas línguas. Com isso em mente, penso que é extremamente importante e sempre bem-vindo aprender algumas boas dicas e práticas que eu espero que irá ajudá-lo melhorar suas habilidades e experiência.
Alguns de vocês podem estar pensando que desde que você não vê qualquer coisa fora do lugar ao exibir sua página da web, você tem seus documentos HTML e CSS construídos corretamente, mas você pode estar errado. A verdade é que você não deve confiar em tudo que você codificar. Usando a mesma ID de mais de uma vez na mesma página não vai resultar em alinhamentos errados ou recuperar qualquer erro (a menos que você tenta validar), mas na verdade é uma grande falha no seu código e marcação ruim.
Como você deve fazê-lo:
Alguns de vocês podem estar pensando que desde que você não vê qualquer coisa fora do lugar ao exibir sua página da web, você tem seus documentos HTML e CSS construídos corretamente, mas você pode estar errado. A verdade é que você não deve confiar em tudo que você codificar. Usando a mesma ID de mais de uma vez na mesma página não vai resultar em alinhamentos errados ou recuperar qualquer erro (a menos que você tenta validar), mas na verdade é uma grande falha no seu código e marcação ruim.
Doctype
Não há muito tempo, nós tivemos que usar esses Doctypes realmente longos que eram quase impossíveis de se lembrar. Agora, uma vez que você só precisa usar <!DOCTYPE html > na parte superior do seu documento, temos uma solução muito melhor e mais limpa. No entanto, algumas pessoas ainda se esquece de especificá-lo. Isso é obrigatório para um documento HTML organizado e validado.
Como você deve fazê-lo
Nunca esquece o DOCTYPE.
ID vs Classes
Uma ID é um identificador exclusivo que permite-nos para um elemento específico na página de destino e, uma vez que é exclusivo, ele pode apenas ser usado uma vez em uma página. Por outro lado, temos classes que nos permitem fazer exatamente o oposto. Classes são usadas quando você tem mais de uma vez o mesmo elemento em uma página.
Como não fazê-lo:
Como você deve fazê-lo:
Dizer não ao estilo inline Estilo inline infelizmente é uma prática bastante comum e ao mesmo tempo um mau. Não tem nada a ver com código inválido ou marcação ruim, mas com código organizado e estrutura. Imagine que você tem 30 páginas e você precisará remover um estilo inline que aplicou a mesma div em cada página única, que levaria você para sempre e roubar precioso tempo. Como não fazê-lo: |
Como você deve fazê-lo:
Ove uso de divs e Classes CSS
Então você começou seu próprio projeto, você sabe como usar divs, ids e classes. Estilo inline (Felizmente) não é o que sabe, e você gosta de criar estilos e aplicá-los em todos os lugares. Isso é ótimo, mas não mais do que você tem que escrever. Ter uma div com uma lista não ordenada dentro e uma classe aplicadas a cada elemento li é desnecessária.
Como não fazê-lo:1 | <div id="navigation"> |
2 | <ul> |
3 | <li class="left"></li> |
4 | <li class="left"></li> |
5 | <li class="left"></li> |
6 | </ul> |
7 | </div> |
E em sua folha de estilo
1#navigation li { float: left; }| Resolução de navegador  | ||
De acordo com estatísticas mais recentes da W3c (Janeiro de 2011), 13,8% dos utilizadores da internet têm uma resolução de tela de 1024 × 768 e 85,1% usam uma resolução de tela maior. Então a questão é "Que resolução eu deve projetar para"? Pessoalmente, eu uso uma largura máxima de 980 ou 960 pixels para um layout vertical e entre 550 e 640 pixels de um layout horizontal. Além disso, apesar de 13,8% parece ser um número bastante baixo, ainda representa milhões de usuários de internet.
Como você deve fazê-lo
Considere as necessidades de todos e especialmente seu público-alvo.
Bloco vs elementos Inline
Diferenciação bloco de elementos inline pode ser um um assunto delicado para iniciantes. Um elemento de bloco é exibido em uma nova linha tendo por largura de 100% do padrão do elemento que contém, como divs (<div>) ou parágrafos (<p>). Um elemento inline é exibido sem quebras de linha, que significa que ele começa na mesma linha, tendo apenas sua própria largura, como extensão (<span>) ou imagens (<img>). Você também pode alterar a forma como um elemento é exibido, isso significa que você pode alterar um elemento inline para ser Exibir como um bloco e vice-versa.
Como você deve fazê-lo
1span { display: block; }Como você deve fazê-lo
Compatibilidade Cross-Browser.
Quando você decidir fazer algo, você deve colocar-se na função do usuário final e imaginar que, ainda hoje, alguns deles ainda usam navegadores como o IE6. Uma página em torna diferente no Firefox do que no Chrome ou Internet Explorer. Existem algumas ferramentas úteis que você pode usar para verificar como sua página é processada em diferentes navegadores. Charina escreveu um artigo muito completo sobre este tópico que eu recomendo a leitura – 10 úteis ferramentas para Cross-Browser compatibilidade verificar
Como você deve fazê-lo
Não se esqueça de prestar atenção ao seu layout em diferentes navegadores, sistematicamente.
Mantê-lo curto – genérico classes, propriedades e arquivos CSS
Quando você está codificando você deve sempre ter uma coisa em mente, planejar o futuro. Você já está usando comentários e assim manter seu código organizado, por que parar por aqui? A primeira coisa que faço quando eu estou codificação CSS é especificar uma seção de classes genéricas e, em seguida, no meu HTML eu simplesmente usá-los ao lado com outros elementos.
Como não fazê-lo:
Como você deve fazê-lo
Esta é uma maneira simple de declarar duas classes. Eu gostaria de encontrar a maneira mais eficiente de fazer as coisas, e como você já pode imaginar, eu realmente gosto de manter as coisas organizadas, assim quando ele se resume a propriedades, que é a mesma coisa. Por que deveria escrevemos a mesma propriedade repetidamente quando precisamos apenas para escrevê-lo uma vez?
Como não fazê-lo:
Como você deve fazê-lo:
O número ideal de arquivos CSS, que você deve ter em seu projeto depende inteiramente de você e a maneira de que trabalhar. Tenho estado envolvido em projectos onde havia um "generic.css", "Main. CSS", "global.css", entre outros, ele me levou para sempre para compreender a finalidade de cada arquivo. Eu costumo ter apenas dois arquivos CSS em meus projetos – Style. CSS e Reset. CSS.
Como você deve fazê-lo
Você deve ser simples e eficiente para editar mais tarde.
Não use marcas de título aleatoriamente
Marcas de título não estão lá apenas para torná-la bonita, eles estabelecem a importância do seu conteúdo que os torna valiosos para SEO. Existem seis marcas de título: h1, h2, h3, h4, h5 e h6. H1 é o mais importante, por isso você deve usá-lo para sua página da web ou firma apenas. O resto das marcas deve ser usado de acordo com o título ou conteúda importância. Além disso, você não precisa ter marcas de título em todos os lugares em seu documento.Como não fazê-lo:
Como você deve fazê-lo:
Usar posição absoluta somente quando você tem que
Quando você está começando, você pode facilmente viciar-se à utilização de posicionamento absoluto. Isso é porque é uma maneira fácil de colocar elementos, no entanto, essa propriedade não deve ser usada excessivamente. Como elementos com posição absoluta perdem seu fluxo normal, é quase impossível para alinhá-los com outras seções na página. Você simplesmente não pode dizer um elemento normal para estar do lado esquerdo de um elemento com posição absoluta.
Como você deve fazê-lo:
Use posição absoluta somente quando você precisa, e não porque é mais fácil.
Então, há uma fonte que você realmente gosta e você gostaria de usá-lo em sua página, ele é um tipo de letra padrão? E se não? Estas são perguntas que você precisa perguntar antes de escolher sua tipografia. Quando você escolher uma fonte você sempre deve ter um plano de backup, o que significa que no caso do usuário não tiver a fonte escolhida, a segunda opção (ou terceiro, etc) será exibida. São exemplos de tipos de letra padrão Arial, Georgia, Lucida Sans código, Times New Roman, Verdana, Tahoma e pouco mais. Agora vamos dizer você gostaria de usar uma fonte que é não-padrão, o que você faria? A resposta mais óbvia é @ font-face.
Como não fazê-lo:
Como você deve fazê-lo:
Sempre valide
O título é bastante auto-explicativo, você sempre deve validar seus documentos CSS e HTML. Por que? A resposta é por que não? Você tem uma maneira de saber se seu código possui erros e dá-lhe soluções para corrigi-los, então realmente, por que não? Adicione o validador CSS e HTML Validator aos seus favoritos.
Como você deve fazê-lo
Validar seu CSS, e depois que faça o mesmo com seu HTML.
Conclusão
Alguns podem considerar essas dicas e técnicas o senso comum e simples de entender, outros nem tanto, mas o importante é que cada codificador cometer erros, e a prática faz perfeito.
Espero que tenha gostado do artigo e divirta-se a experimentar, mas tem que mantê-lo organizado!