Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bem i SCSS na przykladzie inuit.css

2,288 views

Published on

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

Published in: Internet
  • Be the first to comment

Bem i SCSS na przykladzie inuit.css

  1. 1. Dobre praktyki CSS, BEM i OOCSS na przykładzie inuit.css @MichalZalecki MichalRazorZalecki Michał Załęcki
  2. 2. Czym charakteryzuje się dobrze napisany kod CSS • Kod jest łatwy w zarządzaniu • Kod jest przejrzysty i łatwo się go czyta • Kod jest skalowalny
  3. 3. BEM (Block, Element, Modifier) • block {} • block__element {} • block--modifier {}
  4. 4. .person {} .person--woman {} .person__hand {} .person__hand--left {} .person__hand--right {}
  5. 5. Sensownie nazwane selektory to podstawa dobrego kodu CSS • Postaraj się by selektory były jak najkrótsze • Lecz nie rób tego kosztem przejrzystości kodu • .user-avatar-link jest lepszym wyboremniż .usr-avt-a • Nie martw się o długość selektorów, gzip bardzo dobrze radzi sobie z kompresją dobrze napisanego kodu
  6. 6. Selektory stanów .is-active .is-hover .is-dragged
  7. 7. Selektory do pracy z JavaScript .js-sortable .js-is-active .js-drag-and-drop
  8. 8. Umiędzynarodowienie • Język angielski to oczywistość, ale która odmiana? • Bez różnicy? • .secondary-color czy .secondary-colour?
  9. 9. OOCSS • .btn • .btn--large • .btn--natural • .btn--negative <a href="#" class="btn btn--negative btn--large“>
  10. 10. Wielkość tekstu w em/rem dla zwiększonej dostępności @mixin font-size($font-size) { font-size: $font-size + px; font-size: $font-size / $base-font-size + rem; }
  11. 11. ID w CSS ssie • ID mają 255* razy wyższy priorytet niż klasy • Stylowanie za pomocą ID może prowadzić do nadmiernego korzystania z !important lub jeszcze większej ilości ID • Korzystanie z klas powoduje, że kod CSS jest bardziej przenośny * https://github.com/csswizardry/CSS-Guidelines#ids
  12. 12. Naprawiaj problemy, a nie symptomy • Nie używaj „magicznych” liczb • Ograniczaj stylowanie warunkowe ([if lt IE 7], [if gt IE 8]) najlepiej do klasy nadawanej <html> (tj. w HTML5 Boilerplate) • Narzędzia typu Prefixer nie są bezbłędne (np. brak –webkit- dla backface-visibility) i często nadgorliwe (np. –moz- dla border-radius) • Korzystaj z caniuse.com i/lub funkcji i wstawek (SASS, LESS, Stylus itd.), których poprawnego działania jesteś pewny
  13. 13. inuit.css is a powerful little framework designed for serious developers
  14. 14. Kiedy inuit.css jest lepszym wyborem od Bootstrapa? • potrzebujesz potężnej biblioteki obiektów i abstrakcji • rozumiesz i doceniasz wartości OO kodu, który jest skalowalny i przenośny • znasz dobrze OOCSS i SCSS jak również znasz ogólne zasady OO
  15. 15. Kiedy Bootstrap jest lepszym wyborem od inuit.css? • potrzebujesz biblioteki komponentów, która dostarcza design
  16. 16. LESS, SASS, a może Compass do tego? • SCSS (orginalnie): https://github.com/csswizardry/inuit.css • LESS: https://github.com/peterwilsoncc/inuit.css • Compass: https://github.com/stephenway/compass-inuit
  17. 17. Źródła i przydane materiały • https://github.com/csswizardry/CSS-Guidelines • https://twitter.com/csswizardry • https://github.com/inuitcss • http://bem.info • http://webroad.pl/html5-css3/2746-block-element- modifier-w-css • http://webroad.pl/?s=SASS+Compass

×