Bem i SCSS na przykladzie inuit.css

Download Bem i SCSS na przykladzie inuit.css

Post on 05-Dec-2014

882 views

Category:

Internet

0 download

Embed Size (px)

DESCRIPTION

Prezentacja przygotowana na Bydgoszcz Web Development Meetup #4. Prezentacja porusza tematyk dobrych praktyk CSS, BEM i OOCSS na przykadzie inuit.css.

TRANSCRIPT

  • 1. Dobre praktyki CSS, BEM i OOCSS na przykadzie inuit.css @MichalZalecki MichalRazorZalecki Micha Zacki
  • 2. Czym charakteryzuje si dobrze napisany kod CSS Kod jest atwy w zarzdzaniu Kod jest przejrzysty i atwo si go czyta Kod jest skalowalny
  • 3. BEM (Block, Element, Modifier) block {} block__element {} block--modifier {}
  • 4. .person {} .person--woman {} .person__hand {} .person__hand--left {} .person__hand--right {}
  • 5. Sensownie nazwane selektory to podstawa dobrego kodu CSS Postaraj si by selektory byy jak najkrtsze Lecz nie rb tego kosztem przejrzystoci kodu .user-avatar-link jest lepszym wyboremni .usr-avt-a Nie martw si o dugo selektorw, gzip bardzo dobrze radzi sobie z kompresj dobrze napisanego kodu
  • 6. Selektory stanw .is-active .is-hover .is-dragged
  • 7. Selektory do pracy z JavaScript .js-sortable .js-is-active .js-drag-and-drop
  • 8. Umidzynarodowienie Jzyk angielski to oczywisto, ale ktra odmiana? Bez rnicy? .secondary-color czy .secondary-colour?
  • 9. OOCSS .btn .btn--large .btn--natural .btn--negative