'Multiple classes in each element or SASS inheritance/mixins?

I'm planning to refactor the scss code in my React application and I'm trying to understand what is the best practice between these two:

  1. Having multiple classes for an element (the main one + the shared classes):
 <div class="container-test flex flex-direction-column">Test</div>
  1. Having only one class (ex. container-test) and using @mixins/@extend inside the scss code:
.container-test{
 @include flex.flex;
 @include flex.flex-direction-column;
 ...
}

Also I'm trying to consider this point:

  • How should I make the shared classes (ex. flex, flex-direction-column) globally available? I know that the SASS @import rule will be deprecated so I'm trying to find a clean way to make shared classes globally available among components without having to import each time the shared scss file in each component (I would use css modules)
htmlcssreactjssassscss-mixins


Solution 1:[1]

The first approach is better. It uses relatively less keystrokes.

You can use partials to make your SASS organized when using the first approach.

More info: https://youtu.be/9Ld-aOKsEDk

More info: https://sass-guidelin.es/#:~:text=on%20this%20section.-,The%207%2D1%20Pattern,-Back%20to%20architecture

For the second question, you can create a file named '_index.scss' in your, say abstracts, folder. In that file, forward all your partials. Now you can use that file in your components or main stylesheets and avoid a bunch of extra lines. You can also write a custom namespace name for your abstracts and base and utilities et cetera.

More info: https://youtu.be/CR-a8upNjJ0

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maadhav Bhatt

Related Questions