Is using SCSS maps this way bad practice?

Question

Is this bad practice or why does nobody do it? I'd considere this as really helpful with certain properties you'd use over and over again through larger projects, like your own framework etc, since it keeps the code short and makes it easy to edit.

$flex: '.nav', 'nav', '.grid', '.row';
$inline-flex: '.button', 'button', '.icon';

@mixin passElement($list, $property, $value) {
  %#{$value} {
    #{$property}: #{$value};
  }
  @each $element in #{$list} {
    #{$element} {
       @extend %#{$value};
    }
  }
}

@include passElement($flex, display, flex);
@include passElement($inline-flex, display, inline-flex);

This would compile to:

.nav, nav, .grid, .row {
  display: flex;
}

.button, button, .icon {
  display: inline-flex;
}

I think this question is very opinion based. I would say that this code makes it much harder to read what's happening but that's just my opinion. — Dominik, Jul 22 '20 at 05:51
@Dominik yeah, but I think since I'm just going to repeat the `@include` I'd say it's a only a question of getting used to it, idk — Simplicius, Jul 22 '20 at 05:57

score 0 · Accepted Answer · answered Jul 22 '20 at 05:54

I I think it can potentially be useful, but I believe that you are now grouping your code around what properties a selector has, instead of what component it belongs to.

"Ok, this should be bold. Where is my list of bold elements?"
"Next, where is my list of elements with red background?"

I know it's not as bad as that, but clearly when you edit a component, you want all the properties for that component in one place. Looking at this, I can only assume .nav will be in 20 different lists

Maybe for something like fonts. Because often you want to know "where am I using this font?". I'm still dubious though.

yeah thats the only argument against it I could find. I'd have to recall a lot, but I guess in total this would make up for shorter, and I belive cleaner code, but I guess it's just a question of preference — Simplicius, Jul 22 '20 at 06:00

Is using SCSS maps this way bad practice?

1 Answers1