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

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

What is better?

This

// BEM selectors

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

@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}

.header {

    @include e(inner) {

    }

    @include e(brand) {
        background-color: $header-bg-brand;
    }

    @include e(main-menu) {
        background-color: $header-bg-main-menu;
    }

}

or

.header__inner {

}

.header__brand{}
.header__main-menu{}

I saw few articles saying that the second way was a better way for the browser, but in my logic it's the same thing, right?

I saw that even few very good companies used the second approach. So now I'm thinking why : d

1 Answer

Eric Butler
Eric Butler
33,512 Points

Aurelian, Your first example is SCSS, and your second is regular CSS. So if you're not using SCSS, obviously the 2nd option is the only acceptable one.

Of course, when you compile option 1 from SCSS into CSS, it will output option 2 exactly. So the browser doesn't prefer one or the other -- you'll have to serve the browser the compiled CSS version of option 1 anyway, since browsers can't interpret SCSS. So the only way to say which is "better" is to think about how each looks to other developers.

Take a look at option 1 vs option 2: Which is more obvious to a developer who's looking at this for the first time? How many lines of code are required? How much SCSS experience do you need to understand -- and, if necessary, modify -- each option? Obviously, option 2 is much easier to read and understand.

You may think, rightly, that if you used a mixin you might save yourself some typing across an entire project. Maybe, but what if you structured this like:

.header {

  &__inner {
  }

  &__brand {
    background-color: $header-bg-brand;
  }

  &__main-menu {
    background-color: $header-bg-main-menu;
  }

}

This way, you remove that complicated mixin from your code, and also save yourself from rewriting .header before every declaration. And it's still very easy for a SCSS developer to understand.

What do you think? Make sense?

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Good point!

Yes, but, &__ &-- is pretty hard to write, compares to @include e() @Include() when you write that even faster.

I don't know, but anyone using Sass would understand that, as this is a very basic Mixin. I'm new to it lol

But you are actually somewhat umm, that looks quite nice too!

I don't know :) On the other hand this appraoch is good too, and it's something new for the eyes, as i got bored with the @include e() by now lol though this makes the project more consistent , sort of. When you add &-class-name, that starts to look messy with the mixins.

Good though, will try that too :)

Thank you for the asnwer.

Eric Butler
Eric Butler
33,512 Points

You are welcome! Like most programming languages, there are many different ways to reach the same solution. I appreciate you mentioning being consistent, because that is important. Whatever feels best and the most maintainable long-term, is usually a good solution.

Do you ordinarily use BEM style for your CSS? If so, how do you like it? I haven't been convinced that I need to use it yet, but I read articles about it being a best practice. What do you think?

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I absolutely love using BEM. Very clean, very code clean, easy to read, easy to maintain. Every project I do now, is with BEM, and some SMACSS and OOCSS.

You can check some of my project here (check git-pages - as that's where the code is updated usually). Git

Now I'm making a site with my best ability I can - still in progress but I'm feeling I'm crushing it this time!

Which is this - https://github.com/AurelianSpodarec/hcCodingBlogMine

You can look at the code, and see how it is. However if you are interested, i have plenty of resources for you to look at and learn from for BEM.

How do you code? If not BEM? do you use SMACSS? Or something like 

.blog-content
.blog-title
.blog-excerpt
.blog-tags
  .blog-social-icons

.nav
.nav-list li
.nav-list a

Do you use something like that?

DO yo have expeirence with Sass maybe?

Do you work as a web-dev in the first place? :D

Btw, how would you rate my English from 1(low) to 10(high)?

Eric Butler
Eric Butler
33,512 Points

Aurelian, Your stuff looks great, especially that LearnX website -- very stylish design! Yes, I usually write more like your code example here, using hyphens (like .article, .article-title, .article-author, etc.). But the BEM style is starting to interest me. I have been using SCSS (Sass) for about a year now, and really like it. As for your English, I'm able to understand you just fine, though I can tell it doesn't seem like your first language, so I'd rank it a ... 9? Cheers, and good luck to you on all your coding projects!

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Awh, had a job interivew today, and it find's out I need pretty much knoweldge to build a webapp with PHP. Which I know how to... but I don't know the syntact etc.. as I didn't do this for 8months etc..

I suppose, I just need PHP and I'd be fine :D

ANd more pure JS.

How come you can tell English isn't my first language? That's bad xd I'd need to be able to write like a Native English speaker, like in the books xd