What are the benefits of modularized styling?
For example, I'm using
app/design/frontend/<vendor>/<theme>/web/css/source/_extend.less
For all of my styling. However, the Magento Dev Docs say to place the styling into each module's folder, such as Checkout styling in:
app/design/frontend/<vendor>/<theme>/Magento_Checkout
But it all gets compiled into styles-m.css and styles-l.css anyways...doesn't seem to be a point?
By using module wise styling, you/end developer can always get better idea like for which module this css is loading as sometimes we add the custom classes also.
each module will have template files also so if any custom functionality is added then we can figure out that this css part is for this section only.
While compiling the code, if whole code is added is one less file like you have done then it will take longer time to compile, instead if you use module wise less then only that part of changed less will get compile and error finding will also be easy.
It's true that all will get compiled in styles-m.css and styles-l.css, but its more structured and clear way introduced for better understanding.
It is much easier to maintain code when it's split up into smaller chunks, would you rather manage multiple smaller files or one huge file?
This article provides some good info.
But at the end of the day, do whatever you and your team find works best. Magento's best practices aren't always best practices, especially with front-end.
