You May Also Like

About the Author: csstutorial


  1. 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;

    1. @Alexandre dupond No, it works because of the & (ampersand). The double dash is just a part of BEM.

  2. 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.

  3. 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.

  4. 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 {}

Leave a Reply

Your email address will not be published. Required fields are marked *