Difference between _module.less and _extend.less

Question

Is there any difference between extending a theme using _module.less and _extend.less? And what is the best practice when extending a module/theme?

My first thought was it's better to use _module.less when styling a new module, and _extend.less when extending a module. But Luma uses _module.less when extending the blank theme so that theory has gone out the window.

The only difference I can see between them is _module.less is imported before the responsive library and _theme.less where as _extend.less is imported after them.

This is the order they are imported in vendor/magento/theme-frontend-blank/web/css/styles-l.less

//
//  Blank theme desktop styles
//  _____________________________________________

//  These desktop styles are added to mobile

//
//  Global lib + theme styles
//  ---------------------------------------------

@import '_styles.less';
@import (reference) 'source/_extends.less';

//
//  Magento Import instructions
//  ---------------------------------------------

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

//
//  Media queries collector
//  ---------------------------------------------

@import 'source/lib/_responsive.less';

@media-target: 'desktop'; // Sets target device for this file
@media-common: false; // Sets not to output common styles

//
//  Global variables override
//  ---------------------------------------------

@import 'source/_theme.less';

//
//  Extend for minor customisation
//  ---------------------------------------------

//@magento_import 'source/_extend.less';

Answer 1

The answer is somewhat hidden in the Magento docs:

Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles.

Read more here

Use _module.less when you want to make major changes in styles for a module and use _extend.less for minor adjustments. You'll find more examples on how to override component styles in the link above.

Answer 2

Simple explanation or difference between both:

_extend.less is the way to extend/modify parent themes styles for example you're happy with your parent theme Luma and just want to change the button styles in your custom theme, all you need to do is create a new file _buttons_extend.less under web/css/source in your custom theme and adjust styles in there. Register this file by adding it to the _extend.less file inside your theme directory.

What if you want to extend styles of a module e.g. checkout module, well you can create an _extend.less file inside your themes module folder e.g. Magento_Checkout/web/css/source/_extend.less and add/extend module styling in there.

Now if I added _module.less file inside my module directory Magento_Checkout/web/css/source/_module.less I'm intending to override my parent themes styling for this module in which case I need to copy '_module.less' file from my parent theme's module directory and make modification to that file in which case this file will replace parent themes _module.less file altogether.

Answer 3

The _extends.less with an S at the end within the Blank Theme, is a file where they created all the classes that can be extended via LESS later within the theme, without the need of creating new components or modular structure for style changes. -> For those who don't believe me: check the file.

The _extend.less without the S at the end, is for when you are 99% happy with what the parent theme has and you just need to change a couple of things, change some styling and that's it.

About the latter one, my personal opinion, don't use it for your own developing. It creates a big mess later. Keep your structure modular with _module.less for every module you want to customize and you will get a better outcome & maintainable project at the end.