Magento2中文手册
> Magento2中文手册 > HTML样式指南

HTML样式指南

这种风格指南定义为团队开发Magento少和CSS代码的HTML代码风格的内在要求。我们建议开发者Magento的扩展和定制也使用这些标准。

缩进

只使用空格缩进:

  • Tab: 4 空格
  • 缩进大小: 4 空格
  • 延续缩进: 4 空格

推荐

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

文件结束

在文件的结尾添加空白行。

自关闭的标签

总是关闭自关闭标签。

不恰当的

<br>
<img src="image.png" alt="image">
<input type="text" name="username">

推荐的

<br />
<img src="image.png" alt="image" />
<input type="text" name="username" />

行长

避免代码行长于120个字符。使用编辑器时，浏览HTML代码时，向左和向右滚动是不方便的。将标记属性按比例排列以增加代码可读性。

不恰当的

<input data-bind="attr: { id: 'cart-item-'+item_id+'-qty', 'data-cart-item': item_id, 'data-item-qty': qty }, value: qty" type="number" size="4" class="item-qty cart-item-qty" maxlength="12"/>

推荐的

<input data-bind="attr: {
       id: 'cart-item-'+item_id+'-qty',
       'data-cart-item': item_id,
       'data-item-qty': qty
       }, value: qty"
       type="number"
       size="4"
       class="item-qty cart-item-qty"
       maxlength="12"/>

等于号周围的空间

不推荐的

<link rel = "stylesheet" href = "styles.css">

推荐的

<link rel="stylesheet" href="styles.css">

属性后面的空格

不推荐的

<span data-bind="i18n : 'Update'"></span>
<span data-bind="i18n:'Update'"></span>

推荐的

<span data-bind="i18n: 'Update'"></span>

元素级别如下图：

HTML样式指南

css类名称

不恰当的

<button type="submit" class="button-green">Submit</button>

推荐的

<button type="submit" class="action-primary">Submit</button>
上一篇：