代码划分标准

Magento的核心开发人员必须遵循的Magento代码划分标准.

本标准推荐给第三方扩展开发者。

Magento代码的某些部分可能不符合标准，但是我们正在逐步完善。

该标准是在我们的努力范围，以确保以下：

从功能层（JavaScript）去耦视觉层（CSS）层。
从标记（HTML）中分离功能层（JavaScript）。
恢复强调使用jQuery模板。
恢复重点从PHP类去耦HTML，CSS和JS。

使用RFC 2119 解读 "MUST," "MUST NOT," "REQUIRED," "SHALL," "SHALL NOT," "SHOULD," "SHOULD NOT," "RECOMMENDED," "MAY," 和 "OPTIONAL" 关键字.

语义

属性的名称和值必须使用有意义的单词由拉丁字母缩写的字母和连字符连接(`-`)

帮助简化和统一用于将视觉样式应用到页元素的命名约定。

可接受的

<section id="information-dialog-tree">
   <p> ... </p>
   <p> ... </p>
</section>
<a href="#information-dialog-tree">Scroll to text</a></a>

不可接受的

<section id="заголовок">
   <p> ... </p>
   <p> ... </p>
</section>
<section id="some_id">
   <p> ... </p>
   <p> ... </p>
</section>
<a href="#some_id">Scroll to text</a>

语义表示依赖于id属性

<ul>
   <li class="first" type="button" aria-pressed="false" aria-controls="some-id">button 1</li>
   <li type="button" aria-pressed="false" aria-controls="some-id">button 2</li>
   <li type="button" aria-pressed="true" aria-controls="some-id">button 3</li>
</ul>
<div>
   <label for="some-id">Enter text</label>
   <textarea id="some-id"></textarea>
</div>
<a href="#some-id">Scroll to text</a>

不可接受的PHTML，JavaScript和CSS文件的组合，

<ul id="my-special-menu">
   <li id="buttonId1" class="first" type="button">button 1</li>
   <li id="buttonId2" type="button">button 2</li>
   <li id="buttonId3" type="button">button 3</li>
</ul>

JavaScript 文件

$('#my-special-menu').on('click','li[id^="button"]', function() { ... })

CSS 文件

#my-special-menu { ... }
#my-special-menu > li { ... }

您必须仅使用语义HTML标记，并且不能使用呈现标记。

可接受的:

<p>HTML has been created to <b>semAntically</b> represent documents.</p>
<p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>

不可接受的:

<p>HTML has been created to <strong>semantically</strong> represent documents.</p>
<p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>

代码划分

可接受的CSS选择器

.notices-wrapper { ... }
.page-header:after { ... }
.payment-list:first-child { ... }
.caution { ... }
.caution.link { ... }
form input[type="password"] { ... }
.control-text:focus { ... }
a:hover { ... }
nav li._active { ... }

不可接受的CSS选择器

#header { ... }
[data-action="delete"] { ... }
form input[name="password"] { ... }
section[role="main"] { ... }
[role="menu] [role="menuitem"] { ... }
[role="menu] [role="menuitem"].active { ... }

你不能硬编码css样式在JavaScript文件

可接受的JavaScript文件

...
   options: {
      hOffset: 0,
      myCustomElement: '[data-container="my-custom-element"]',
 hiddenClass: '_hidden'
  }
...
   this.element.toggleClass(this.options.hiddenClass);
...
   this.options.hOffset = /* calculation based on dimensions of some DOM elements within a widget */
   this.element.find(this.options.myCustomElement).css({'margin-top', this.options.hOffset + 'px'})
...

不可接受的JavaScript部件文件

this.element.on('click', function() {
   if ($(this).is(':visible')) {
      $(this).css({ visibility: 'hidden' });
   } else {
      $(this).css({ visibility: 'visible' });
   }
});

您不能在HTML标签内使用内联CSS样式

可接受PHTML模板

<div class="no-display"> ... </div>

不可接受PHTML模板

<div style="display: none;"> ... </div>

Magento2中文手册