Sass naming style options

sass-naming-styles.scss

/**
* ELEMENT NAMING
*/

// NAMING STYLE V1 (true BEM)
.k-input {
  @apply border-gray-200;
  @apply rounded;
  
  // ELEMENTS .k-input__icon
  &__icon {
    @apply color-blue;
  }
  
  // MODIFIERS .k-input.k-input--error
  &--error {
    @apply color-red;
  }
}

// NAMING STYLE V2 (shortened)
.k-input {
  @apply border-gray-200;
  @apply rounded;
  
  // ELEMENTS .k-input_icon
  &_icon {
    @apply color-blue;
  }
  
  // MODIFIERS .k-input.k-input-error
  &-error {
    @apply color-red;
  }
}

// NAMING STYLE V3 (simplified modifier class)
.k-input {
  @apply border-gray-200;
  @apply rounded;
  
  // ELEMENTS .k-input_icon
  &_icon {
    @apply color-blue;
  }
  
  // MODIFIERS .k-input.-error
  .-error {
    @apply color-red;
  }
}



/**
* MODIFIER NAMING 
*/
.k-input {
  @apply border-gray-200;
  @apply rounded;
  
  // MODIFIERS V1 k-input.-error
  .-error {
    @apply color-red;
  }
  .-open {
    @apply block;
  }
  
  
  // MODIFIERS V2 k-input.has-error
  .has-error {
    @apply color-red;
  }
  .is-open {
    @apply block;
  }
}