Magento 1.9 – Fix for CSS File Loading Too Early

Bottom line: you need to have a value calculated by PHP, therefore the approach of using a helper is appropriate. I think it makes sense to use the addCss convenience method rather than addItem a it's a little cleaner and should work fine for your needs:

<{handle}>
    <action block="head" method="addCss">
        <stylesheet helper="my_module/my_helper/getFileName" />
    </action>
</{handle}>

Your helper seems to be calculating the path to the CSS files using the design model, but this will be done again by the page/html_head block. Change your helper to simply return the file paths relative to the theme (i.e. not using the design model) and your problem is solved.

@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>