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 the Headlines

Samuel Fortunato
Samuel Fortunato
20,229 Points
Posted by Samuel Fortunato
Samuel Fortunato
20,229 Points

Is some of the stuff Guil is doing really necessary? Some of the stuff seems strange.

I already think Sass is an improvement from just plain CSS, but the examples he is using in the videos seem redundant/unnecessary/strange.

For example, making a mixin to make BEM element naming "easier":

@mixin e($element) {
  &__#{$element} {
    @content;
 }

Then you write this whole mess (as a child of a set of styles):

@include e(item) {
  // styles go here
}

...instead of just this:

&__item {
  // styles go here
}

His method is much more typing, and is less clear and intuitive, as opposed to him saying it was "intuitive". With ampersand naming, all you have to know is that you replace the & with the parent selector. With the mixin, you have to remember what the e() mixin does. Unless you're used to using mixins like that, it's less intuitive and less clear in meaning than just using &.

Is he just doing most of the things he is doing to teach these techniques? A lot of the stuff seems to be less useful and more work.

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

I like your explanation, Shaun Wong! Unfortunately, from what I was able to gather, the + syntax for including mixins works w/ the indented sass syntax, but not w/ scss. So this should work in a .sass file:

+e(item)
  // styles go here

But not this in a .scss file:

+e(item) {
  // styles go here
}

1 Answer

Shaun Wong
Shaun Wong
14,489 Points
Shaun Wong
Shaun Wong
14,489 Points

Everything here is all optional, and perhaps its will also be more work setting it up, but you only set it up once then you can copy it from project to project.

Its up to you and your style of coding if you wish to incorporate some of these ideas.

Sass is extremely powerful and guil is doing a great job at showcasing what is possible, but i do agree sometimes its unnecessary to over complicate sass code, a tutorial like this may scare away newbies to try out sass. In the case of the BEM Mixin example, it feels like unnecessary complexity as you are writing more code, but these mixins will come in handy and can make your code more semantic and make more sense right away when looking at a block.

There is a shortcut to write includes quicker below

+e(item) {
  // styles go here
}