Magento 2: CSS include sequence

Question

If we include CSS in layout XML as below, Magento includes it after style-l.css and style-m.css.

<css src="Magento_Theme::css/home/custom.css" media="all" />

But if we include CSS as below then Magento includes it before style-l.css and style-m.css. So what is the reason for the same ?

<css src="Magento_Theme::css/home/custom.css" />

Answer 1

it is important to know that :

style-m.css generates basic and mobile-specific styles,

style-l.css generates desktop-specific styles (for 768px width screen and higher)

This means, when you open a Magento in mobile device, Magento load only styles compiled from the styles-m.less file, the Extra styles from the second file styles-l.less are compiling and loading only if the screen width is 768px or higher.

So when you add media="all" you target all devices and your file will be loaded in all devices, this why Magento place it after style-l.css, style-m.css

• Ben Crook: Do you have any info about the order attribute as every time I've checked that hasn't been a thing. Is it something new?
• PЯINCƎ: the order attribute is available in v 2.0
• Dhaval Solanki: @Prince Can you please share some document for "order" attributre ?
• PЯINCƎ: I saw it a long time ago on github
• Rajeev K Tomy: @BenCrook for css, there is no order property allowed. if you use it, magento will show an exception since it violates schema definition. If you want to know further about this, please ask a new question, then I will happily provide a detailed answer.

Answer 2

You can find the detailed answer here.

The short answer is:

Magento load all css assets into asset groups. Asset groups are created based on the css properties and which is what stands crucial for the rendering order of css assets.

An asset property is an an array of attribute values other than src attribute.

Example 1: Without media="all"

Suppose the css are configured in the below order in a layout configuration:

<css src="css/styles-m.css"/>

<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>

<css src="css/print.css" media="print"/>

<css src="Magento_Theme::css/home/slider.css" />

Then the asset grouping will be like this:

1. Asset Group ([]) Holds:

css/styles-m.css

Magento_Theme::css/home/slider.css

2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:

css/styles-l.css

3. Asset Group (["media" => "print"]) Holds:

css/print.css

and hence the css rendering order will be:

1. css/styles-m.css

2. Magento_Theme::css/home/slider.css

3. css/styles-l.css

4. css/print.css

---

Example 2: With medial="all"

Now if our css are configured in the below order:

<css src="css/styles-m.css"/>

<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>

<css src="css/print.css" media="print"/>

<css src="Magento_Theme::css/home/slider.css" media="all" />

Then the asset grouping will be like this:

1. Asset Group ([]) Holds:

css/styles-m.css

2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:

css/styles-l.css

3. Asset Group (["media" => "print"]) Holds:

css/print.css

4. Asset Group (["media" => "all"]) Holds:

Magento_Theme::css/home/slider.css

and hence the css rendering order will be:

1. css/styles-m.css

2. css/styles-l.css

3. css/print.css

4. Magento_Theme::css/home/slider.css