franzheidl / bemify Goto Github PK

Pros:

1. Nice abstraction
2. Enforces consistency

Cons:

1. Developers have to learn this thing (and look at the configuration of the library before they can write markup)
2. Hard to lint and enforce its usage in a team
3. Makes the codebase absolutely nightmarish to grep

I insist particularly on con # 3. Because it's impossible to search for things like block__element in the .scss files, this abstraction makes onboarding new people on a codebase or trying to refactor very difficult.

Do people use bemify on large projects in teams of more than 2 people? If so, what were the results?
Would it be fair to warn potential users of this library (in the README for example) that this might have adverse effects on the searchability of their codebase?

Not an issue but thought I'd let you know that the __child--bad/.ishappy example of the .io/bemify is wrong. It has .my-element__child--bad.is-happy rather than .my-element__child.is-happy. On github readme it's correct though.

Hope this helps.

I get this error when compiling the sass

The following modules did not declare an eyeglass version:
  bemify
Please add the following to the module's package.json:
  "eyeglass": { "needs": "^0.8.2" }

With the element mixin only doing:

@mixin element($name) {
  @at-root {
    &#{$element-separator}#{$name} {
      @content;
    }
  }
}

users are unable to make psuedo selectors on the containing block/element and then styles on an element underneath:

+block("breadcrumbs")
  +clearfix
  display: block

  +element("link")
    color: blue
    text-decoration: underline

    &:after
      content: ">"

  +element("item")
    float: left
    display: block

    /* on the last .breadcrumbs__item */
    &:last-child

      /* any .breadcrumbs__link underneath */      
      +element("link")

        /* those link's :after psuedo selector... */
        &:after
          display: none

would compile into:

/* ... */
.breadcrumbs__item:last-child__link:after { display: none; }

The element mixin should scan the parent selector (&) and strip out the anything but the original block or element.

See this example of the broken element mixin and this example of the smarter element mixin. Also this conversation on css-tricks.com.

I receive this error when the compiler builds code in sass --watch project.

Syntax error: Invalid CSS after "...ator}#{$prefix}": expected "{", was "-#{$state} {"

"-#{$state" may only be used at the beginning of a compound selector. on line 69 of bower_components/bemify/sass/_bemify.scss from line 1 of sass/styles.scss
64:}

Make bemify work with eyeglass.

I was able to get it working, but the necessary syntax proves cumbersome. E.g.:

@include element ('item') {
    @include state (error, has) {
        // * issue starts here, where output should be `.form__item-error`
        @include block ('form') { // * how to achieve the above without this line?
            @include element ('item-error') {
                display: block;
            }
        }
    }
}