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

CSS Modular — Boas Práticas e Bizus

CSS Modular — Boas Práticas e Bizus

Lightning Talk dado no VTEX Lab em 06/07/2015

Daniel Fosco

July 06, 2015
Tweet

More Decks by Daniel Fosco

Other Decks in Programming

Transcript

  1. 4

  2. ...MAIS DE UMA CLASSE NO MARKUP <div class="uim-no-items well text-muted

    text-center"> ... </div> .uim-no-items { ... } 14
  3. SOLUÇÃO (COM SCSS) <div class="uim-no-items"> ... </div> .uim-no-items { @extend

    .well; @extend .text-muted; @extend .text-center; ... } 17
  4. SOLUÇÃO (COM SCSS AINDA MELHOR) <div class="uim-no-items"> ... </div> .uim-no-items

    { %extend .well; %extend .text-muted; %extend .text-center; ... } 18
  5. .card { background: blue; .card-title { font-size: 1.2em; } .card-image

    { img { width: 100px; } } p { font-size: 1em; } } 23
  6. .card { background: blue; } .card .card-title { font-size: 1.2em;

    } .card .card-image img { width: 100px; } .card p { font-size: 1em; } 24
  7. .card { background: blue; } .card__title { font-size: 1.2em; }

    .card__text { font-size: 1em; } .card--is-active { .card; opacity: 1; } 45