Bem i SCSS na przykladzie inuit.css
19
Dobre praktyki CSS, BEM i OOCSS na przykładzie inuit.css @MichalZalecki MichalRazorZalecki Michał Załęcki
-
Upload
michal-zalecki -
Category
Internet
-
view
883 -
download
0
description
Prezentacja przygotowana na Bydgoszcz Web Development Meetup #4. Prezentacja porusza tematykę dobrych praktyk CSS, BEM i OOCSS na przykładzie inuit.css.
Transcript of 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
