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

Paul Rose
PLUS
Paul Rose
Courses Plus Student 4,600 Points
Posted by Paul Rose
Paul Rose
Courses Plus Student 4,600 Points

Styling Form Elements (Modular CSS Video)

How come the label__input class is no longer required when replaced by the label__input--hidden class? Content is at the end of the video.

Eric Martz
Eric Martz
16,007 Points
Eric Martz
Eric Martz
16,007 Points

I checked the related content video, but did not see what you were talking about in it. Could you clarify your question? If you have followed along in a workspace or on your computer posting code is always helpful.

1 Answer

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey Paul,

It is simple. You want to hide the label element, so you don't need those styles anymore. Instead you need to override them, because you don't want to have a margin-bottom: 10px on that element. The .srt class hides the text visually, but screen readers will still see it.

You could define both the .form__label and .form__label--hidden classes in the HTML, but that is just unnecessary.

Right?

See the CSS output, hopefully it will help a bit more:

.srt, .form__label--hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.form__label {
  display: block;
  margin-bottom: 10px;
}