Skip to content

:not() selector can't be added directly to the BEM Block #399

@desig9stein

Description

@desig9stein

In some cases, we need to use the not selector directly on the block element, for example:

@include b(igx-step) {
     // Maybe we can have one more mixin, for example 'nm' that stands for a negative modifier
     // that resolves to the 'b' element followed by the negative modifier of the block element
     // wrapped in the :not() selector in this case :not(igx-step--disabled)
    @include nm($not: 'disabled') {
        &:focus {
            @include e(header) {
                background: var-get($theme, 'step-focus-background');
                color: var-get($theme, 'title-focus-color');
            }
        }
    }
}

This should resolve to:

.igx-step:not(.igx-step--disabled):focus {
   .igx-step__header {
      ...
  }
}

This can reduce the amount of output code since doing it will eliminate the need for overrides

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions