Magento 2 Layout – style-m.css vs style-l.css

csslayoutmagento2

How style-m.css and style-l.css files are generated in Magento2?

In theory style-m.css should have less code and to have styles only for mobile devices than style-l.css in order to load on mobile devices faster.

How you define in less file if part of code should be part of style-m.css or style-l.css?

The following links and source code didn't help me to understand it.

Resources:

Best Answer

These files are generated through LESS.

In theory style-m.css should have less code and to have styles only for mobile devices than style-l.css in order to load on mobile devices faster.

This is not completely correct. The styles-m.css contains CSS rules for both mobile and desktop and thus is generally bigger than the styles-l.css which contains rules for desktop. However, the goal is still this same, this way, mobile devices do not need to download CSS rules for desktop devices.

Regarding the question of how styles can be "placed" in either of those files, this is done via the Magento UI library media queries which help Magento create these two files from your LESS rules.

To give you an example, a media block like the following one would be placed in styles-m as both desktop and mobile devices have rules within this block "in common":

& when (@media-common = true) {
  h1 {
    font-size: 12px;
  } 
}

A media query block like this would be for devices which have a min resolution of "screen_xs", which are mobile devices with a screen resolution of 480px and bigger, meaning it would still be placed in styles-m but would not necessarily affect all mobile devices:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xs) {
  h1 {
    font-size: 18px;
  }  
}

Changing the (@extremum = 'min') to (@extremum = 'max') would change the rule to its opposite and thus only affect devices with a width smaller than 480px.

And a block like this would only concern desktop devices and thus be placed in styles-l, as everything 'above' screen__m is considered a desktop device (by default):

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  h1 {
    font-size: 24px;
  }  
}

You can read more about these break points in the Magento developer guide.

Related Topic