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.

Simone Amorim

March 29, 2018
Tweet

More Decks by Simone Amorim

Other Decks in Technology

Transcript

  1. 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!
  2. |--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/
  3. Components Object Base Generic Tools Settings Trumps @mixin center() {

    align-items: center; justify-content: center; align-items center; }
  4. Components Object Base Generic Tools Settings Trumps .base-list { margin:

    0; padding: 0; list-style: none; } .base-list__item { padding: $spacing-unit; }
  5. Components Object Base Generic Tools Settings Trumps .products-list { @include

    center(); border: 1px solid $color; } .products-list__item { border: 1px solid $color; }
  6. Components Object Base Generic Tools Settings Trumps .user .products-list {

    border: 1px solid blue; } .user .products-list__item { border: 1px solid blue; }
  7. Evite usar Tags .event-card .p .event-card { > .name {/*ok*/}

    > p {/*avoid*/} } .name RSCSS! Element
  8. Variantes RSCSS! .event-card { > .avatar .-circle {/***/} > .title

    .-margenta {/***/} } .event-card { > .avatar {/***/} > .title {/***/} } 2 1 1 2
  9. “ Tem aquela frase: A gente nunca sabe a força

    que tem, quando a única alternativa é ser forte!!! - Yan Magalhães