Code demarcation standard
Magento core developers must follow the Magento code demarcation standard.
This standard is recommended for third-party extension developers.
Some parts of Magento code might not comply with the standard, but we are working to gradually improve this.
The standard was developed in the scope of our efforts to ensure the following:
- Decouple visual (CSS) layer from the functional (JavaScript) layer.
- Decouple functional (JavaScript) layer from the markup (HTML).
- Reinstate emphasis on using of jQuery templates.
- Reinstate emphasis on decoupling HTML, CSS and JS from PHP classes.
Use RFC 2119 to interpret the "MUST," "MUST NOT," "REQUIRED," "SHALL," "SHALL NOT," "SHOULD," "SHOULD NOT," "RECOMMENDED," "MAY," and "OPTIONAL" keywords.
Semantics
For attribute names and values you must use meaningful unabbreviated lowercase words comprised of Latin characters concatenated with a hyphen (-)
- Helps simplify and unify naming conventions that are used to apply visual styles to page elements.
Acceptable
<section id="information-dialog-tree">
<p> ... </p>
<p> ... </p>
</section>
<a href="#information-dialog-tree">Scroll to text</a></a>Copy
Unacceptable
<section id="заголовок">
<p> ... </p>
<p> ... </p>
</section>
<section id="some_id">
<p> ... </p>
<p> ... </p>
</section>
<a href="#some_id">Scroll to text</a>Copy
Semantic representation may rely on ID attribute
- Forces engineers to think about reusable page components instead of unique singleton components.
- Reduces long-term maintenance efforts.
Acceptable PHTML template
The following acceptable example is terse and uses an Accessible Rich Internet Applications (ARIA) approach.
<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>Copy
Unacceptable combination of PHTML, JavaScript, and CSS files
The following unacceptable example replaces a single PHTML file with a combination of a PHTML, JavaScript, and CSS files.
PHTML file
<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>Copy
JavaScript file
$('#my-special-menu').on('click','li[id^="button"]', function() { ... })Copy
CSS file
#my-special-menu { ... }
#my-special-menu > li { ... }Copy
You must follow the separation of presentation and content methodology.
The following list will help you make a distinction between the actual meaning of a document, and how this meaning is presented to its readers:
Content (Semantics) includes:
- logic
- information
- data
- model
- outline
- message
Presentation includes:
- aesthetic
- graphics
- design
- style
- visualization
- view
You must use semantic HTML markup only, and must not use presentation markup.
Acceptable:
<p>HTML has been created to <strong>semantically</strong> represent documents.</p>
<p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>Copy
Unacceptable:
<p>HTML has been created to <b>semantically</b> represent documents.</p>
<p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>Copy
Code demarcation
Visual representation must rely only on HTML class attributes, CSS pseudo-classes and pseudo-elements, HTML tags, and form element’s type attribute and form elements state attributes (example: disabled, checked).
As the first option, you are required to use HTML class attributes. In case this option is not applicable then it is recommended to use HTML tags and form element’s type attribute.
- Enforces clean, strict separation between visual and business logic layers.
- Allows frontend and backend teams to work independently.
- Allows changing look and feel without affecting business functionality, and vice versa.
- Enables frontend teams to clean up old styles quickly and easily when refactoring.
Acceptable CSS selectors
.notices-wrapper { ... }
.page-header:after { ... }
.payment-list:first-child { ... }
.caution { ... }
.caution.link { ... }
form input[type="password"] { ... }
.control-text:focus { ... }
a:hover { ... }
nav li._active { ... }Copy
Unacceptable CSS selectors
#header { ... }
[data-action="delete"] { ... }
form input[name="password"] { ... }
section[role="main"] { ... }
[role="menu] [role="menuitem"] { ... }
[role="menu] [role="menuitem"].active { ... }Copy
You must not hard-code CSS styles in JavaScript files
Exception: CSS attributes where values must be calculated beyond the css-topics/LESS code.
- Simplifies change of the default look and feel by adding CSS classes to and removing them from elements.
- Improves style extensibility.
- Reduces long-term maintenance efforts by containing CSS styles in a single place.
Acceptable JavaScript widget file
...
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'})
...Copy
Unacceptable JavaScript file
this.element.on('click', function() {
if ($(this).is(':visible')) {
$(this).css({ visibility: 'hidden' });
} else {
$(this).css({ visibility: 'visible' });
}
});Copy
You must not use inline CSS styles inside HTML tags
- Improves style extensibility allowing engineers to overload styles easier by toggling classes.
- Enforces clean, strict separation between visual presentation and markup.
- Enables frontend teams quickly and easily clean up old styles.
Acceptable PHTML template
<div class="no-display"> ... </div>Copy
Unacceptable PHTML template
<div style="display: none;"> ... </div>Copy
Business logic and JavaScript
Business logic must rely on only the form, form element name attributes, or data attributes
- Enforces clean, strict separation between visual and business logic layers.
- Allows frontend and backend teams to work independently.
- Allows changing business logic without affecting styling and vice versa.
Acceptable PHTML template
<div data-action="delete" data-mage-init="{myWidget: [option1: 'string']}"></div>
<div data-role="tooltip">More details</div>Copy
Acceptable JavaScript file
options {
deleteAction: '[data-action="delete"]',
tooltip: '[data-role="tooltip]'
}
...
this.element.find(this.options.deleteAction).on( ... );
this.element.on('click', this.options.deleteAction , function() { ... });
...
// Globally initialized widgets
$( this.options.tooltip).tooltip(); // Globally for ALL tooltip elements
...Copy
Unacceptable PHTML file
<div id="my-widget"></div>Copy
Unacceptable JavaScript file
$('#my-widget').doSomething();
$('.parent').on('click', '.button', function() { ... });
$('form').validate();
$('[role="menu"]').navigation();Copy
You must assign HTML helper classes in JavaScript to modify presentation layer.
HTML helper class names added in JavaScript REQUIRE underscore symbol (“_”) at the beginning and must be written in lowercase.
Acceptable
<div class="tab-element _active">Content</div>
<div class="sales-transactions _open">Content</div>
<div class="billing-agreement _expanded">Content</div>
<div class="sales-report _hidden">Content</div>Copy
Unacceptable
<div class="tab-element active">Content</div>
<div class="sales-transactions open">Content</div>
<div class="billing-agreement expanded">Content</div>
<div class="sales-report hidden">Content</div>Copy
You must not select DOM elements based on HTML structure
- Allows frontend teams to modify markup and themes without affecting business logic.
Acceptable JavaScript file
this.element.find('[data-action="edit"]');
this.elements.closest('[data-container]');Copy
Unacceptable JavaScript file
this.element.children().children().html('hello world');
this.element.parent().find('[data-action="edit"]').data('entity_id');Copy
You must use jQuery templates to insert recurring markup into DOM structure
- Reinstates emphasis on jQuery templates. For more information, see JavaScript Coding Best Practices.
- Reduces long-term maintenance efforts by having markup code stored in one place.
- Simplifies frontend debugging efforts.
You must not hard-code inline JavaScript in PHP classes
- Reduces long term maintenance by having frontend business logic stored in one place.
- Reduces the number of files to be modified.
Acceptable PHP file
...
public function getSelectorOptions()
{
return $selectorOptions;
}
...Copy
Acceptable PHTML template
...
<div data-mage-init="{treeSuggest: [<?php echo $this->getSelectorOptions(); ?>]}"></div>
...Copy
or
Acceptable PHTML template
...
<div data-role="treeSuggest"></div>
<script type="text/x-magento-init">
{
"[data-role='treeSuggest']": {
"treeSuggest": <?php echo $this->getSelectorOptions(); ?>
}
}
</script>
...Copy
Unacceptable PHP file
...
public function getAfterElementHtml()
{
return <<<HTML
<script>
jQuery('#{$htmlId}-suggest').treeSuggest({$selectorOptions});
</script>
...Copy
Unacceptable PHTML template
<?php echo $this->getAfterElementHtml(); ?>Copy
PHTML templates and PHP files
You must not hard-code inline CSS styles in PHP classes
- Reduces long-term maintenance efforts by having styles stored in one place.
- Simplifies debugging and reduces number of files to be modified.
- Makes styles more extensible and easier to override when needed.
Acceptable PHP file
...
$fieldset->addField('new_category_parent', 'text', array(
'label' => Mage::helper('Mage_Catalog_Helper_Data')->__('Parent Category'),
'title' => Mage::helper('Mage_Catalog_Helper_Data')->__('Parent Category'),
'required' => true,
'class' => 'parent category',
));
...Copy
Unacceptable PHP file
...
$fieldset->addField('new_category_parent', 'text', array(
'label' => Mage::helper('Mage_Catalog_Helper_Data')->__('Parent Category'),
'title' => Mage::helper('Mage_Catalog_Helper_Data')->__('Parent Category'),
'required' => true,
'style' => 'border: 1px solid #ccc;',
));
...Copy
You must not hard-code inline JavaScript in PHP classes
- Reduces long term maintenance by having frontend business logic stored in one place.
- Reduces the number of files to be modified.
Acceptable PHP file
...
public function getSelectorOptions()
{
return $selectorOptions;
}
...Copy
Acceptable PHTML template
...
<div data-mage-init="{treeSuggest: [<?php echo $this->getSelectorOptions(); ?>]}"></div>
...Copy
Unacceptable PHP file
...
public function getAfterElementHtml()
{
return <<<HTML
<script>
jQuery('#{$htmlId}-suggest').treeSuggest({$selectorOptions});
</script>
...Copy
Unacceptable PHTML template
<?php echo $this->getAfterElementHtml(); ?>Copy
You must not hard-code HTML markup (used in the <body> tag) in PHP classes
- Reduces long-term maintenance efforts by having markup stored in one place.
- Reduces the number of files to be modified.
Acceptable PHP file
public function getAttributeName($element)
{
return ($element->getExtType() === 'multiple') ? $element->getId() . '_checkbox' : NULL;
}
public function getAttributeId($element)
{
return $element->getId();
}
Copy
Acceptable PHTML template
<span class="attribute-change-checkbox">
<label>
<input type="checkbox"
<?php echo ($this->getAttributeName($element)) ? ' name="' . $this->getAttributeName($element) . '"' : NULL; ?>
data-mage-init="{customToggleWidget: [elementSelector: "input[name='someCustomName']"]}" />
<?php echo Mage::helper('Mage_Catalog_Helper_Data')->__('Change'); ?>
</label>
</span>
<!-- jQuery.hide() code can be either located in the widget itself OR can ask PHP Block class whether or not 'weight_and_type_switcher' should be visible. Based on this condition CSS can be applied to hide/show those elements. -->Copy
Unacceptable PHP file
...
public function getCheckbox($elementName){
$elementNameTag = $this->getAttributeName($elementName) ? 'name="' . $this->getAttributeName($elementName) . '"' : NULL;
$tpl = "<input type=\"checkbox\" {$elementNameTag} data-mage-init=\"{customToggleWidget: [elementSelector: \"input[name='someCustomName']\"]}\" />";
return $tpl;
}
...Copy
Unacceptable PHTML template
<span class="attribute-change-checkbox">
<label>
<?php echo $this->getCheckbox($element)?>
<?php echo Mage::helper('Mage_Catalog_Helper_Data')->__('Change'); ?>
</label>
</span>
<!-- jQuery.hide() code can be either located in the widget itself OR can ask PHP Block class whether or not 'weight_and_type_switcher' should be visible. Based on this condition CSS can be applied to hide/show those elements. -->Copy