Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Sass and BEM Styling Form Elements

Samuel Fortunato
Samuel Fortunato
20,229 Points
Posted by 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
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 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
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.

Alexander Mackenzie
Alexander Mackenzie
10,542 Points
Alexander Mackenzie
Alexander Mackenzie
10,542 Points

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">

Alexander Mackenzie
Alexander Mackenzie
10,542 Points
Alexander Mackenzie
Alexander Mackenzie
10,542 Points

.newsletter-signup__input

Should be

.newsletter__signup--input