Magento 2 LESS structure is different than the structure of Magento 1. LESS files can be found in multiple places in Magento 2. Each LESS file can be found in a modules specific folder.One way to create our less structure is to extend the LESS files from the parent theme. For example, we use Magento_Customer module. We created a LESS page named _account.less and imported in _extend.less. The role of _extend.less is to extend the styling from our parent theme. With the example below, we can create the structure for each specific module.Another way to create a LESS structure for one specific module is to override the LESS files from parent theme. This can be accomplished by adding _module.less in web→css →source.When we want to load files which are found on all pages (header.less, footer.less, etc.) we'll create a specific styles.less in web→css. Here we will import files from web→css→source.This file stylestu.less we'll be loaded in default_head_block.xml and in theme.js. Also in theme.js we'll load css/styles-l.With this simplified structure, if we use Grunt as a task runner, the time to response is 1.7s per each CSS modification. If on the other hand we have a much complex less structure and the time response is getting bigger, then we can use a temporary LESS structure. This can be achieved by adding in web→css a temporary styles.less file and import there the file we work on.To make your changes easier, structure them by adding in your theme separate overriding or extending .less files for each Magento UI library component you change.Extending component's stylesIf you like to keep the styling from the parent theme you need to extend the style to our theme, you must create a _buttons_extend.less file to add your styles for the button component and extend.less where you register the _buttons_extend.less, in the source folder.Override component's stylesTo override the parent theme's styles and for a better and efficient ordered structure create separate LESS pages with the general variables: buttons.less, variables.less, forms.less, layout.less, prices.less, breadcrumbs.less, etc. We can use the variables included in these pages on all the pages from our theme file. All these pages must be imported in _sources.less from source. Then import this in styles.less from web→css.Another important and also effective method is to create variables on top of a specific page and use them just on that page.
