Bem i SCSS na przykladzie inuit.css

Bem i SCSS na przykladzie inuit.css
Dobre praktyki CSS, BEM i OOCSS na przykładzie inuit.css @MichalZalecki MichalRazorZalecki Michał Załęcki
Czym charakteryzuje się dobrze napisany kod CSS • Kod jest łatwy w zarządzaniu • Kod jest przejrzysty i łatwo się go czyta • Kod jest skalowalny
BEM (Block, Element, Modifier) • block {} • block__element {} • block--modifier {}
.person {} .person--woman {} .person__hand {} .person__hand--left {} .person__hand--right {}
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
Selektory stanów .is-active .is-hover .is-dragged
Selektory do pracy z JavaScript .js-sortable .js-is-active .js-drag-and-drop
Umiędzynarodowienie • Język angielski to oczywistość, ale która odmiana? • Bez różnicy? • .secondary-color czy .secondary-colour?
OOCSS • .btn • .btn--large • .btn--natural • .btn--negative <a href="#" class="btn btn--negative btn--large“>
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; }
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
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
inuit.css is a powerful little framework designed for serious developers
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
Kiedy Bootstrap jest lepszym wyborem od inuit.css? • potrzebujesz biblioteki komponentów, która dostarcza design
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
Ź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

Check these out next

Bem i SCSS na przykladzie inuit.css

Recommended

More Related Content

Viewers also liked(13)

Similar to Bem i SCSS na przykladzie inuit.css(20)

Recently uploaded(11)

Bem i SCSS na przykladzie inuit.css