I just want to know what is the best practice about css in Magento2.
We have the possibility to have design in
Vendor_Name/MyModule/view/frontend/web/css
and we can also put the design in :
app/design/frontend/Vendor_Name/default/web/css so my question is when do we have to put design in the module and when do we have to put it in the theme ?
Thanks for your help.
Conventionally, CSS and LESS files are stored only in themes. Module directories do not contain any default styles.
Technically there is an option to include them in template files, but i strongly recommend avoiding this.
Stylesheets are stored in this location:
/Namespace_YourModule/web/css
For more details see Magento developer documentation enter link description here
Put CSS in the theme is the best practice.
Because if you need to create the mobile-specific theme then it would be helpful to identify your device specific CSS using the theme. It also helps to boost page speed performance.
We have the sentence "Conventionally, CSS and Less files are stored only in themes. Module directories do not contain any default styles." from the documentation
https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css-themes.html
has already been discussed several times in our company.
In contrast to this, within the area "Theme development best practices" there is
https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/theme-best-practice.html
under point 11 the sentence "While styling any custom module, add the styling within the module, instead of adding it to the design theme. This way, the style will not be loaded unless the module is called. For example app/code/Company/Module/view/frontend/web/css/source/_module.less.".
This is already contradictory in its approach.
For example, if we develop a mega-menu module, which, due to its nature, has to include styling, we also add a "_module.less" file to the module.
In this case, you have to take care that no variables & mixins from the themes "blank" & "luma" are used, because at runtime of the theme, it cannot be guaranteed that the project theme inherits from one of the two.
Things like
& when (@media-common = true) { }
or
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { }
can be used because they are taken from the lib directory (lib/web/css/source/lib) and not from "blank" or "luma".
We would interpret the convention as "recommendation". Because principles like modularization & "Don't repeat yourself (DRY)" have a higher priority depending on the application.