Método BEM e arquitetura CSS

Como utilizar o método BEM na construção de um CSS que faz sentido.

Transcript

2. .Bruna Gil { Desenvolvedora de Software (Front-End) @ Praxio Tecnologia ex-aluna da {reprograma} Humanas 4ever }
4. { MAS existem dois lados nessa história }
5. { O que o CSS é: }
6. } • Específico; • A ordem dos fatores altera o produto; • Curva de aprendizado baixa; • Truquessssss 👀; • Não há “lógica”;
7. { O que nós fazemos com ele: }
8. } • Estrutura caótica; • Classes genéricas e não semânticas • Organização da nossa cabeça; • Desconhecimento do projeto; • Documentação ruim/inexistente/“não necessária” (CSSDoc); }
9. O que podemos fazer para amenizar esse cenário?
11. { Métodos ≠ Framework Bibliotecas Pré-Processadores }
12. } OOCSS ITCSS SMACSS RSCSS ???? }
13. { MÉTODO BEM ♥ } Ufa, fácil de pronunciar e fazer trocadilhos
14. IMPORTANT! . Tudo funciona na teoria . Cada projeto é um projeto . Não há verdade absoluta
15. { O que é MÉTODO BEM? }
16. { .Desenvolvimento rápido .Padronização .Equipes grandes .Projetos escaláveis .Reutilização de código }
17. { Block Element Modifier .Código mais legível para todos .Elementos que fazem sentido }
18. { BLOCK (BLOCO) }
21. { ELEMENT (ELEMENTO) }
23. { MODIFIER (MODIFICADOR) }
25. { Nomenclatura . Bloco__Elemento_Modificador . nome-do-bloco__Elemento--Modificador . (...) . Seu estilo próprio :) }
26. { “Tá, mas como isso funciona na prática?” }
32. { Mais exemplos! }
36. Classes?
37. Hierarquia Especificidade E as próxima tags ou elementos no HTML??
39. { “Por que é importante pensar em arquitetura de CSS?” }
40. { As coisas mudam O código e o seu projeto também }
41. { Processos e resultados são a maior prioridade }
42. { Organização & documentação importam! }
43. { As CLASSES foram feitas para serem usadas (sempre)! }
44. { CSS é incrível! só precisamos refletir nossa relação com ele }
46. { Tem que fazer sentido . Para o time . Para o projeto . Para o momento }
47. Referências .BEM e Arquitetura CSS (Inglês): 1, 2, 3, 4, 5 .BEM(Português): 1, 2 .Documentação BEM .Meu texto no Medium
48. <the end> Obrigada! </the end> Twitter: @brunaggil Github: brunagil LinkedIn: /brunaggil/