I am working on a site where our front end developers want to add CSS files to specific pages through the Admin (in effect, certain Admin driven pages will have special CSS). We are not using the built-in LESS setup that Magento has.

So far, they've tried the following (in Content > Pages > Edit Page):

Edit Page Layout

This "works" in the sense that the css file is in the <head/> and gets loaded. The issue is that we also have this in our default_head_blocks.xml file: default_head_blocks.xml

When Magento combines all of the xml, the resulting css files are ordered as follows:

Snippet of CSS files

This causes the cascade to grab the CSS in an undesired order and the page doesn't display as we need. I've tried playing around with the <move/> XML action to no avail.

We've had little to no luck with finding a solution. I found this question, What is the proper way of positioning/ordering CSS files in Magento 2?, but the answer here is not an option at all.

  • I'm not sure if this page from the dev docs will be helpful as it is regarding component load order but it does also mention it can be used with CSS and LESS.
    – Ben Crook
    Apr 21, 2016 at 20:25
  • I'm not sure it is helpful, unfortunately. I'm not sure how I would use <sequence> through the Admin itself. Thanks though! Apr 21, 2016 at 21:15
  • 1
    I take it that will only work if you're creating your own component. That was my only hope damn it! Hopefully someone has an answer.
    – Ben Crook
    Apr 21, 2016 at 21:48
  • I haven't played around with M2 but have you tried something like <referenceContainer name="before.head.end">....<referenceContainer> place your resource in there?
    – dchayka
    Apr 28, 2016 at 16:51
  • 2
    I just finished the first version of an extension that allows you to order css tags with an order attribute. Checkout my answer below and the new extension! Let me know if any problems. Apr 30, 2016 at 21:16

1 Answer 1


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.

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

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.

  • It really hurts that this is the answer (because it shouldn't require an extension to be able to reorder assets...), but once we got it configured, it worked beautifully. Thank you! May 2, 2016 at 20:54
  • 1
    Totally hear you on that and glad to have helped! Checkout that Alan Storm article I linked to under your question. It's a long read (I skimmed some of it), but interesting in that Magento2 adds some complexity on top of the layout updates that Magento1 had. The head section in particular seems to be less flexible than it was in the former version. May 2, 2016 at 21:00
  • Yeah, that was one of the articles that spurred the question, because we couldn't figure out how to get it to work as desired. May 2, 2016 at 22:14
  • As per my experience it is perfect solution and working for me. But some time it not working due to server configuration and I faced it. NO NEED TO INSTALLED ANY KIND OF MODULE FOR ORDER CSS. It is default solutions for 2.0.x you just need to add order="Number". Feb 11, 2021 at 18:31
  • Rather than a downvote @VikramKumar you might consider adding another answer where you demonstrate the working behavior out of the box, as I and many other folks have not been able to get it to work, hence the creation and upvotes for this module on github. Feb 14, 2021 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.