Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Modular CSS with Sass Sass and BEM Styling Form Elements

Samuel Fortunato
Samuel Fortunato
20,229 Points

BEM seems redundant and useless. At least, in the cases Guil is using it.

Why would we give a form element a class of form? The word "form" doesn't describe anything, other than that it's a form. But, if there's nothing special about the form, then it's redundant to give it a description of form, because the description is right in the tag name. It's a <form> tag, so it's obviously a form.

Same with form__label and form__input. They are child elements of the form tag, so that makes it obvious that they are children. To describe <label> and <input> as elements of the form block is redundant. The markup already describes this.

If you wanted to target these tags in CSS, you would just do:

form label {

}

form input {

}

This makes the label and input styling dependent on its parent element, in that they don't receive the styling unless they're nested in a form tag. Which is what Guil's BEM naming is seeking to do, yeah?

Unless I'm missing something and just don't fully understand BEM yet... This implementation of BEM/class-naming seems to be very redundant and introduces HTML clutter. It's also more typing and isn't so DRY, as you're literally repeating yourself by giving a class of form to a <form> tag for example...

Anyone out there with words/resources to alleviate my confusion?

3 Answers

Rich Donnellan
Rich Donnellan
25,767 Points

Rather than try to explain it myself, I'll link you to a credible source for CSS related information.

https://css-tricks.com/bem-101/

You didn't specify, but have you read any other sources on the topic? I always recommend researching outside of Treehouse for further clarification.

Samuel Fortunato
Samuel Fortunato
20,229 Points

I guess my gripe is really how Guil is using it here, then. Instead of the example he used, which seem to just be general form styles, it would be better to use it for a more unique form/situation, like this:

.newsletter-signup {
  // code
}

.newsletter-signup__input {
  // code
}

But even then, you could just do (for the second code block):

.newsletter-signup input {
  // code
}

This would communicate meaning because the CSS communicates that this input style is only for inputs nested within the newsletter-signup class, and the HTML would also reflect this dependency, as the <input> tags would be nested within the <form> tag with the class of newsletter-signup.

I have no problem with following naming patterns and conventions. I'm just concerned about adding unnecessary/redundant definitions in the markup and CSS, and also typing more characters than you need to.

Also:

"Unless I'm missing something and just don't fully understand BEM yet... This implementation of BEM/class-naming seems to be very redundant and introduces HTML clutter. It's also more typing and isn't so DRY, as you're literally repeating yourself by giving a class of form to a <form> tag for example...

Anyone out there with words/resources to alleviate my confusion?"

You can have instances of form that you do not want the form styles to apply.

So sometimes you could have <form> and sometimes <form class="form">

.newsletter-signup__input

Should be

.newsletter__signup--input