Magento 2 - Overriding CSS without using !important everywhere

Question

I'm working on a Magento 2 site at the moment for a client. Suppose my client's brand is boofar and the theme I'm trying to extend/override is foobar I've set as the parent theme using frontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Then under frontend/Foobarthemes/boofar/web/css/source/_theme.less I've written the CSS code that I want to override. I have also tried this with _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

I'm forced to use !important for anything to work here. None of the font and text stuff works in the above code.

Have I not understood the Magento 2 frontend workflow correctly?

Answer 1

You only want to have your styles in the _theme.less file if you want to override the parent theme's _theme.less file. For that file, only one of them is loaded, and it will always be the selected theme if the file exists there. From there, it will use the fallback scheme to find that file and use it.

So in your case, using the _extend.less file is the right file to use.

This is a bit confusing though, as the code that is put into the _extend.less file is loaded last in the when Magento compiles all the styles that exist in the site. So i'm wondering if there is something messing with the load order.

Looking over the way you have it set up, try setting your theme up in a different namespace and not in the same theme. This might not solve the problem, as the way you have your theme set up is the same as Magento has the luma/blank theme set up. But for all the work i have done, i have my vender namespace that then will extend from either a 3rd party theme, or from luma/blank.

The next thing to try would be wrapping your code in the built in media queries. I go into more detail here, but basically it stops your styles from being loaded twice into the styles-l.css and the styles-m.css files.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

From there, it all comes down to CSS specificity. If there is something else the is higher then yours, you need to be more specific in your class/id definition in the styles. You might want to post a picture of the DOM structure to show what you are targeting and what is over riding what you are looking to target.

Answer 2

If you are able to have your styles apply in _extend.less file, this means that you have problems with css specificity. Since Magento2 uses less compilation, most styles are very specific. To override them, your styles selectors must be more or equally specific. I will not post details of the concept itself here as there are plenty of articles can be found online.

Answer 3

If you're using the default LESS setup then make sure ALL your LESS is written inside the M2 LESS media queries. If you don't you'll end up with duplicate CSS and probably specificity problems.

---

This all comes down to specificity and load order, your CSS should be loading after the parent themes (or modules) so to overrule this all you need to do is meet their specificity.

For example if the parent theme uses

.parent-selector .selector {
    ...
}

Then you'd need to write the same selector, if for some reason that doesn't work you just need to add another selector before it. An easy way is to add body before it, as it covers every selector and adds specificity. Like so:

body .parent-selector .selector {
    ...
}

This article contains some good information on CSS specificity.

Alternatively you can overwrite the whole file

If you are making a lot of customisations it's better practice to overwrite the whole file instead of extending. To do this just add the file to your theme using the same file path and name.

Answer 4

For higher priority you can duplicate selector:

  .home.home {
    display: none;
  }

Answer 5

You have to override same .less file of parent theme you want to override, like if you want to override _theme.less file, then you have to copy this file to child theme over here (make sure same path of parent theme)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

you can override your css here.

Answer 6

Inject your custom css files is Better.

Read more : How to add a custom CSS file in Magento 2

And Mage Docs: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

Remember to compile using grunt/less to process the css: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html