Reaprendendo CSS da maneira certa

https://stackoverflow.com/questions/1574016

21-09-2019
|

Pergunta

Sou um programador que desenvolve web há mais de dois anos.Embora eu tenha feito engenharia front-end nos últimos dois anos, não acho que tenha feito isso da maneira certa
Por exemplo:

Ainda faço layout com tabelas e não apenas com CSS.Ainda não descobri uma maneira de apresentar corretamente os dados alinhados e tabulares.
Eu não sei a diferença entre display: none e visibility: hidden (bem, eu sei disso agora.mas há muitos casos como preenchimento, margens, estouros, etc.)
Eu realmente não segui o caminho da herança para escrever CSS.Quase todo estilo começa com um # e não uma aula.
Sempre que uma página carrega lentamente, os elementos HTML ficam fora do lugar e só entram em ordem quando ela está completamente carregada.
Não sei o que essa imagem do firebug está transmitindo (aliás, o firebug é meu salvador.A vida teria sido impossível sem o Firebug)

alt text

Sempre que o layout está uma bagunça, fico tentado a usar position:absolute.Invariavelmente, acaba em uma bagunça maior.

Eu sei que estou fazendo muitas coisas erradas (e preciso acertar) aqui, mas consigo colocar as coisas no lugar e de alguma forma mostrá-las, apenas para ver tudo bagunçado em um navegador diferente.

Não quero fazer uma cartilha sobre CSS ou CSS para manequins.Eu sei mais do que isso.Quero aprender CSS da maneira certa.Focando em problemas como os exemplos que mostrei acima e corrigindo-os.

Você pode me indicar recursos ou adicionar sugestões e dicas comuns usadas por desenvolvedores de CSS para acertar.

Solução

Verificação de saída Projetando com padrões da web Por Jeffrey Zeldman.

Outras dicas

Aqui estão algumas regras gerais para viver:

As tabelas são boas para dados tabulares. Se os dados que você está apresentando pertencem a uma mesa, não se esforce para tentar fazer uma grade <div>s. Não faz sentido.
No que diz respeito ao layout, use <div> Tags, fique longe das mesas. Conhecer o flutuador propriedade bem. Com o CSS3, haverá novos padrões para os padrões para o exibição propriedade. Aprenda -os.
display: none Remove completamente o elemento da viewport. Por outro lado, visibility: hidden mantém o espaço em branco que o elemento teria adotado. Nos dois casos, o elemento permanece no DOM.
Regra geral das classes e IDs. Os elementos da página e os IDs devem ter um relacionamento individual por página. Por exemplo, #column1, #column2, #footer, #Header. Os elementos e classes da página, por outro lado, devem ser um relacionamento de muitos para um, como: .Container ou .Navlink. Use aulas quando souber que usará um elemento específico um pouco.
Pense em termos de eficiência. Quanto menos regras de estilo você tiver, mais rapidamente sua página será carregada e mais fáceis de depurar o estilo.

Eu tenho cerca de um milhão de outras coisas a dizer, mas isso deve começar.

Para CSS acionado por layout, não deixe de conferir Tudo o que você sabe sobre CSS está errado. É um pouco de vanguarda, já que o IE 7 não suporta display: table (Pena, eu sei), mas abrange técnicas tradicionais de CSS de layout, como flutuação e posicionamento absoluto, e fornece uma boa transição de layouts baseados em mesa para os CSS. Eu recomendo.

Não sei se você está construindo qualquer linguagem dinâmica ou se você está apenas codificando HTML crua, mas também deve usar o uso Sass Em seus projetos, como acho que ajuda a forçar você a prestar mais atenção à herança. Caso contrário, revisar mais tutoriais "rudimentares" (como o CSS para manequins) pode realmente ser útil, pois eles analisam muitos diretores fundamentais do CSS em detalhes.

Por fim, o CSS funciona melhor quando você tem html semanticamente correto (x) embaixo do capô. Na minha opinião, é mais fácil ver e aprender "bom" CSS quando você tem um ótimo HTML semanticamente correto por baixo. Aqui está uma boa visão geral de quando usar as tags. Geralmente, acho melhor escrever meu conteúdo com Sem consideração o que sempre Para como ficará mais tarde, use o CSS mais tarde para torná -lo lindo.

Como sempre, você pode pegar muitas dicas e truques legais em Truques CSS, que sempre me ajudaram a aprender mais sobre o uso correto do idioma (como quando eu aprendi sobre overflow: auto Para elementos flutuantes contidos! Gênio!).

Espero que ajude!

Visita CSS Zen Garden Para ver o que você pode fazer apenas com CSS.
Visita Escolas W3 e siga o tutorial. Pode parecer simples para você, mas você aprenderá as coisas básicas.
Visite alguns sites, como Uma lista à parte Para ver como fazer as coisas e aprender truques.
Veja se uma estrutura CSS atende às suas necessidades (como 960 grade).

Estou assumindo que você instalou Firebug?

Também, http://www.doctype.com pode obter resultados mais relevantes.

Pratique, pratique, pratique. Você sabe o que não sabe, e essa é a chave para o sucesso em minha mente. Todo projeto que você faz, tente melhorar suas habilidades e, eventualmente, se tornará uma segunda natureza para fazê -lo da maneira certa.

Eric Meyer Referência do Programador de Lençóis de Estilo em Cascadão 2.0 é um ótimo recurso para entender exatamente como os seletores e as regras funcionam e serve como uma ótima referência também.

Algumas reflexões sobre o que você postou.

UMA Redefinição mestre A folha de estilo ajudará com diferenças de navegador.
E dados tabulares devem usar tabelas.
São layouts que devem evitar tags de tabela em favor do CSS.

Muitas pessoas aqui dão bons conselhos. Vou apenas adicionar mais dois:

Primeiro, tente escrever html válido (x). Você pode testar facilmente seu código HTML usando Validador HTML do W3C. Concentre -se principalmente no conteúdo, não no estilo.
Segundo, tente escrever CSS válidos, de preferência em um separado .css Arquivo. Evite usar o style atributo. (Esta parte pode ser difícil, se você deseja apoiar certos navegadores antigos de Redmond). Você pode testar seu CSS usando Validador CSS do W3C.

Ler CSS: o guia definitivo Por Eric Meyer. Ele explica por que o CSS foi criado, como ele funciona (de acordo com os padrões), e dará a você o fundo para entender os pontos mais delicados. Também faz uma boa referência.

Experimento em Firebug

Eu não sei o que essa foto no Firebug está transmitindo

O próprio Firebug pode ajudá -lo lá. Fazem isto:

Crie uma div com algum texto nele.
Use CSS para dar padding: 5px; margin: 5px; border: 1px solid black;
Examine -o no Firebug, como você mostra em sua pergunta.
Clique em qualquer um desses números no modelo da caixa que está mostrando e comece a pressionar as setas para cima e para baixo (ou digite um número diferente).
Veja como isso muda em tempo real? Esta é uma das melhores coisas sobre o Firebug: permite ajustar sem recarregar e modificar sua folha de estilo quando parecer certo.
Continue fazendo isso até entender como preenchimento, margens e fronteiras.

Eu acho que você deveria usar, para suas necessidades de layout, um dos chamados "estruturas css" (960.gs por exemplo).

Eles são rápidos e confiáveis o suficiente para construir layouts entre navegadores e também fáceis de ler e entender, para que você possa aprender todas as boas práticas enquanto codifica.

CSS são fáceis e não são uma linguagem de programação real:não tenha medo da palavra "estrutura";)

Você pode começar lendo alguns bons livros sobre o assunto. Os de Eric Meyer são mãos e de alta qualidade. O outro livro da qual eu aprendi muito foi o Zen of CSS Design Book.

E o resto é esforço e prática. Certifique-se de entender por que algo funciona da maneira que faz, não fique satisfeito com o desenvolvimento do CSS 'Trial e erro'.

Bem, abordarei alguns desses problemas da melhor maneira possível.

A diferença entre display:none e visibility:hidden é quando a tela é definida, o espaço para esse item não está reservado. Imagine -o, pois quando o visor está definido, o item está 'desaparecido' da página. Considerando que, se você estiver usando a opção de visibilidade, os elementos estarão na página, em seu lugar simplesmente invisível. Eu expliquei isso claramente? Felizmente, isso faz sentido para você.

Quanto ao preenchimento, borda e margens, tudo isso é chamado de modelo de caixa CSS. A informação está contida como elemento, seu preenchimento, borda, depois suas margens. Portanto, o preenchimento é a distância entre o conteúdo do elemento e sua borda, enquanto a margem é a distância entre a borda e o elemento vizinho. Mais uma vez, espero que isso ajude isso a esclarecer um pouco para você.

A transição para o CSS às vezes é complicada, mas vale a pena.

Bem, o básico é bastante simples, você realmente deve pegar o jeito muito fácil se você já não tiver uma codificação CSS.

As melhores práticas, peculiaridades do navegador, hacks e outras coisas superficiais sobre o layout de Browser é outra coisa.

Aqui está minha lista de leitura sugerida, todos eles estão na minha estante e certamente vale a pena ler! Se você me perguntar, eu diria que estes são o livro que você deveria ter lido se for um design da web.

para mim, Padrões de design Pro CSS e HTML de Michael Bowers mudou tudo.não há mais tentativas e erros intermináveis, mas problema-padrão-solução.indispensável.

Sempre que uma página carrega lentamente, os elementos HTML estão fora de lugar e caem apenas em ordem quando estiver completamente carregada.

Você está colocando suas folhas de estilo no topo, no <head> seção?
Você está declarando tamanhos explícitos para imagens ou o navegador precisa adivinhar e reorganizar as coisas quando a imagem aparecer?

Dependendo do seu estilo de aprendizado, recomendo ir direto à fonte: a definição de CSS. Você pode encontrar cada uma das várias especificações aqui: http://www.w3.org/style/css/. Embora a especificação realmente não cubra as peculiaridades específicas do navegador (se o fizessem, elas não seriam peculiaridades, não é?), Faz um bom trabalho (para mim) de explicar como cada peça funciona.

Eu vou te contar meu segredo: siga estes dois tutoriais clássicos

ListUTORIAL

Floatutorial

E você saberá 80% do que você precisa saber sobre o CSS.

30 sites a seguir se você estiver no desenvolvimento da web

http://htmldog.com/ é, na minha opinião, um dos recursos definitivos para aprender o desenvolvimento da Web do front-end da maneira correta.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow