Created by Tuts+ in association with.net magazine and Creative Bloq.
Writing Modular CSS With Sass and BEM
CSS Best Sellers
Writing Modular CSS With Sass and BEM
Tweet on Twitter
Share on Facebook
Pinterest
Tweet on Twitter
Share on Facebook
Pinterest
great tutorial thanks!
more tutoriais like this one with exemplos it amazing.!!!!!!!! tanks
I would have went: base__text–size, base__text–color, base__text–lineheight
$saffron : orange;
$base__text__primary: $saffron;
One question, How can I get that console?
Vim editor
This is great, Jeffrey, but I think you could have introduced the nice thing about nesting with SASS and BEM like:
.list {
list-style: none;
&–bullet {
list-style: bullet;
}
}
do you mean:
&–bullet is similar to .list–bullet?
Thanks
Yes, if it’s nested in .list {} (like in my example given).
Amazing !
that’s works because the 2 — ?
@Alexandre dupond No, it works because of the & (ampersand). The double dash is just a part of BEM.
I’m wondering why you didn’t use the BEM class convention in the text module. My advise is to never use HTML tags as selectors, except for the reset file of course.
dotfiles please ?
I think things like default stylings for fonts, semantics, resets should go to base.scss and modules should contain module styling only, no resets and stuff. Also I would just have went with .heading__style block and apply a mixin to it and in my markup just add this style for headings where I feel I need. Then just create modifier for more specific heading styling and if needed so, add just some custom styling to each h(x) instead of relying on semantic element, which someone might use as a standard h1, 2, 3… not styled with css.
In the _list.scss example I’d rather use the & operator to express the relationship block – element – modifier and to avoid repeating the name of the block in the element and modifier classes.
Instead of:
.list {}
.list__item {}
.list__item–end {}
I would write:
.list {
&__item {
&–end {}
}
}
Jeffrey Way)))))
how to deal with grandchildren in bem ??
That’s great, learned a lot of new things…
Dude you are Sass ninja master god level
This guy actually codes directly from the command line (no code editor) , that’s something to learn
Im confused what is the reset folder for ? there was just a few seconds of explanation