How to write flexible, stable, high-quality HTML and CSS code

This time I will bring you how to write flexible, stable, high-quality HTML and css code, and how to write flexible, stable, high-quality HTML and css code. What are the precautions?, the following is the actual combat Let’s take a look at the case.

Golden Rule
Always follow the same set of coding standards. No matter how many people participate in the same project, be sure to make sure that every line of code looks like it was written by the same person.

1. Grammar:
1. Use two spaces to replace the tab character (tab);
2. Nested elements should be indented once (two spaces);
3. For the definition of attributes, Make sure to use all double quotes, never single quotes;
4. Do not add a slash at the end of a self-closing element - HTML5 specification (https://dev.w3.org/html5/spec-author-view/ syntax.html#syntax-start-tag) clearly states that this is optional;
5. Do not omit the optional closing tag;
6. Add standards mode to the first line of each HTML page Statement, this can ensure that there is one display in each browser;

2. Language attribute:
According to the HTML5 specification, it is recommended to specify the lang attribute for the HTML root element to set the correct language for the text .This will help the speech synthesis tool determine the pronunciation it should use, help the translation tool determine the rules that should be followed when translating, etc. lang attribute list: http://www.sitepoint.com/web-foundations/iso -2-letter-language-codes/

3. IE compatibility mode:
IE supports using specific tags to determine the IE version that the current page of the receipt should use. Unless there is a strong requirement, it is best It is set to edge mode, which controls IE to adopt the latest mode it supports.

4. Character encoding:
By declaring the character encoding, it can ensure that the browser can quickly and easily determine the rendering of the page content Method. This can avoid using character entity tags in HTML, so that everything is consistent with the document encoding.

5. Introduce css and JavaScript files:
According to the HTML5 specification, it is common to introduce css and JavaScript files. There is no need to specify the type attribute, because text/css and text/javascript are their default values ​​respectively.

6. Practicality is king:
Try to follow HTML standards and semantics, but do not sacrifice practicality. Cost. Try to use the fewest tags and maintain the minimum complexity at any time.

7. Attribute order:
HTML attributes should be arranged in the following order to ensure the readability of the code:
1.class
2.id,name　　
3.data-*　　
4.src,for,type,href　　　
5.title,alt　　
6.Aria,role　
class is used to mark highly reusable components, so it should be ranked first.

8. Reduce the number of tags
When writing HTML code, try to avoid redundant parent elements. Many times, this requires Iteration and reconstruction to achieve.

9. Tags generated by JavaScript
Tags generated by JavaScript make the content difficult to find and edit, and limit performance. Avoid it as much as possible.

10. CSS syntax:
1. Use two spaces to replace the tab character (tab);
2. When grouping selectors, place individual selectors separately One line; 3. For the readability of the code, add a space between the left curly brace of each declaration block;
4. The right curly brace of the declaration block should be on a separate line;
5. Each statement A space should be inserted after the declaration statement;
6. In order to obtain more accurate error reporting, each declaration should be on its own line;
7. All declaration statements should end with a semicolon, and the last declaration statement The following semicolon is optional, but if you omit it, the code may be easier to read;
8. For comma-separated attribute values, a space should be inserted after each comma;
9. For attribute values ​​or color parameters, omit the 0 in front of decimals less than 1 (for example, .5 instead of 0.5);
10. Hexadecimal values ​​should be all lowercase, for example: #fff, try to use the abbreviated hexadecimal form System value, for example, use #fff instead of #ffffff;
11. Add double quotes to the selected attributes, such as input[type="text"]; :0 instead of margin:0px.

11. Declaration order:

Related attribute declarations should be grouped into a group and arranged in the following order:　

1. positioning(position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 100;);

2.box model(display: block; float: left; width: 100px; height: 100px;);

3.typographic(font: normal 13px "Microsoft YaHei"; line-height: 1.5em; color: #333; text-align:center;);
4.visual(background : yellow; border: 1px solid #c00; border-radius: 3px; opacity: 1; );
　
Due to positioning, elements can be removed from the normal document flow and can also override the box model (box model) related styles, so it is ranked first. The box model is ranked second, because it determines the size and position of the component. Other attribute knowledge affects the internal (inside) of the component or does not affect the first two sets of attributes. Therefore, it ranks behind.

12. Do not use @import
Compared with tags, the @import command is much slower. It not only increases the number of additional requests, but also causes unpredictable problems. There are several alternatives:
1. Use multiple elements;
2. Convert multiple css files into one file through a css preprocessor similar to sass or less;
3. Provide css files through rails, jekyll or other systems Merge function.

13. Position of media query
Place media queries as close to relevant rules as possible. Do not package them in a single style file or place them in the document Bottom.

14. Prefixed attributes:
When using the prefixed attributes of a specific manufacturer, the value of each attribute is aligned in the vertical direction through locking, which is more convenient. Line editing

15. Single-line rule declaration:
For the style whose value contains one declaration, for the sake of readability and quick editing, it is recommended to put the statement on the same line. For the style with multiple declarations style, or should the declaration be divided into multiple lines. The key factor in doing this is for error detection. For example, the css validator has a syntax error on line 180. If it is a single line and a single statement, you will not This error will be ignored. If there are multiple declarations on a single line, you need to analyze carefully to avoid missing errors.

16. Nesting in Less and Sass
Avoid unnecessary nesting. This is because although you can use nesting, it does not mean that you should use nesting. Only when the style must be restricted to the parent element (that is, descendant selector), and there are multiple nesting elements that need to be nested Nesting can only be used by engineers who have nested elements.

17. Note:
Code is written and maintained by people. Please make sure your code is self-describing, well-commented, and easy for others to understand. OK Code comments can convey context and purpose of the code;
Do not simply restate component or class names;
For longer comments, be sure to write complete sentences, and for general comments, you can write introductory phrases.

18. Class naming
Only small characters and dashes can appear in class names (not underline or camel case). Dashes should be used for naming related classes (similar to Namespace, such as .btn and .btn-danger)
Avoid overly arbitrary abbreviations. .btn represents button, but .s cannot express any meaning;
Class names should be as short as possible and have clear meaning;
Use meaningful names, use organized or purposeful names, do not use expressive names;
Prefix new classes based on the most recent class or basic class;
Use .js-* class to Identify behaviors (as opposed to styles), and do not include these classes into css files;
You can also refer to the specifications listed above when naming sass and less variables.

19. Selector
Use class for common elements, which is beneficial to the optimization of rendering performance;
For frequently occurring components, avoid using attribute selector (for example: [class^="···" ]), the performance of the browser will be affected by these factors;
The selector should be as short as possible, and try to limit the number of elements that make up the selector. It is recommended not to exceed 3;
Only use it when necessary class is limited to the nearest parent element.

20. Code organization:
Organize code segments in units of components;
Specify consistent comment specifications;
Use consistent whitespace characters to The code is separated into chunks, which facilitates scanning of larger documents;
If multiple css files are used, split them into components rather than pages, because pages will be reorganized and components will only be moved

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

In the responsive framework, how to deal with the automatic line wrapping of the table header

How to make the Table Display borders

#How should HTML tables be laid out

The above is the detailed content of How to write flexible, stable, high-quality HTML and CSS code. For more information, please follow other related articles on the PHP Chinese website!