Magento主题开发最佳实践

利用主题开发的最佳实践，让你在更新或升级你的Magento实例或安装一个自定义扩展后，有更好的机会避免与主题的冲突和问题。

我们建议在开发主题时使用以下最佳实践。

当继承默认的Magento主题时，应扩展默认的样式而不是覆盖它们。只要有可能，就把你的定制放在_extend.less或_theme.less文件中，而不是覆盖一个来自父主题的.less文件。
定制或创建新的.xml布局文件，而不是定制和重写.phtml模板。例如，如果你需要创建一个新的容器，最好是添加一个.xml文件，而不是覆盖一个现有的模板。其他一些可以使用布局指令进行的定制包括。
1. 使用改变一个块或容器的位置。
2. 通过在/内设置移除或显示属性为真或假来添加或移除一个块或容器。
3. 使用元素改变现有容器的HTML标签或CSS类。
4. 在<theme_dir>/web/目录中添加字体、图片和JavaScript文件。
  
  关于使用布局的更多信息，请参见本指南的布局章节。
通过引用现有的.phtml模板（模板提示可以帮助）或复制粘贴HTML标记到你的自定义模板中，重新使用默认Magento文件中的标记和设计模式。
使用<theme_dir>/etc/view.xml来改变图片类型或尺寸，或者添加你自己的类型。详情见配置图片属性。使用这个文件也可以定制产品库小部件。
如果你需要改变用户界面的措辞，添加自定义CSV字典文件，而不是覆盖.phtml模板。
使用CSS的关键路径来渲染页面的速度要快得多。
始终保持文本的可翻译性。为了确保在你的Magento模板中使用的文本可以被翻译，将其包裹在翻译功能中。例如。

<a href="#"><?= __('Click to download'); ?></a>

在继承空白或Luma主题时，要使用移动优先的方法。
Magento对后端和前端技术都有一套编码标准。需要时参考它们。
在设计造型时不要重复工作。相反，创建一个类或混合器，并在需要时调用它们。
在设计任何自定义模块的样式时，在模块内添加样式，而不是将其添加到设计主题中。这样，除非模块被调用，否则样式将不会被加载。例如app/code/Company/Module/view/frontend/web/css/source/_module.less。
在为自定义主题设计样式时，将样式添加到独立的less文件中，而不是追加到一个文件中。这样一来，样式更容易被追踪和调试。

作为参考，清查看 [Magento_Blank_Theme_Path]/web/css/_styles.less
```
@import 'source/lib/_lib.less'; // Global lib
@import 'source/_sources.less'; // Theme styles
@import 'source/_components.less'; // Components styles (modal/sliding panel)
```
Magento-styled or ready-made component(s): To check the list of existing component(s) found in blank theme: [Magento_Blank_Theme_Path]/web/css/source/_sources.less and [Magento_Blank_Theme_Path]/web/css/source/_components.less, Magento adds their ready-made components via @import.

If you want to add custom components or extend an existing component, copy [Magento_Blank_Theme_Path]/web/css/source/_components.less into your custom theme. For example, use app/design/frontend/Company/Theme/web/css/source/_components.less and add/import your Custom style for new/existing components.

The blank theme path [Magento_Blank_Theme_Path] = vendor/magento/theme-frontend-blank or app/design/frontend/Magento/blank may vary.
```
//
//  Components
//  _____________________________________________

@import 'components/_modals.less'; // From lib
@import 'components/_modals_extend.less'; // Local

//  _____________________________________________
//
//  Custom style for new components
//  _____________________________________________

@import 'components/_[CUSTOM_COMPONENT_1].less';
@import 'components/_[CUSTOM_COMPONENT_2].less';

//  _____________________________________________
//
//  Custom style for existing components
//  _____________________________________________

@import 'components/_[CUSTOM_COMPONENT_1]_extend.less';
@import 'components/_[CUSTOM_COMPONENT_2]_extend.less';
```
Next, add styles for respective components (new or extended) in a separate file. For example, for a new slider component: app/code/Company/Module/view/frontend/web/css/source/components/_sliders.less. To extend or override an existing button style: app/code/Company/Module/view/frontend/web/css/source/components/_buttons_extend.less.

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/theme-best-practice.html