General convention


##General Conventions

Tags

    Self-closing tags, no need to close (for example:
  • img input br hr etc.);
    • Optional closing tag (closing tag), needs to be closed (for example:
  • </li> or </body> );
    • Reduce the number of tags as much as possible;
<img src="//img.w3cschool.cn/attachments/image/cimg/google.png" alt="Google">
<input type="text" name="title">
<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
  <img src="...">
</span>
<!-- Recommended -->
<img class="avatar" src="...">
Class and ID

    class should be named after function or content, not expression;
  • class and id should be named in lowercase letters and consist of multiple words When using, use dashes
  • - to separate them;
    • Use unique ids as Javascript hooks, and avoid creating classes without style information; 
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>

Attribute Order

HTML attributes should appear in a specific order to ensure readability.

  • id

  • class

  • ##name

  • data-xxx

  • src, for, type, href

  • title, alt

  • aria-xxx, role

    • <a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">
Quotation marks

attribute definition, use double quotation marks uniformly. 

<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

Nesting

a Nested divs are not allowedThis constraint is a semantic nesting constraint, and the constraints that are different from it are strict nesting constraints, such asa is not allowed to nest a.

Strict nesting constraints are not allowed in all browsers; as for semantic nesting constraints, most browsers will handle fault tolerance, and the generated document trees may be different from each other.

Semantic Nested Constraints

  • <li> is used for <ul> or <ol> Next;
  • <dd>, <dt> is used for <dl> ;
  • <thead>, <tbody>, <tfoot>, <tr> , <td> is used under <table>;

strict nesting constraints

    inline-Level elements can only contain text or other inline-Level elements;
  • <a>interactive elements cannot be nested<a> Block levels cannot be nested in , <button>, <select>, etc.;
  • <p> Elements <div>, <h1>~<h6>, <p>, <ul>/<ol> ;/<li>, <dl>/<dt>/<dd>, <form>, etc.
Boolean attributes

In the HTML5 specification, attributes such as

disabled, checked, selected do not need to set values. 

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

→