Kdjykuj

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 additional 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';

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.

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.

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.