Magento – Magento 2 : Refuse to apply style

What's happening:

This is likely due to custommenu.css being loaded after your custom theme. One way to combat this is, instead of using page.xml, to put the declaration in local.xml of your theme's layout folder. This will be loaded last and therefore your css overrides will come last.

A better way:

Another way to handle this is to create a custom layout file and reference it from a local module's config.xml:

    <layout>
        <updates>
            <customizer>
                <file>custom.xml</file>
            </customizer>
        </updates>
    </layout>

In the module's app/etc/modules/YourCompany_YourModule.xml declaration you will set its' dependency to whichever module is adding custommenu.css:

<?xml version="1.0"?>
<config>
    <modules>
        <YourCompany_YourModule>
             <active>true</active>
             <codePool>local</codePool>
             <depends>
                <Company_Custommenu/>
             </depends>
        </YourCompany_YourModule>
    </modules>
</config>

Your new file custom.xml can have the css declaration. This may seem a bit extreme but in my opinion is more correct, avoids local.xml declarations, and properly sets the dependency.

Another, nother, way:

This is the brute-force-getterdone method. First, check where custommenu.css is coming from. It's likely from something similar to skin/frontend/base/default/css/custommenu.css - if so, your local theme can provide an override.

Copy the custommenu.css file to skin/frontend/yourpackage/yourtheme/css/custommen.css and make your local edits there. Ba-blam: now you've overridden the file without disturbing the original file itself.

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.