Common Html development habits (2): html development habits

Common Html development habits (2): html development habits

Common Html development habits:

Introduce CSS and JS

According to HTML5 specifications, you do not need to specify the type when introducing CSS and JS, because text/css and text/javascript are their default values.

HTML5 standard link
• Use link
• Use style
• Use script

<!-- External CSS --><link rel="stylesheet" href="code_guide.css"><!-- In-document CSS --><style>    ...</style><!-- External JS --><script src="code_guide.js"></script><!-- In-document JS --><script>    ...</script>

Attribute order

Attributes should appear in a specific order to ensure ease of use;
• Class
• Id
• Name
• Data -*
• Src, for, type, href, value, max-length, max, min, pattern
• Placeholder, title, alt
• Aria-*, role
• Required, readonly, disabled

Class is designed for highly reusable components, so it should be in the first place;

Id is more specific and should be used as little as possible, so it is placed in the second place.

<a class="..." id="..." data-modal="toggle" href="#">Example link</a><input class="form-control" type="text">

Boolean attribute

A boolean attribute is an attribute that does not need to be declared. XHTML requires each attribute to declare a value, but HTML5 does not;

For more information, see WhatWG section on boolean attributes:

The existence of a boolean attribute indicates that the value is true, and the existence of a boolean attribute indicates that the value is false.

<input type="text" disabled><input type="checkbox" value="1" checked><select>    <option value="1" selected>1</option></select>

JS generate tags

Generating tags in JS files makes the content more difficult to search, more difficult to edit, and worse performance. Avoid this situation as much as possible.

Reduce the number of labels

Avoid unnecessary parent nodes when writing HTML code;

Most of the time, You Need To iterate and refactor to make HTML less.

<!-- Not well --><span class="avatar">    </span><!-- Better -->

Previous Article: naming conventions for front-end development'
Next article: common habits of Html development (1)

I hope to help beginners and take notes at the same time. Thank you!
More follow Fu Yi Fang technology blog: http://blog.csdn.net/fuyifang
Or scan the QR code on your mobile phone to view more blog posts:

Copyright statement: This article is the original author of the blog, not allowed by the blog can not be reproduced, more attention to pay the technical blog: http://blog.csdn.net/fuyifang