5 etapas para melhorar drasticamente seu conhecimento de CSS em 24 horas
Você já está codificando há um tempo e conhece um arquivo CSS. Você certamente não é um mestre, mas com mexidas suficientes você pode chegar aonde quer ir. Você está se perguntando, no entanto, se algum dia passará do ponto em que o CSS é tão difícil. Você será capaz de criar um layout complexo sem recorrer a tentativas e erros para ver o que funciona e o que não funciona?
A boa notícia é que você pode realmente superar esse ponto frustrante em que conhece CSS suficiente para codificar um site, mas não possui a base sólida que permite codificar sem o incômodo de não entender exatamente como você vai chegar aonde está ' está indo, e esse ponto é muito mais próximo do que você pensa. Eu proponho que existem cinco tópicos que aumentarão drasticamente sua compreensão do CSS. Passe algum tempo lendo sobre cada uma nas próximas 24 horas e você mudará a maneira como codifica para sempre.
Explore o Envato Elements
1. Envolva sua mente em contextos de posicionamento
Se você realmente deseja ter um entendimento sólido de como usar CSS para mover elementos HTML para onde deseja que eles sejam, absolutamente deve entender os contextos de posicionamento. E não me refiro apenas a um entendimento casual, mas a um profundo conhecimento de suas diferenças, comportamentos, peculiaridades etc.
Na verdade, existem cinco valores de posição que você deve entender. Se você não pode nomear todos os cinco sem procurá-los, então você é definitivamente o principal candidato a esse pouco de educação. Aqui estão eles: estático, fixo, relativo, absoluto e herdado.
Você precisa conhecer e entender todos os cinco, mas os dois grandes que realmente mudarão a maneira como você codifica são posicionamento absoluto e relativo. Aprender a usar esses dois contextos de posicionamento separadamente e, em seguida, começar a trabalhar juntos, mudará fundamentalmente a maneira como você vê o layout CSS, prometo. É uma revelação que tornará seu trabalho infinitamente mais fácil.
Recursos para você chegar lá
A redução no posicionamento absoluto vs. relativo
Este é o meu mergulho profundo no assunto do contexto de posicionamento. Menciono e explico brevemente os cinco, mas realmente me concentro nos dois grandes: como eles diferem, como são diferentes e como trabalham juntos. Leia este artigo e você estará bem no seu caminho para obter um posicionamento CSS sem dor de cabeça.
Posicionamento CSS 101
Esta parte vem do venerável blog A List Apart, então você imediatamente sabe que será ao mesmo tempo minucioso e incrivelmente educacional. O artigo foi publicado em 2010, mas as informações ainda são perfeitamente relevantes e servem como uma excelente introdução aos cinco contextos de posicionamento. Não é um artigo muito visual, mas possui muitos exemplos de código simples para facilitar você em cada conceito.
Aprenda o posicionamento CSS em dez etapas
Esta é uma visão geral incrivelmente breve dos vários contextos de posicionamento. Em vez de um artigo longo, esta página apresenta uma pequena caixa com dez guias. Cada guia possui um pequeno trecho de código e uma ou duas frases explicando o código. À direita, há um layout de exemplo ao vivo que é atualizado a cada guia. Esse formato é fantástico para vincular visualmente trechos de código aos layouts que eles produzem, e eu recomendo dar uma olhada se você enfrentar principalmente explicações de texto como a do ALA acima.
2. Carros alegóricos
Quando você aprende CSS pela primeira vez, os carros alegóricos parecem um dos sistemas de layout mais errados que se possa imaginar. Depois de aprender a usá-los em um nível básico, você precisará aprender tudo sobre como os pais que contêm apenas filhos flutuantes têm uma altura desmoronada, o que leva a 47 maneiras diferentes de resolver o problema por meio de correções claras e manipulações de transbordamento.
Felizmente, a longo prazo, você se acostuma aos conceitos por trás dos carros alegóricos e eles podem se tornar tão fáceis de usar que você nem pensa muito neles. A única coisa entre você e esse objetivo é um ou dois artigos sólidos que realmente se aprofundam e explicam minuciosamente o comportamento e as técnicas de flutuação desde o início.
Recursos para você chegar lá
Tudo o que você nunca soube sobre flutuadores CSS
Neste artigo, abordarei quase toda a gama de tópicos sobre flutuadores em CSS. Começa com uma discussão básica sobre o que são os carros alegóricos e como eles funcionam. Depois disso, falo sobre como os carros alegóricos afetam as caixas dos elementos envolvidos, como os carros alegóricos ficam estranhos com elementos de diferentes alturas, as nove regras que cobrem o comportamento dos carros alegóricos e, claro, o desastre da altura em colapso e como corrigi-lo.
Tudo sobre carros alegóricos
Chris Coyier sempre foi meu autor favorito quando se trata de tópicos relacionados ao CSS e sua introdução aos carros alegóricos não decepciona. Se você estiver procurando por uma discussão breve, mas direta, sobre como trabalhar com carros alegóricos, esta peça o cobriu. Gosto particularmente das ilustrações simples e atraentes usadas ao longo do artigo.
O mistério da propriedade CSS Float
Enquanto as peças de Chris Coyier são tipicamente breves e objetivas, o conteúdo da Revista Smashing é geralmente bastante amplo, com muitos exemplos e discussões relevantes. Este artigo apresenta o conceito de carros alegóricos, mostra tudo sobre como usá-los e desmarcá-los e inicia uma discussão sobre onde você normalmente vê carros alegóricos sendo usados em sites do mundo real. Se você precisa ver a teoria ganhar vida, esta é para você.
3. Conheça seus seletores
Uma das chaves para escrever um bom CSS limpo é ter uma forte compreensão de quais seletores de CSS estão disponíveis para você, como eles funcionam e o grau em que são suportados em vários navegadores. Parece um tópico bastante simples, mas, na realidade, o mundo dos seletores de CSS é bastante complexo.
Há várias coisas interessantes para aprender aqui, desde o uso de seletores de valor de atributo e palavras-chave de segmentação em nomes de classe até como o seletor universal pode ser útil para depurar seu código. Mesmo que você ache que pode se dar bem pessoalmente sem entender um monte de seletores sofisticados, a verdade é que outros codificadores usam esse material todos os dias e você precisa entender o que está vendo quando acessa a fonte de visualização!
Recursos para você chegar lá
Seletores de CSS: apenas os bits complicados
Este é um artigo divertido que aborda principalmente os aspectos mais complicados dos seletores de CSS. Eu pulo as coisas do nível do solo e passo direto para discutir como o conceito do DOM se traduz em vários aspectos do seu documento com CSS. Você aprenderá tudo sobre a seleção de filhos e irmãos, como encadear seletores e muito mais.
Os 30 seletores de CSS que você deve memorizar
Jeffrey Way é um rockstar na web e artigos como esse provam o porquê. Este artigo do Nettuts + cobre uma vasta gama de seletores de CSS em um formato simples e breve, que enfatiza muito o suporte ao navegador. Surpreendentemente, Jeff chegou a codificar exemplos de páginas ao vivo para cada um dos trinta seletores.
Seletores de atributos CSS: como e por que você deve usá-los
Os seletores de valor de atributo são um dos subconjuntos mais poderosos de seletores de CSS, e o CSS3 realmente aumenta esse poder. Você não vai acreditar o quão versátil seus seletores podem se tornar com um pouco de magia de valor de atributo. Depois de ler este artigo, você estará lançando frases como "seletor de valor de atributo de substring arbitrário" como um profissional.
4. Aprenda conceitos de codificação DRY
"Não se repita." Esta frase simples tem implicações drásticas quando se trata de codificação. Quando você realmente mergulha nas práticas de codificação DRY, o resultado é um código mais limpo, menos trabalho e um belo novo fluxo de trabalho que é tão empoderador quanto impressionante.
Ao contrário dos outros tópicos acima, que são bastante restritos, este é um assunto bastante vasto, que abrange todo tipo de práticas, técnicas e idéias diferentes. Curiosamente, uma das coisas que recentemente me chamou a atenção nas práticas de codificação DRY é o uso de pré-processadores CSS.
Embora muitos afirmem que os pré-processadores levam a práticas inadequadas de codificação, a realidade é o oposto. Obviamente, os próprios pré-processadores ajudam a evitar a repetição manual, mas vai além disso. Examinar a saída de ferramentas como LESS e SASS e os objetivos das linguagens em geral me levou a escrever CSS melhor e puro! Depois de dominar conceitos como @extend no Sass, você não pode deixar de pensar nas implicações quando estiver codificando apenas CSS.
Recursos para você chegar lá
CSS SECO: Não repita seu CSS
Neste artigo, Steven Bradley apresenta o tópico DRY CSS e cobre alguns de seus principais princípios e metas. Ele resume a prática em três idéias simples e mostra como implementá-las em um fluxo de trabalho real. Os conceitos são amplamente emprestados de uma apresentação de Jeremy Clarke, cobrindo o mesmo tópico.
Uma introdução ao CSS orientado a objetos (OOCSS)
Como mencionei antes, as idéias inerentes ao movimento DRY CSS são bastante abrangentes e diretamente relacionadas a conceitos em outras construções. OOCS é uma metodologia cada vez mais popular que visa ajudá-lo a criar folhas de estilo mais rápidas e eficientes, com organização superior e menos repetições. Existem dois princípios principais em funcionamento no OOCS: separação da estrutura da pele e separação de recipientes e conteúdo. Este artigo da Revista Smashing o guiará pelas idéias básicas e ajudará você a aplicá-las ao seu próprio trabalho.
Uma introdução às diretrizes SMACSS para escrever CSS
Você se lembra de Steven Bradley do primeiro artigo sobre DRY CSS? Ele também escreveu esta peça, que explica um projeto que é semelhante, mas separado, do OOCS: SMACSS (um projeto de Jonathan Snook). Como no OOCSS, o SMACSS tem dois objetivos principais. O primeiro é aumentar o valor semântico de uma seção de HTML e conteúdo, e o segundo é diminuir a expectativa de uma estrutura HTML específica. Este artigo explica os dois objetivos em detalhes e fornece exemplos de códigos úteis para que você possa ver o SMACSS em ação.
5. Conheça o suporte ao seu navegador
A quinta e última chave para melhorar seu CSS é saber o que funciona onde. O CSS3 é muito atraente para a maioria de nós ignorar, mas a dura verdade é que muitos deles não funcionam em determinados navegadores (por "certos navegadores", é claro, quero dizer IE).
O grande segredo que os desenvolvedores iniciantes precisam descobrir é que eles precisam memorizar cada recurso CSS e como cada navegador conhecido pelo homem lida com isso, mas sim que existem recursos absolutamente incríveis disponíveis para você que fornecem essas informações livremente, você apenas precisa saber para onde procurar.
Recursos para você chegar lá
Pregando o Suporte do Navegador em CSS3 e HTML5: Recursos Inestimáveis para Usar Hoje
Neste artigo, apresento os relativamente poucos sites que eu marquei para verificar o suporte ao navegador. Esses recursos são fantásticos, visuais e fornecem as informações necessárias em um instante para que você possa voltar à codificação. Dê uma olhada para ver o que são!
Suporte do navegador para CSS3: Qual é o status atual?
Este artigo foi escrito há mais de um ano, portanto a parte do "status atual" é discutível, mas pouco foi alterado neste momento para tornar as informações neste artigo obsoletas. Ele serve como uma visão geral incrivelmente útil de várias propriedades CSS3, divididas em seções com base no que funciona em qualquer lugar e no que você precisa observar. Você levará apenas alguns minutos e vale a pena ler.
A importância da compatibilidade entre navegadores: dicas e recursos
Se você é realmente novo em CSS e precisa de uma introdução básica ao tópico de compatibilidade do navegador e por que é importante, este artigo da Noupe o abordou. Mais do que simplesmente vender a você a idéia de compatibilidade, ele lista vários recursos excelentes que você pode usar para garantir a máxima compatibilidade. De particular interesse é a lista de ferramentas que ajudarão você a testar seu site em vários navegadores.
Eu deveria ler tudo isso em 24 horas?
Apresentei a você cinco tópicos absolutamente críticos para estudar e nada menos que quinze artigos, dos quais você pode aprender os princípios que precisa conhecer. Está tudo bem, mas no meu título prometi que você melhoraria em um único dia e nem todos terão tempo para sentar e ler quinze longos artigos!
A boa notícia é que eu lhe dei três artigos sobre cada tópico, para que você pudesse escolher um pouco. Expliquei o conteúdo de cada um em detalhes para que você possa selecionar o que melhor se adapta às suas necessidades. Lembre-se de escolher os artigos para ler, não com base no que você sabe, mas no que você não sabe. Estabeleça como objetivo preencher as lacunas no seu conhecimento.
Minha sugestão é navegar pelo conteúdo acima e escolher cinco artigos para ler (um de cada seção). Mesmo isso é muito para empreender em um dia, mas a maioria deles não tem muito mais que mil palavras ou mais, muitas são menos. Estou confiante de que você consegue. Se você não pode, não há problema. Mude seu objetivo para melhorar suas habilidades de CSS em uma semana e leia um dos cinco artigos escolhidos todos os dias nos próximos cinco dias. Eu garanto que na próxima semana você será muito melhor em escrever CSS claro, conciso, compatível e reutilizável.
Que outros conceitos você recomenda?
Agora que você leu meus cinco principais tópicos que as pessoas devem analisar para melhorar suas habilidades de CSS, quero ouvir você. Quais outros tópicos você acha que os codificadores CSS normalmente enfrentam e quais recursos você recomenda para quem quer aprender mais?
Fotos de stock fornecidas por BigStock
