Guia completo: Descomplicando o CSS pra iniciantes
Como fazer uma aplicação legal mesmo sem manjar dos paranauê de design.
Nem todos nós nascemos com facilidade para lidar com imagens. Algumas pessoas parecem ter o dom de enxergar as coisas com os óculos coloridos e transformar um dia nublado em um feed maravilhoso do Instagram.
Esse não é o meu caso.
Mas não é por isso que precisamos deixar as coisas sem alinhamento, de difícil leitura ou minimamente bonitinhas, né?
Você é que nem eu? Então guarda esse guia que ele é pra você :)
Se você chegou aqui, eu imagino que você já saiba o que é CSS e como usá-lo. (Se não souber, nesse link aqui tem um resumão com os primeiros passos para começar a estilizar suas aplicações).
Então, vamos lá. Eu separei os principais pontos que podem gerar dúvidas e que não estão contemplados nos guias mais comuns que encontrei para iniciantes.
Conforme eu tiver mais ideias, irei atualizando este artigo para ele continuar útil. Não precisa ler tudo de uma vez, mas eu tentei deixar ele bem completo para realmente guardar as informações que julgo mais relevantes.
1. Tags HTML5
Tags HTML (aqui nesse link fala sobre todas elas) não são um bicho de sete cabeças! Inclusive são muito úteis para quem quer organizar a folha de estilo.
É importante fazer uma divisão lógica de sua página, organizando as informações como se estivéssemos realmente colocando elementos em um painel.
Cada um tem seu lugar. Cada pai tem seu filho (e neto, se preciso) e as tags ajudam nisso porque elas são autoexplicativas. Essa organização é importante para você saber para onde está indo cada alteração sua, já que algo que você mexe em um pai vai impactar provavelmente nos seus filhos, e por aí vai.
Se você não quer que isso aconteça, é melhor ter sua estrutura muito clara na cabeça para não ir só na tentativa e erro e, quando menos esperar, rolar um erro na página que você não queria.
Ou seja, se deixar tudo organizado com as tags e estrutura claras é mais fácil não se perder, planejar e conseguir fazer dar certo.
2. Nomenclatura de classes e IDs
Cada um de nós pensa de uma forma e isso se reflete na maneira como nomeamos nossos elementos. Porém é importante que esse nome indique para você de forma simples de qual parte do seu código ele está se referindo.
Não adianta chamar de “div”, “divzão” e etc. se no código tem divs em diversos lugares e não sabemos onde aquela específica está.
Qual a importância disso? Nomear não é só uma questão burocrática. Serve para você conseguir se guiar no código e manipular o estilo daquilo você quer.
Existem padrões de nomenclatura de CSS que são usados no mercado. É uma boa prática fazer uso deles (um dos que mais vejo sendo usado é o BEM CSS), mas aí vai de você - não é obrigatório. O mais importante é entender onde está o que você quer e qual a estrutura do elemento.
3. Posicionamento: o famigerado (e querido) Flexbox
Andando por essa vida de códigos você já deve ter percebido que um dos maiores problemas de quem está escrevendo um arquivo CSS e não tem lá essa experiência é com posicionamento.
Seja para tornar seu site responsivo, seja para colocar AQUELA div no lugar que você sempre quis, posicionamento termina fazendo parte de 80% dos problemas que enfrentamos.
Eu tive muita sorte, acredito, porque já ouvi falar das felicidades que o flexbox me traria mesmo antes de começar a programar direito. É quase como um jeito de pensar seu posicionamento, pois transforma o layout rígido em mais flexível e flúido de acordo com o espaço do container. Quem quiser saber mais em detalhes dá uma olhada aqui.
Basicamente ele alinha os elementos a partir de dois eixos — o principal e o transversal. Esses eixos são definidos no elemento pai, que alinham ele e os seus filhos, sempre respeitando as hierarquias e prioridades.
Primeiro você declara o display:flexno elemento que irá posicionar. Depois você irá definir qual será o eixo principal:
flex-direction:
row /* para linhas */
column /* para colunas */
row-reverse /* para linhas inversas, ou seja, com ordem trocada */
column-reverse /* para colunas com o mesmo efeito *//* por padrão no momento que você declara o display como flex o flex-direction adquire o comportamento de row, aqui você pode mudar isto */
Mas quando falei de fluidez e flexibilidade não era exatamente isso que eu estava me referindo.
O flexbox se baseia no espaço que o container tem para ocupar e a partir das informações que você dá a ele arruma os elementos. As propriedades mais comuns que usamos para modificar o posicionamento dos elementos do flexbox e dar essas informações no código são justifiy-content e align-items.
Justify-content alinha os itens no container de acordo com a direção (ou eixo principal). Ex.: se você definiu que sua direção é coluna, ele vai trabalhar com os itens considerando a altura da coluna.
justify-content:
flex-start /* alinha os elementos no início do container */
flex-end /* alinha os elementos no final do container */
center /* alinha os elementos ao centro */
space-between /* cria um espaço igual entre os elementos mantendo o primeiro e último nas bordas */
space-around /* cria um espaço igual entre os elementos, inclusive entre a borda e o primeiro e último elementos */Align-items alinha os itens de acordo com o eixo oposto, ou transversal. Funciona parecido com o justify-content, com uns detalhes específicos, mas se entende um, consegue usar o outro.
align-items:
flex-start /* alinha os elementos no início do container */
flex-end /* alinha os elementos no final do container */
center /* alinha os elementos ao centro */
stretch /* faz com que os elementos cresçam de forma igual */
baseline /* alinha os elementos de acordo com a linha base da tipografia */Existem outras particularidades de posicionamento com flexbox, mas acredito que como um início essas já dão conta de levar seus elementos pra lá e pra cá e os colocar onde você quiser.
Eu sempre dou uma consultada nesse guia, quando esqueço algum — foi de lá que peguei a maioria do que falei e tem um resumo de outras propriedades que podem ser úteis no futuro — e indico o joguinho do sapo Flexbox Froggy para pegar o jeito.
4. Cores
Eu ia separar esse tópico em dois — identidade e leitura (contraste), mas eu acho que devem existir tópicos mais aprofundados sobre isso por aí, e como meu objetivo aqui é só tirar pessoas do aperto, vamos resumir.
Eu não sou boa com cores e, por isso, sempre opto por preto e branco porque não tem erro nem em termos de contraste nem de combinação. Mas não dá pra viver só de preto e branco na vida, né?
Então um dia tive que me render às cores e aprender a combinar uma com a outra.
Se você estiver fazendo um projeto para um cliente, provavelmente ela ou ele terá alguma mínima identidade visual. Se tiver, mesmo que seja uma imagem, siga. É a melhor forma de construir algo que faz sentido com o projeto sem se arriscar tanto.
Deixe o trabalho de repensar o visual de um site para quem trampa com isso. Ou seja, se você não for designer, pegue as ores que existem na marca do cliente e trabalhe em cima delas e de tons da mesma paleta.
Como? Tem uma ferramenta aqui que ajuda a fazer paletas a partir de outras paletas, cores e imagens. É daqueles links para guardar no coração e usar sempre que preciso.
Às vezes você consegue trabalhar com uma cor só e vários tons dela, ou até com uma cor e branco e preto (várias marcas são assim). Vai do seu estilo e gosto. É bom pensar que menos é mais, e que dá pra aproveitar transparências e cinzas para dar efeitos interessantes.
Agora, se for um projeto seu, indico primeiramente um brainstorm com o time (ou um momento seu) para pensar o que você quer passar para a pessoa que está vendo o seu projeto — qual sentimento quero causar? Com quem queremos parecer? Como queremos ser lembrados?
As cores fazem bastante diferença nessa hora, pois elas trazem um código que temos na sociedade e que, ao usá-las, pegamos um pouco do que elas significam no imaginário popular emprestado.
Claro que podemos reverter os significados das cores, mas a primeira impressão normalmente é ligada ao nosso inconsciente coletivo. Nesse artigo tem mais sobre isso, mas se você parar 5 minutos já consegue trazer alguns desses significados a tona.
Para ajudar a pensar no significado das cores, também temos uma ferramenta super legal aqui, em que você digita o que quer transmitir, e ela traz a cor disso. É em inglês, mas nada que um Google Tradutor não resolva.
Maaaas, nada disso terá valido a pena se você não fizer a combinação certa para dar leitura!
Quero dizer, mais vale um layout preto e branco (alô Medium!) do que um cheio de cores em que o texto esteja pequeno, sua cor não tenha contraste com o fundo (ou tenha contraste demais a ponto de dar o efeito oposto) e a fonte seja cansativa (falaremos mais de fontes logo mais).
São pontos importantes de atenção e podem ser resolvidos às vezes realmente mostrando para sua vó ,que já não enxerga tão bem, e pedindo para ver se ela consegue ler. Quando fazemos algo, fazemos para todos (e nem estou falando de acessibilidade — tema muito importante).
5. Fontes
Na realidade não tem muito o que ser falado de fontes. A escolha dela segue a mesma linha da cor, mas ainda mais leve. Na dúvida, sempre uma simples. Vai dar leitura e ser só amor.
Mas se quiser inovar, a dica é a mesma: pense o que quer transmitir com a fonte e procure alguma que tenha o mesmo sentimento. O guia do Google é ótimo porque já tem muitas fontes mapeadas e prontinhas para importar.
No mais, dá para usar fontes e tamanhos, espessura e etc. para diferenciar os títulos. Você pode atribuir um estilo para cada título, seguindo a linha de raciocínio que você planejou previamente. A inovação pode ficar com a disposição de informações.
6. Frameworks CSS
Frameworks CSS são conjuntos de componentes que constituem uma estrutura básica pré-pronta com elementos reutilizáveis para construir uma aplicação. Ou seja, é um pacote com elementos já definidos e que você só precisa importar para sua aplicação e usar como desejar.
Nessa hora você me pergunta: “Mas se tinha essa solução, por que deixou essa dica pro final?” Porque utilizar um framework não é tão simples assim.
Como disse, os elementos já são definidos previamente então, ao menos que seu interesse seja realmente importar tudo e não mudar o layout, temos que tomar cuidado com o uso excessivo de frameworks ou como eles podem atrapalhar nossa vida — experiência própria.
Eu quis deixar essa dica pro final porque é importante saber que podemos usar de tudo um pouco para tornar nosso trabalho melhor e isso inclui gastar tempo com o que mais importa.
Os frameworks que eu considero mais populares (escrevo em janeiro de 2019) são o Bootstrap e o Material Design. Ambos são bem legais e visualmente bonitos.
O Bootstrap foi um framework criado pelo pessoal do Twitter. Tem como maior benefício a responsividade de todos os seus elementos. Apresenta itens bem úteis que às vezes não queremos nos preocupar em fazer na mão, como tabelas, navbars e até carrousel.
Por ser o mais popular dos frameworks, tem bastante conteúdo na internet sobre ele, com respostas de dúvidas e dicas da comunidade. O site é bem completo e é fácil se guiar por lá.
Existem duas formas de começar a usar o Bootstrap no seu código: instalando via gerenciador de pacotes ou pelo próprio site (como eu prefiro), usando online via BootstrapCDN assim:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>//jQuery e Popper.JS em CDN<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
O Material Design não é um framework só voltado para desenvolvimento: ele é uma linguagem de design criada pelos designers do Google baseada em grids, animações e transições responsivas, preenchimentos e efeitos de profundidade como luzes e sombras.
Ele não pensa só em componentes reutilizáveis, mas toda uma nova forma de design, voltado inclusive aos efeitos de tinta e papel.
Além de todos esses benefícios de um trabalho de branding aberto para você utilizar no seu projeto, ainda existem as facilidades de que pelo Material Design estar sendo bastante utilizado em algumas empresas grandes, o layout acaba sendo familiar para seus usuários.
Eu pessoalmente acho ele mais bonito e adaptável aos diversos estilos de layout (mais até que o Bootstrap), mas aí é uma escolha de cada um.
Para instalar, o processo segue sendo o mesmo, instalar via site ou gerenciador ou então CDN:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>Com essas dicas, eu acho que já dá pra criar um CSS beeeem bacana pra sua aplicação e arrasar por aí com layout que vai fazer seu usuário entender tudo direitinho!
CSS não é só sobre ficar bonitinho, mas também é sobre a experiência do usuário que está do outro lado da nossa dela. A gente quer que tudo o que planejamos seja funcional, não né?
Se forem surgindo mais ideias vou atualizando esse guia para ele ser útil para mais pessoas, assim como pra mim mesma.
Espero ter ajudado, e até mais!
