VSF 1 scss media mixin
Hello. Does this code make sense in terms of performance? Or will both of these CSS rules be collected by webpack and end up in a common style file? Does it make sense to write mixim for a phone? or simply writes: I’ll write a style, and for the desktop, for example, I’ll redefine it in a for-desktop mixin.
1: .product {
@include for-mobile {
flex: 1 1 50%;
}
@include for-desktop {
flex: 1 1 25%;
}
}
or
2: .product {
flex: 1 1 50%;
@include for-desktop {
flex: 1 1 25%;
}
}
Is there a performance gain\ bundle size with the first example?
1 Reply
Good CSS practice is to always have a base rule and then override it by use case. In this scenario, if your mobile styling is also the styling you’d want to apply if not extra conditions are applied, it should be your base style (without mobile selector). Then the desktop mixin is there to come into effect specifically when that selector is valid
This practice ensures that your page always has some rule applied to it that’s better than just the normal block layout of browsers.