,
81 tweets,
11 min read
Read on Twitter
Vou entrar na brincadeira! 😂
1 RT = 1 dica rápida de front-end
1 RT = 1 dica rápida de front-end
1. Visualmente <b> e <strong> deixam o elemento negrito. A diferença é que o <b> não carrega qualquer semântica e o <strong> representa um texto importante.
2. <i> e <em> deixam o elemento italico e ambos possuem carga semântica, sendo que o <i> costuma ser usado para coisas como expressões em outros idiomas e o <em> para indicar ênfase no texto.
3. Isso significa que não é uma boa ideia usar o <i> para representar coisas como ícones, elementos sem semântica como o <span> funcionam melhor pra isso.
4. Alguns elementos não carregam qualquer valor semântico, <div> e <span> são bons exemplos disso.
5. Por padrão a <div> é display: block e o <span> é display: inline, não vale gastar linhas de CSS para definir ou alterar isso.
6. Quando for desenvolver seus componentes, foque primeiro em garantir a semântica do HTML.
7. Se você garantir semântica, pode usar classes CSS para estilizar as coisas (pensando em CSS padrão).
8. Ainda sobre semântica, você pode pensar na hierarquia das informações como se estivesse diagramando um livro.
9. Não use tags diferentes de <h1> até <h6> para criar títulos de cabeçalhos.
10. Uma curiosidade é que atualmente você pode usar o <a> para envolver outros elementos (menos outro <a>).
11. No passado quando precisavamos criar , por exemplo, um card com link, tinhamos que fazer gambiarras como deixar o <a> dentro do card com position absolute 0.
12. Se usar libs baseadas em componentes, não caia na tentação de remover toda a semântica do HTML. Continue escrevendo código acessível.
13. Usamos lang, na tag <html>, mas uma dica legal é que você pode usar lang em qualquer elemento e informar o idioma padrão do texto.
14. E mais, você também pode estilizar qualquer elemento CSS baseado no uso do lang, tipo:
.description[lang="en"] { color: red };
.description[lang="pt-br"] { color: blue };
.description[lang="en"] { color: red };
.description[lang="pt-br"] { color: blue };
15. Isso se estende para qualquer propriedade nos elementos HTML, isso significa que é possível combinar WAI-ARIA com CSS e criar coisas bem legais, como esse Tooltip no CSS Components.
felipefialho.com/css-components…
felipefialho.com/css-components…
16. Interessante notar, que até classes, podem ser usadas dessa forma, por exemplo:
a[class="active"]
a[class="active"]
17. Sendo possível usar classes dessa forma, também é possível fazer coisas legais, como selecionar apenas elementos que tenham determinada palavra em algum lugar da classe:
span[class*="icon-"]
span[class*="icon-"]
18. Ou melhor ainda, capturando até palavras separadas por espaço.
span[class~="icon arrow-right"]
span[class~="icon arrow-right"]
19. Também é possível selecionar apenas elementos que começam com determinada palavra:
span[class^="icon"]
span[class^="icon"]
20. Com isso da pra fazer coisas bem legais, como selecionar apenas os links seguros (quem sabe pra botar um ícone de cadeado?):
a[href^="https://"]
a[href^="https://"]
21. Também é possível fazer coisas como selecionar todos os elementos disabled do projeto e adicionar estilo:
[disabled] { cursor: not-allowed; }
[disabled] { cursor: not-allowed; }
22. No passado era comum adicionar classe, por exemplo, nos últimos items de uma lista para zerar estilos:
<li class="last">
li { border: black solid 1px; }
.last { border: 0 }
<li class="last">
li { border: black solid 1px; }
.last { border: 0 }
23. Com o surgimento de pseudo-classes no CSS3, anos atrás, isso já não é necessário:
:last-child { border: 0 }
:last-child { border: 0 }
24. Mas a dica acima é bem ruim, o ideal mesmo é não zerar propriedades no CSS, isso não faz mais sentido desde que o :not passou a ser aceito nos navegadores:
li:not(:last-child} { border: black solid 1px; }
li:not(:last-child} { border: black solid 1px; }
25. O :not é uma das minhas pseudo-classes favoritas do CSS, já escrevi um artigo inteiro falando disso:
felipefialho.com/blog/2016/css-…
felipefialho.com/blog/2016/css-…
26. Usando apenas CSS é possível remover um elemento da tela caso ele não tenha conteúdo:
div:empty { display: none }
div:empty { display: none }
27. Rola até mesmo de misturar pseudo-classes, por exemplo, para que o elemento tenha um comportamento caso ele seja o último filho, mas não se ele for ao mesmo tempo o primeiro filho:
.btn:last-child:not(:first-child)
.btn:last-child:not(:first-child)
28. Dá pra fazer combinações muito loucas de pseudo-classes e pseudo-seletores, por exemplo, pegar uma classe .title apenas se ela não for um h2 e o .header não estiver ativo:
.header:not(.active) + .main .title:not(h2)
.header:not(.active) + .main .title:not(h2)
29. Pseudo-seletores, inclusive, ajudam demais para evitar resetar propriedades e fazer coisas legais com CSS.
30. É possível, por exemplo, selecionar apenas o elemento seguinte e trocar o estilo baseado na classe do irmão, algo como:
.btn.active + .btn { color: red }
.btn.active + .btn { color: red }
31. Ou mesmo selecionar todos os elementos irmãos seguintes para adicionar estilo:
.btn.active ~ .btn { color: red }
.btn.active ~ .btn { color: red }
32. Também temos possibilidade de combinar pseudo-classes e pseudo-seletores para fazer coisas do tipo:
input[type="checkbox"]:checked ~ p { color: red; }
input[type="checkbox"]:checked ~ p { color: red; }
33. Partindo dessa base, podemos fazer um CSS super-interativo aproveitando dos estados de elementos como radio e checkbox e fazer um elemento aparecer ou sumir:
p { display: none; }
input[type="checkbox"]:checked ~ p { display: block; }
p { display: none; }
input[type="checkbox"]:checked ~ p { display: block; }
34. Com isso dá pra fazer coisas surreais com CSS, sem usar JavaScript.
Essa é a base de todos os joguinhos e componentes desenvolvidos somente com CSS e apesar de parecer bruxaria, você acabou de ver que é super simples.
Essa é a base de todos os joguinhos e componentes desenvolvidos somente com CSS e apesar de parecer bruxaria, você acabou de ver que é super simples.
35. Anos atrás (muitos anos) escrevi um artigo mostrando como fiz todos os componentes do CSS Componentes:
felipefialho.com/blog/2014/e-po…
felipefialho.com/blog/2014/e-po…
36. Falando em seletores, eles possuem performance de leitura nos navegadores. E é importante levar isso em conta na hora de escrever seu código.
37. A performance de carregamento, do maior pro menor é
- # header
- .header
- header
- nav + header
- main > h1
- main header
- *
- [type="text"]
- .header:before, header: after
- # header
- .header
- header
- nav + header
- main > h1
- main header
- *
- [type="text"]
- .header:before, header: after
38. Evite aninhar elementos fazendo coisas como:
body header ul li
body header ul li
39. O ideal mesmo, caso não esteja usando CSS-in-JS, é usar classe para estilizar elementos e evitar fazer aninhamentos grandes.
41. Justamente para deixar o CSS menos caótico e facilitar a manutenção de código que metodologias como BEM ou RCSS foram criadas.
42. Mas elas não resolvem o principal problema do CSS, que chama especificidade.
Colisão de estilos é a maior causa de problemas quando trabalhamos com CSS em grandes projetos.
Colisão de estilos é a maior causa de problemas quando trabalhamos com CSS em grandes projetos.
43. Para resolver o problema da especificidade, nosso companheiro de todas as horas, chamado JavaScript entrou em cena, trazendo soluções como:
- CSS Modules
- CSS-in-JS
Elas garantem que o estilo não vaze para outros componentes.
- CSS Modules
- CSS-in-JS
Elas garantem que o estilo não vaze para outros componentes.
44. A desvantagem de algumas libs de CSS-in-JS é a necessidade de ter aplicações baseadas em componentes (como React, Angular e Vue) para funcionar.
45. Porém é possível utilizar, por exemplo CSS Modules, caso esteja utilizando Webpack no projeto, usei essa solução no meu Kratos Boilerplate e pode servir para seus projetos estáticos:
github.com/LFeh/kratos-bo…
github.com/LFeh/kratos-bo…
46. Uma das coisas legais do CSS Modules e outras libs CSS-in-JS, é não precisar mais pensar muito no nome das classes.
Ao invés de usar: .header__title
Você pode usar só: .title
Ao invés de usar: .header__title
Você pode usar só: .title
47. Se você desenvolve para navegadores modernos, após o avanço de Flexbox e CSS Grid, você não precisa usar mais float nos projetos para a construção dos grids.
48. CSS Grid também tira bastante a necessidade de apostar em libs de grid systems, como a do Boostrap ou mesmo nas baseadas em PostCSS como Lost ou Jeet.
49. CSS Grid e Flexbox podem e devem ser usadas juntas. mesmo resolvendo questões parecidas, cada uma tem sua especificidade de uso.
50. Flexbox é unidimensional e ideal pra parte interna no layout dos componentes.
Tipo em um header com logo na esquerda e um botão de menu na direita, na qual você pode usar:
.header {
align-items: center;
display: flex;
justify-content: space-between;
height: 60px;
}
Tipo em um header com logo na esquerda e um botão de menu na direita, na qual você pode usar:
.header {
align-items: center;
display: flex;
justify-content: space-between;
height: 60px;
}
51. CSS Grid é multidimensional e ideal para a parte macro do layout, como grids.
Também funciona muito bem para criar uma lista de cards por exemplo.
Além de escalar fácil no mobile.
Também funciona muito bem para criar uma lista de cards por exemplo.
Além de escalar fácil no mobile.
52. Faça bom uso das media-queries. O ideal é que você não crie pensando em desktop e depois sobrescreva as coisas no mobile.
Costuma funcionar melhor usar o conceito mobile-first e ir escalar o componentes subindo as resoluções.
Costuma funcionar melhor usar o conceito mobile-first e ir escalar o componentes subindo as resoluções.
53. Você pode criar escopos dentro da classe através das media-queries.
Isso significa que pode manter tudo que for genérico pra todas as resoluções fora das media-queries e dentro dela apenas o que for especifico daquela resolução.
Isso significa que pode manter tudo que for genérico pra todas as resoluções fora das media-queries e dentro dela apenas o que for especifico daquela resolução.
54. Anos atrás escrevi esse artigo explicando como criar escopos de media-queries, e de lá pra cá a ideia não mudou muito:
felipefialho.com/blog/2015/otim…
felipefialho.com/blog/2015/otim…
55. No passado, usavamos <div> e <span> para muita coisa que deveria carregar semântica. As tags inseridas a partir do HTML5 resolveram boa parte desses problemas.
56. Quando estiver criando um componente, sempre faça uma analise se está fazendo bom uso dos elementos HTML e se pode utilizar outras que façam mais sentido.
57. Atualmente existem aproximadamente ~110 tags HTML. É bastante improvável que não exista uma que sirva exatamente para cada ocasião.
58. O <main> por exemplo, deve ser usado apenas uma vez no projeto e serve para definir o conteúdo principal dentro do <body>.
Eu costumo adicionar como irmão das tags <header> e <footer> principais.
<body>
<header><header>
<main></main>
<footer></footer>
</body>
Eu costumo adicionar como irmão das tags <header> e <footer> principais.
<body>
<header><header>
<main></main>
<footer></footer>
</body>
59. Você pode ter multiplos <header> ou <footer> pelo projeto.
Eles podem ser usados para definir cabeçalho ou rodapé de qualquer contexto, como dentro de <article> ou <section> por exemplo.
Eles podem ser usados para definir cabeçalho ou rodapé de qualquer contexto, como dentro de <article> ou <section> por exemplo.
60. <article> e <section> costumam gerar certa confusão quanto ao uso. Importante dizer que você pode ter um <article> dentro do <section> e vice versa.
61. Anos atrás rolou uma discussão sensacional sobre article x section no @frontendbr e recomendo fortemente dar uma olhada:
github.com/frontendbr/for…
github.com/frontendbr/for…
62. Sempre que for escrever um endereço dentro de um texto, use o elemento <address>, que possui exatamente a função de deixar esse conteúdo semântico.
63. É ideal que você use a tag <nav> para todas as sessões do projeto, que represente navegação.
Você também pode ter multiplos <nav> pela aplicação.
Você também pode ter multiplos <nav> pela aplicação.
64. Faça uso da tag <noscript>.
Ele permite fornecer um feedback para o usuário caso o JavaScript não esteja disponível por algum motivo.
Ele permite fornecer um feedback para o usuário caso o JavaScript não esteja disponível por algum motivo.
65. Pode ver um apanhado das tags HTML mais usadas nessa sessão do MDN (Mozilla Developer Network) .
developer.mozilla.org/pt-BR/docs/Web…
developer.mozilla.org/pt-BR/docs/Web…
66. Inclusive, essa é outra dica.
Sou apaixonado pelo MDN. É o lugar que mais sinto confiança em validar as coisas e sempre aprendo alguma coisa nova.
developer.mozilla.org
Sou apaixonado pelo MDN. É o lugar que mais sinto confiança em validar as coisas e sempre aprendo alguma coisa nova.
developer.mozilla.org
67. E é super válido lembrar que todo mundo pode contribuir com geração e tradução de conteúdo no MDN.
Dica de ouro da @larienmf 😄
Dica de ouro da @larienmf 😄
68. Você pode melhorar ainda mais a semântica e acessibilidade do projeto usando WAI-ARIA.
WAI-ARIA é dividido em duas categorias: roles e states / properties.
WAI-ARIA é dividido em duas categorias: roles e states / properties.
69. Você pode por exemplo usar a [role="dialog"] para componentes de modal.
<div role="dialog">
<div role="dialog">
70. Também é possível definir quais são o <header> e o <footer> principais.
<header role="banner">
<footer role="contentinfo">
<header role="banner">
<footer role="contentinfo">
71. Outra possibilidade legal é deixar elementos apenas visuais, invisíveis para leitores de tela.
Funciona bem com ícones:
<svg aria-hidden="true">
Funciona bem com ícones:
<svg aria-hidden="true">
72. Dá pra fornecer informações sobre o elemento caso o texto não esteja disponível na tela.
De novo um exemplo com ícone:
<svg aria-label="Facebook">
De novo um exemplo com ícone:
<svg aria-label="Facebook">
73. WAI-ARIA se torna ainda mais importante a medida que criamos componentes com elementos sem semântica HTML.
É uma maneira de fornecer acessibilidade e significado para as tags que você criou.
É uma maneira de fornecer acessibilidade e significado para as tags que você criou.
74. Rola ainda de acessar todos os valores das propriedades WAI-ARIA com :before e :after no CSS e fazer umas coisas muito loucas como essa:
75. Já escrevi um artigo sobre WAI-ARIA com alguns exemplos legais:
felipefialho.com/blog/2016/sobr…
felipefialho.com/blog/2016/sobr…
76. Nunca se esqueça que :after e :before no CSS não funcionam sem a propriedade "content" 😋
:before { content: "Já acabou?"; }
:inline { content: "Ainda não"; }
Detalhe que por padrão eles são inline.
:before { content: "Já acabou?"; }
:inline { content: "Ainda não"; }
Detalhe que por padrão eles são inline.
77. A propósito, gosto muito de :before e :after, me permitem fazer diversas coisas com CSS sem encostar no HTML.
Pensa que com apenas 1 elemento HTML, você na verdade tem 3. Isso abre um mar de possibilidades.
Pensa que com apenas 1 elemento HTML, você na verdade tem 3. Isso abre um mar de possibilidades.
78. Mas vale o aviso: Todo o conteúdo que você adicionar no "content" do :before e :after não tem valor semântico e não renderiza no HTML.
Significa que o texto não será acessível.
Use apenas para complementos puramente visuais.
Significa que o texto não será acessível.
Use apenas para complementos puramente visuais.
79. Quando receber um projeto, faça uma analise e veja tudo que poderia ser componente. Não pense em páginas inteiras.
Desenvolva componentes separados e faça com que o agrupamento deles vire a página.
Isso vale tanto para aplicações SPAs como pra projetos estáticos.
Desenvolva componentes separados e faça com que o agrupamento deles vire a página.
Isso vale tanto para aplicações SPAs como pra projetos estáticos.
80. Você não trabalha sozinho ou sozinha.
Converse com sua equipe, principalmente designers, e explique sobre componentes e como todas as aplicações modernas são baseadas neles.
Isso vai fazer seus códigos ficarem muito mais assertivos.
Converse com sua equipe, principalmente designers, e explique sobre componentes e como todas as aplicações modernas são baseadas neles.
Isso vai fazer seus códigos ficarem muito mais assertivos.
