Skip to main content

Forums

This topic contains 3 replies, has 4 voices, and was last updated by  maddes 7 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #193402

    tomhanson1985
    Participant

    Just a quick question about the above that has been buzzing around our office today.

    I am fairly new to LESS and very new to BEM methodology so wanted to bounce the idea off some experts to find out pros/cons. The idea being this:

    If I write using the BEM methodology in LESS I can write like this:

    block {
      &__element {
        &--modifier-one {
           color: red;
        }
        &--modifier--two {
           color: blue;
        }
      }
    }
    

    that will compile to:

    block__element--modifier-one {
      color: red;
    }
    block__element--modifier-two {
      color: blue;
    }
    

    Now to me that seems like a nice way of writing it within less and it will also make it easier to maintain in the long run but a quick web search hasn’t bought anything up and that makes me worry that I have overlooked something very important!

    What do you guys think?

    #194107

    Chris Coyier
    Keymaster

    Seems perfectly fine to me. I just covered that a little in this article in the nesting section. Good to know LESS works the same way.

    #194129

    lukefrake
    Participant

    My team have just been discussing this very issue and have decided to go for it.

    It links things to better really nicely so we think it will be good for us.

    #276632

    maddes
    Participant

    Hey I know this is old, but you have a bug in

    &--modifier--two {
    

    Should be

    &--modifier-two {
    

    :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star