Code authoring specifications for HTML and CSS

In the eyes of many developers, coding HTML is simply very easy, and writing CSS is not only simple and sometimes cumbersome-the same properties have to be kept to keep writing. For this, I have also been confused and encountered a lot of problems, but with the writing & reading of the front-end code gradually increased, slowly realized that "can write" and "will write" between still have a certain distance. Many times, you can "do this", but that doesn't mean "you should" do it.

Writing HTML and CSS properly can make your code look more professional. Even a few lines of code can be written with character. Well, with the spirit of craftsman to write code, you will be in the bitter force of the merry.

The following tidy up from others that read to learn, at the same time their own recognition of trivial points, for practical practice.

HTML1, Standard mode declaration

The first line of the HTML page, adding a declaration of standard mode. eg. <! DOCTYPE html>
Cause: You can ensure consistent performance in each browser.

2. Character encoding

To make a clear statement. Eg.<meta charset= "UTF-8" >
Reason: Explicit declaration of character encoding ensures that the browser is quick & easy to determine which way to render the page content.

3. When introducing CSS and JavaScript files

You do not need to specify the Type property.
Reason: According to HTML5 specification, "Text/css" and "Text/javascript" are the default values respectively
Eg.<link rel= "stylesheet" href= "Xxx.css" >
<script src= "Xxx.js" ></script>

4. The writing order of HTML attributes

The recommendations are arranged in the following order, which is good readability.

(1) Class:class is used to identify highly reusable components, so the first line
(2) ID, Name:id is used to identify specific components, so the second row.
(3) data-*
(4) SRC, for, type, href
(5) title, alt
(6) aria-*, role
eg.
<a class= "xxx" id= "xxx" data-index= "x" href= "#" >link</a>

<input class= "xxx" type= "text" >

5. Boolean attribute

A Boolean property can be declared without assigning a value.
Reason: The XHTML specification requires an assignment, but the HTML5 specification is not required. View more information
eg.
<input type= "Text" disabled>
<option value= "1" selected>1</option>
<input type= "checkbox" value= "1" checked>

6. Other details

(1) the self-closing element does not add a slash at the tail . See HTML specification. Eg.. Reference HTML5 Specification

(2) A pair of labels, the end tag must have .

(3) when defining attributes, it is recommended to use double quotation marks instead of single quotes.

(4) Minimize the number of labels : always try to use the fewest labels & keep the minimum complexity.

Minimize the number of labels and avoid unnecessary parent elements as much as possible.
Many times, this requires iterative and refactoring to implement. So, once you've written the "implement" code, you might as well read through your own code (often this time, you can find a lot of points to optimize.) Well, because the focus is different: the former weighs on the function, the latter is refactoring. ）

(5) Try not to generate tags with JS

Cause: This makes the content difficult to find difficult to edit, and degrades performance.

7, other: to further research

Because I usually do not encounter a similar scene, so it is not good to judge ...

(1) It is strongly recommended that you specify the lang attribute for the HTML root element. Lang attribute, can refer to specification

Reason: Setting the correct language for the document helps the speech synthesis tool determine how to pronounce it, and helps the translation tool determine what rules to use and so on.
For knowledge about the lang attribute, click View Specifications.

(2) IE compatibility mode

IE supports specific <meta> to determine which version of IE should be used to draw the current page.
It is recommended to set edge mode, which informs IE to use the latest mode it supports. There's an article on stack overflow about this.

Css1, have not noticed the(1) for comma-separated attribute values: Each comma should be inserted with a space. eg. Background-image:url (...), url (...); (2) between multiple attributes within a value: Do not add a space (3) attribute in selector: Both quotation marks are recommended, for consistency (and for other reasons) 2, so to do-but ambiguous (1) avoid specifying units for 0: margin:0 You can (2) a value less than 1, omit 0 before the decimal: that is,-.5px instead of -0.5px,.5 instead of 0.5 (3) hexadecimal value-all lowercase: When scanning a document, lowercase characters are easy to distinguish 3, usually follow the

(1) Each statement-preferably solo: more accurate error Reporting
(2) If a selector is grouped, each individual row
(3) Space: Before the left curly brace of the declaration; Before the property value
(4) After all statements are written, semicolons < Although the last one declares a semicolon after the statement, is optional >
(5) 16 binary abbreviations as short as possible: eg. #fff, not #ffffff.

4. CSS Declaration Order

The related attribute declarations are grouped in the following order:
(1) Positioning positioning: The element can be removed from the normal document flow, and the relevant style of the box model can be overwritten, so the first.
(2) box model: Determines the size and position of the component, so the second bit.
(3) Typesetting class typographic
(4) Visual category Visual

5. The shorthand attribute should limit the use of shorthand attribute declarations in cases where all values need to be set to be displayed.
Common abuses:
Padding, margin, font, background, border, Border-radius "?? Isn't that what I'm always shorthand for?"In most cases, we don't need to specify all the values for the shorthand property declaration. For example, the heading element of HTML only needs to set the value of the top, bottom margin (margin), so if necessary, just overwrite the two values. Excessive use of shorthand attribute declarations can lead to code clutter and unnecessary overwriting of property values causing unintended side effects.

6. Class naming(1) can only appear: lowercase characters and twists and turns-(dashes should be used for related class naming, similar to namespaces) instead of underscores nor humps
eg. . btn. Btn-danger
(2) Avoid too many abbreviations, such as. btn represents a button, but. S is nothing.
(3) class should be as short as possible & meaning clear
(4) to have meaning: to have an organization + purposeful, do not use the form of expression
(5) class prefix: Based on the nearest parent or base as the new class prefix
(6) Using js-class: To identify behavior, relative to the style: and not applied to the CSS (the same: pure CSS style, also try not to use for scripting-inconvenient to maintain) 7, CSS Selectors (1) for common elements, use class: For the optimization of rendering performance
(2) Frequently occurring components, avoiding the use of attribute selectors: affecting browser performance "What is the performance of each selector? 】
(3) as short as possible: no more than 3 recommended
(4) The class is restricted to the nearest parent (and descendant selectors) "selectors are not as long as possible" 8, Code Organization (1) tocomponent organizes code snippets for units。
(2) If more than one CSS file is used, it is split as a component rather than a page, becausethe page will be reorganized and the component will only be moved。 【? The page will be reorganized and the component will only be moved】
(3) Develop a consistent annotation specification.
(4) separate the code into blocks using a consistent whitespace character, which facilitates scanning of larger documents. 9, code Comments (1) code to: Self-description (hey, this time you can comment less)
(2) Good note: Communicate context, code purpose (not very pale to reiterate some nonsense)
(3) can be English comments (long write complete sentences, short can write phrases) 10, other because of less use, so ... Just know, but haven't used the scene yet.

(1) Do not use @import
Because: @import instructions are much slower than <link> tags (not only increase the number of requests, but also cause unforeseen problems)
Alternative methods:
A. Using multiple <link>
B. Compiling multiple CSS files into a single file by using a CSS preprocessor similar to sass or less
C. Merging a CSS file

(2) The location of media query "mobile development will be more"
Recommendation: To be placed near the relevant rules as far as possible
Do not pack them in a single style file or at the bottom of a document

(3) The nesting "in less and sass" means ... Never used. "
Avoid unnecessary nesting: you can use, but it does not mean that this should be used
When to use nesting: limit within a parent element (that is, descendant selectors) + multiple required nesting

Reference and extended Reading

The "1" Code specification by @mdo "2" article on shorthand properties is useful for users who are less familiar with the shorthand attribute declaration and its behavior. "3" HTML5 Specification "4" IE compatibility mode <meta http-equiv= "x-ua-compatible" content= "Ie=edge" > "5" HTML5 specification: HTML, head, title, base, Link, Meta, style "6" HTML5 Specification: Boolean property