0

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.

3 Answers 3

1

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

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.