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
Samuel Fortunato
20,229 PointsBEM 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
Treehouse Moderator 27,696 PointsRather 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.
Alexander Mackenzie
10,542 PointsAlso:
"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
10,542 Points.newsletter-signup__input
Should be
.newsletter__signup--input
Samuel Fortunato
20,229 PointsSamuel Fortunato
20,229 PointsI 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:
But even then, you could just do (for the second code block):
This would communicate meaning because the CSS communicates that this input style is only for inputs nested within the
newsletter-signupclass, and the HTML would also reflect this dependency, as the<input>tags would be nested within the<form>tag with the class ofnewsletter-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.