Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mantendo sua CSS maneira e do 'BEM'.

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.

C66863aa3cc145cf7d5ff8e1c40a7db8?s=128

Simone Amorim

March 29, 2018
Tweet

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