Magento – the proper way of positioning/ordering CSS files in Magento 2

cssheadlayoutmagento2

To include a CSS file, add the <css src="<path>/<file>" media="print|<option>"/> block in <head> section in a layout file.

However it doesn't say how we can influence the order of our CSS files. And if we add CSS files this way in a custom theme which has a parent theme the result is that the files are added quite at the top of the <head> section with a lot of other CSS files below them, meaning their priority is quite low and we cannot easily override rules from the parent theme or extensions.

There were similar problems in Magento 1 and there were workarounds. Some were more clean others less.
What is the best way to order a CSS file of a custom theme at the bottom of <head> in Magento 2 – if possible complying the Magento 2 layout guidelines for custom themes?

Best Answer

Magento2 has no built-in mechanism for this so I decided to treat it as an opportunity to write my first Magento2 extension. The Quickshiftin\Assetorderer extension is now available on GitHub!

Once you have the extension installed you can specify an order attribute in your css XML tags.

<head>
  <css src="css/page/home.css" order="100"/>
</head>

You can also use the order attribute in layout XML files such as default_head_blocks.xml. Any css tags you don't specify an order for are treated as if they have an order of 1.

Related Solutions

Magento – Magento adding CSS and JS includes to the footer

I know this is not an answer to your question but something you might want to consider nonetheless.

Magento uses quite a lot of inline javascript, especially on the product detail page. As that javascript depends on external scripts loaded in the header you will need to move all the inline scripts to external files too and add them in the footer.

You might be faster and better off by compressing the CSS and JS with the tools built into Magento and using gzip compression and far expiration headers to speed them up. That way the 'lag' caused by the javascript and CSS would be kept to a minimum without the need of changing the default Magento and 3rd party extensions layout. This way, when you upgrade your Magento or extensions, you don't have to redo all the work.

The .htaccess provided by the HTML5 boilerplate project provides this gzip compression and the far expiration headers, Please check http://inchoo.net/ecommerce/magento/magento-boilerplate/

Magento – Change the order of CSS files. Load module’s CSS before theme’s CSS

@benmarks has a great approach from this SO thread - though his example is for Javascript it can be adapted for CSS, too:

https://stackoverflow.com/questions/12610949/magento-module-layout-xml-load-order

Another option to try would be to use an directive in your custom module layout XML, as the directives in an are processed before the other directives. This means that jQuery will load before all other files.

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <update handle="add_css_first" />
    </default>

    <add_css_first>
        <action method="addCss" block="head">
            <link>css/custom-styles.css</link>
        </action>
    </add_css_first>
</layout>

There are also community modules which exist to allow you to set an explicit sort-order with a rewrite of page/html_head:

https://github.com/drewhunter/ItemPosition

Which allows you to do this sort of customization:

 <reference name="head">
        <action method="setLast">
            <last>css/custom-styles.css</last>
        </action>
 </reference>

Best Answer

Related Solutions

Magento – Magento adding CSS and JS includes to the footer

Magento – Change the order of CSS files. Load module’s CSS before theme’s CSS

Related Topic