Sass Fundamentals

Challenge 9: BEM Buttons

Sass Fundamentals

Check out a free preview of the full Sass Fundamentals course

The "Challenge 9: BEM Buttons" Lesson is part of the full, Sass Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students create CSS rules for buttons in the BEM naming convention.


Transcript from the "Challenge 9: BEM Buttons" Lesson

>> Mike North: So what we're gonna do, is build upon our broad experience of building buttons today. And this one's a little different, in that it has something more than just text inside the button. This is gonna have a price. And that price is gonna be wrapped in its own DOM element and we're gonna consider that to be an element in the BEM sense, right?

It is a sub piece that has no meaning outside the context of these one click checkout buttons. So what we're gonna do is use BEM to create buttons that pass the tests that are waiting for you. And make sure that you pay attention to the fact that button Primary and Secondary have been changed to class names that align with the BEM convention.

Those are modifier classes, right? And so you're gonna see that the names are a little bit different, the concepts should be very much the same as what we've been working on all day. Just because we've been practicing this idea and now we can practice the convention as well.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now