CSS CSS Selectors Selectors - Beyond the Basics DRY CSS

James Barrett
James Barrett
13,253 Points

Why is the .inline class more efficient?

Hi there,

Just struggling to understand why the inline class is created for the responsive buttons... Why didn't Guil just reuse the .btn class and set the display value to inline-block when the viewport is at 769px or greater?

Thanks, James.

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 87,406 Points

I think just to make sure that classes are not reused and to make it as DRY as possible which is after all what the video is about. With an extra class and assigning the class to the media query that makes sure that single style rule is used only for the media query rather than reusing a selector and changing it's style.

James Barrett
James Barrett
13,253 Points

Thanks dude. So the aim really is to ensure that CSS classes are being reused in the HTML but not in the stylesheet?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 87,406 Points

Yes you can use multiple classes in your html to change styles. The aim being to make sure your keep code organised so you don't have to change values in multiple locations. Sass is brilliant for this but you'll learn more about this later in your CSS development if you haven't already :)

darryn
darryn
17,348 Points

There's also a login button that he doesn't want to target with the media query :0)