How can a junior front-end write high-quality code?

一HTML
1. The declaration of DOCTYPE is basically the world of H5 now, and it can be generated directly by shortcut keys.
2. Character set declaration, usually , remember to escape symbol characters such as spaces -  &-amp;
3. Correct abbreviation Now, the code in each FamilyMart bucket has been configured with indentation. You can use it directly without much need
4.css and js emphasize the use of external links. Now I feel that componentized things are written in each It can be done in the component. Using precompiled languages ​​such as less can more easily achieve effects such as skin changes
5. Correct tag nesting
6. Delete unnecessary tags. For example,

semantically, the outer div can be deleted, because div and ul are both block-level elements
7. Set it when making the page Area, after the entire site is laid out, if you want to adjust the small area block, directly define a separate class (ID is also acceptable) in the body or the nearby large area block, and do the style processing
8. Omit the picture, The protocol portion (http:, https:) of the URL for styles, scripts, and other media files unless neither of these two is satisfied. For example,
9. Use two spaces for indentation (it does not have to be as unified as possible) to achieve Code formatting
10. Try to use lowercase for tag names, attributes, and attribute values
11. Reduce unnecessary spaces in the content of the element, and do not use spaces at the end of the content.
12. Add appropriate comments to describe the function
13. Add TODO to mark to-do items. Such as

• Apples
• Oranges

14.h5 mid laner Do not use closed form for labels, just write labels directly. For example,
do not write it as
; Multimedia elements such as images, videos, canvas animations, etc. ensure that other accessible content is provided. For example,
17. When referencing the style sheet, type defaults to text/css and can be omitted. When referencing a script, type specifies text/javascript by default, and
can be omitted. 18. Use double quotes for attribute values.
19. The published code must be compressed.

Two CSS
1. Use of reset. First, clarify its role, because the default attribute values ​​​​of each browser are different and compatibility needs to be considered. Do not use global reset because it is inefficient.
2. In the order of attributes, those that change the layout are written in front, such as display, margin, padding, position, and others are written in the back (can be arranged in alphabetical order)
3. Define meaningful id and class names, Short and clear, use connectors for multiple words
4. Try to define the id in a large block, and search for elements in the block, such as

...nMultiple content div> Search can be done with #content .title-color{color:red}
5. Use abbreviated attributes, such as font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; written as font: 100%/1.6 palatino, georgia, serif;
6. When the attribute value is 0, do not add the unit, such as padding: 0 15px;
7. When the value is between -1 and 1, 0 can be omitted. Such as font-size:.8em
8. Use hexadecimal for color values, such as color: #ebc instead of color: #eebbcc
9. End each style with a semicolon (;)
10 There should be a space between the selector and {}, and there should be a space between the attribute name and the attribute value (remember to format it when coding)
11. Use single quotes for the attribute value, and do not add quotes to the URI
12. Comment in sections, it is not necessary to comment on every style (unless it is easy to blur)
13. Make good use of inheritance, define the style on the parent element, and the child elements inherit the style. Attributes that can be inherited, such as starting with font-, starting with text-, line-height
14. When the representation does not exist, try to use display:none instead of visibility:hidden, because the former does not occupy memory for browser analysis and the latter does Create space in memory
15. Avoid using @import
16. The published code must be compressed

The above is the detailed content of How can a junior front-end write high-quality code?. For more information, please follow other related articles on the PHP Chinese website!