Mantendo sua CSS maneira e do 'BEM'.

Você já se deparou diante de um arquivo CSS sem entender por onde iniciar a correção / melhoria de uma aplicação? Vem comigo conhecer os principais conceitos que irão te ajudar na organização da sua folha de estilo, abordando os principais conceitos relacionados a escalabilidade e mantenabilidade para garantir uma CSS sustentável.

Transcript

1. Mantendo sua CSS Maneira e do ‘BEM’ By Simone Amorim By Simone Amorim
2. Simone Amorim @samorim02 @simoneas02 simoneas02.github.io Mother, WWcode Leader, Organizer of FEMUGPE, Front-End Developer and CSS Evangelist I love running and ride a bike!
3. Problemas Relacionado!!
4. Sem uso de Metodologias
5. https://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/ https://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/ Metodologias CSS? SMACSS BEM ITCSS RSCSS
6. |--base/ | |--normalize.css | |__base.css |--state/ | |--is-moving.css | |__is-waiting.css |--layout/ | |--header.css | |--body.css | |__footer.css |--module/ | |--arm.css | |__leg.css |__theme/ |--body-dark.css |__body-light.css Variáveis? Mixins? Hacks? https://smacss.com/book/ https://smacss.com/book/
7. https://willianjusten.com.br/organizando-seu-css-com-itcss/ https://willianjusten.com.br/organizando-seu-css-com-itcss/ Components Object Base Generic Tools Settings Trumps
8. Components Object Base Generic Tools Settings Trumps $color: pink; $spacing-unit: 10px;
9. Components Object Base Generic Tools Settings Trumps @mixin center() { align-items: center; justify-content: center; align-items center; }
10. Components Object Base Generic Tools Settings Trumps * { box-sizing: border-box; }
11. Components Object Base Generic Tools Settings Trumps html, body { height: 100%; }
12. Components Object Base Generic Tools Settings Trumps .base-list { margin: 0; padding: 0; list-style: none; } .base-list__item { padding: $spacing-unit; }
13. Components Object Base Generic Tools Settings Trumps .products-list { @include center(); border: 1px solid $color; } .products-list__item { border: 1px solid $color; }
14. Components Object Base Generic Tools Settings Trumps .user .products-list { border: 1px solid blue; } .user .products-list__item { border: 1px solid blue; }
15. Block Element Modifier
16. Entendendo‘BEM’! .stick-man {} .head {} .arms {} .feet {} .stick-man__head {} .stick-man__arms {} .stick-man__feet {}
17. .stick-man {} Entendendo‘BEM’! .stick-man--pink {} .stick-man--orange {}
18. .stick-man__head {} Entendendo‘BEM’! .stick-man__head--small {} .stick-man__head--big {}
19. O que é RSCSS?
20. RSCSS! Pense em tudo como Componente! .search-form .search-form {} Duas palavras
21. RSCSS! Element Nomeando Elemento .field .action .search-form { > .action {/*****/} > .field {/*****/} } Uma palavra
22. Elemento Seletores .event-card .description .event-card { .speaker {/*okay*/} > .description {/*better*/} } .speaker RSCSS! Element
23. Múltiplas Palavaras .event-card .descriptiontalk .event-card { > .speakername {/*****/} > .descriptiontalk {/*****/} } .speakername RSCSS! Element
24. Evite usar Tags .event-card .p .event-card { > .name {/*ok*/} > p {/*avoid*/} } .name RSCSS! Element
25. Variantes RSCSS! .event-card { > .avatar .-circle {/***/} > .title .-margenta {/***/} } .event-card { > .avatar {/***/} > .title {/***/} } 2 1 1 2
26. RSCSS! … e muito mais
27. “ Tem aquela frase: A gente nunca sabe a força que tem, quando a única alternativa é ser forte!!! - Yan Magalhães
28. Obrigada! @samorim02 @simoneas02 simoneas02.github.io