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
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions