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

Bem i SCSS na przykladzie inuit.css

More Related Content

Viewers also liked

Similar to Bem i SCSS na przykladzie inuit.css

Bem i SCSS na przykladzie inuit.css