Programming Specification HTML Section

Last Update:2016-08-24 Source: Internet

Author: User

Tags css validator

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

No matter how many people are involved in the same project, make sure that each line of code is written as if it were the same person.

HTML part Syntax

For the definition of a property, make sure to use double quotes and never use single quotes.
Adding a standard mode declaration to the first line of each HTML page ensures a consistent representation in every browser.

<!DOCTYPE html>

Language properties

According to the HTML5 specification:
It is strongly recommended that you specify the lang attribute for the HTML root element to set the correct language for the document. This will help the speech synthesis tool determine the pronunciation it should use, and help the translation tool determine the rules it should follow when translating.

 lang="zh-CN">  <!-- ... -->

IE compatibility mode

IE supports the use of specific tags to determine which version of IE should be used to draw the current page. Unless there is a strong special need, it is best to set it to edge mode, which informs IE to use the latest mode it supports.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Character encoding

By explicitly declaring character encodings, you can ensure that your browser is quick and easy to determine how the page content is rendered. The advantage of this is that you can avoid using character entity tags (character entity) in HTML, which is all consistent with the document encoding (UTF-8 encoding is generally used).

<meta charset="UTF-8">

Introducing CSS and JavaScript files

According to the HTML5 specification, it is generally not necessary to specify the type attribute when introducing CSS and JavaScript files, because Text/css and text/javascript are their default values, respectively.

<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style> /* ... */</style><!-- JavaScript --><script src="code-guide.js"></script>

Attribute Order

HTML attributes should be arranged in the order given below to ensure readability of the code.

Class
ID, name
data-
SRC, for, type, href
Title, Alt
aria-, role

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

Boolean (Boolean) Type property

A Boolean property can be declared without assigning a value. The XHTML specification requires that it be assigned a value, but the HTML5 specification does not.

The Boolean attribute of the element is true if it has a value, or false if there is no value.

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

Reduce the number of labels

When writing HTML code, try to avoid unnecessary parent elements. Many times, this requires iterative and refactoring to implement.

<!-- Not so great --><span class="avatar">  src="..."></span><!-- Better --> class="avatar" src="...">

CSS syntax

When grouping selectors, separate selectors are placed on a single line.
For readability of the code, add a space before the left curly brace of each declaration block.
The closing curly brackets of the declaration block should be taken separately.
After each declaration statement, insert a space.
For a more accurate error report, each statement should be exclusive to one line.
All declaration statements should end with a semicolon. The semicolon after the last declaration statement is optional, but if you omit the semicolon, your code may be more prone to errors.
For comma-separated attribute values, you should insert a space after each comma (for example, Box-shadow).
Hexadecimal values should all be lowercase, for example, #fff. When you scan a document, lowercase characters are easy to distinguish because their form is easier to distinguish.
Try to use shorthand hexadecimal values, for example, #fff instead of #ffffff.
Add double quotes for the attributes in the selector, for example, input[type= "text"].
Avoid specifying units for 0 values, for example, with margin:0; instead of margin:0px;.

/* Bad CSS */. Selector,. Selector-secondary,. selector[Type=text]{Padding15px;Margin0px0px15px;Background-color:RGBA (0,0,0,0.5);Box-shadow:0px1px2px#CCC,Inset01px0#FFFFFF}/* Good CSS */. Selector,. selector-secondary,. selector[type="text"] {  padding: 15px; margin-bottom: 15px; Background-color: rgba (0,0,0,. 5); Box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;}

Declaration Order

The related attribute declarations should be grouped into groups and arranged in the following order:
1. Positioning

Box model
Typographic
Visual

Because positioning (positioning) removes elements from the normal flow of documents and also overrides the box model-related styles, it is ranked first. The box model is ranked second because it determines the size and position of the component.
Other properties only affect the interior of the component (inside) or do not affect the first two sets of properties, so it is followed.

. declaration-order{/* Positioning */PositionAbsolute;Top0;Right0;Bottom0;Left0;Z-index:100;/* Box-model */DisplayBlock;FloatRight;Width100px;Height100px;/* Typography */font: normal 13px  "Helvetica Neue", sans-serifline-height: 1.5color:  #333 text-align: center/* Visual */background-color:  #f5f5f5 border: 1px solid  #e5e5e5 border-radius: 3px/* Misc */opacity: 1;}

Location of media query

Place media queries near the rules that are as relevant as possible. Don't pack them in a single style file or at the bottom of your document. If you separate them, you will only be forgotten in the future. A typical example is given below.

.element { ... }.element-avatar { ... }.element-selected { ... }@media (min-width: 480px) {  .element { ...}  .element-avatar { ... }  .element-selected { ... }}

Single-line rule declaration

For a style that contains only one declaration, it is recommended that you put the statement on the same line for readability and for quick editing. For styles with multiple declarations, you should also divide the declaration into multiple lines.

The key factor in doing this is for error detection-for example, the CSS validator indicates that there is a syntax error in line 183. If it is a single-line statement, you will not ignore the error, and if it is a single statement, you will have to carefully analyze to avoid missing the error.

/* Single declarations on one line */. span1{Width60px;}. span2{Width140px;}. span3{Width220px;}/* Multiple declarations, one per line */. Sprite{DisplayInline-block;width: 16pxheight: 15pxbackground-image: url (.. /img/sprite.png) ;} .icon {background-position: 0 0}.icon-home {background-position: 0 -20px}.icon-account {background-position: 0 -40px               /span>

Attribute declarations in shorthand form

In cases where all values need to be displayed, limit the use of shorthand attribute declarations as much as possible. The common misuse of shorthand attribute declarations is as follows:

Padding
Margin
Font
Background
Border
Border-radius

/* Bad Example */. Element{Margin0010px;BackgroundRed;Backgroundurl ( "image.jpg" border-radius: 3px 3px 0 0< span class= "KW"; }/* good example */.element {10pxbackground-color: redbackground-image: url ( "image.jpg" border-top-left-radius: 3pxborder-top-right-radius: 3px;}

Class naming

Only lowercase characters and dashes (Dashe) (not underscores, nor hump naming) can appear in class names. Dashes should be used to name the relevant class (similar to namespaces) (for example,. btn and. Btn-danger).
Avoid excessive arbitrary shorthand: btn represents a button, but. s cannot express any meaning.
The class name should be as short as possible and have a clear meaning.
Use a meaningful name. Use an organized or purposeful name, and do not use the name of the representation (presentational).
Prefix the new class based on the closest parent class or base class.
Use the. js-* class to identify the behavior (as opposed to the style), and do not include these classes in the CSS file.

/* Bad example */.t { ... }.red { ... }.header { ... }/* Good example */.tweet { ... }.important { ... }.tweet-header { ... }

Code Organization

Organizes code snippets in units of components.
Develop a consistent annotation specification.
Separate the code into blocks with consistent whitespace characters, which facilitates scanning large documents.
If more than one CSS file is used, it is separated by component rather than page because the page is reorganized and the component is only moved.

Programming Specification HTML Section

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More