Frontend specifications: 2-CSS specifications; 2-CSS specifications

Source: Internet
Author: User

Frontend specifications: 2-CSS specifications; 2-CSS specifications

CSS Specification
IndentUse Tab indent (equivalent to four spaces) the selector and {must contain spaces. If the attribute name of parameter 1 is the same as that of parameter 1, spaces are not allowed. When the list property value is in a single row, it must be followed by a space. For example, for ultra-long Styles, it is recommended to group the styles by logic when the style is worth spaces or when it is followed by line breaks. Example:SelectorWhen multiple selectors are selected using the set method, it is recommended that the Declaration be written in a single row (for maintenance purposes) for example, a space is left on both sides of the, +, and-selector. For example, the value in the attribute selector must be enclosed by double quotation marks. For example, the attribute Definition of the same class is written in the same row (parameter-1 ).
After an attribute is defined, it must end with a semicolon (especially the last one). If this is not necessary, you must not add a type selector for the id or class selector. Note: Performance and maintenance have certain impact. Example 1. Use classes instead of general element labels to optimize rendering performance. (Comparison between rows 891st and 895) 2. It is recommended that the nested hierarchy of the selector should be no more than 3 levels, and the conditions for the position to be back should be as accurate as possible. (Parameter 1) 3. Avoid using attribute selectors in frequently-occurring components (for example, [class ^ = "..."]). Browser performance may be affected by these situations. 4. If necessary, use the example attributes 1 and 2 of the descendant selector for abbreviations. If you need to rewrite attributes, try to avoid unnecessary attribute abbreviations. For example, avoid the following situations: margin: 3px 5px; margin-left: 8px; Attribute writing order (parameter 1, parameter 2 ctrl + F: Declaration Order)

  • Formatting Model attributes include position/top/right/bottom/left/float/display/overflow.
  • Box Model attributes include border, margin, padding, width, and height.
  • Typographic attributes include: font/line-height/text-align/word-wrap.
  • Visual attributes include: background/color/transition/list-style.
Clear floating! Try not to use important! Important in a third-party environment (such as defining a module, using an online text editor in the module, you can try to change the attribute definition) z-index is not too complex for the moment, when using this attribute, you can mark it. Value and Unit Value (parameter 1)When the decimal point is between 0 and 1, do you omit the value 0 of the integer part? For example, opacity:. 8, but no reason is found to omit the first zero decimal point. Url ()The path in the url () is not enclosed by quotation marks (for example, background: url(bg.png); The Protocol name that can be omitted without absolute paths (for example, background: url (// baidu.com/img/bg.png ); // indicates http: // protocol. Some documents indicate that the request is sent twice in IE. LengthThe unit of the omitted value is padding: 0 8px; ColorRGB color value RequiredUse the hexadecimal notation # RRGGBB. The color information value with alpha (transparent) uses rgba (). Color names cannot be used when abbreviations can be used. rgb () ensures that hexadecimal notation is case-insensitive. (Uppercase is recommended) 2D position (background-position)The value of background-position must be given in two directions. Because the default value is 0% 0%, but only one direction value is given, the other direction will default to the center attribute value. TextThe font-family attribute should be in English. For example: font-family: "Microfoft YaHei"; font-size attribute must not be smaller than 12px. Reason: windows text display is poor, it is hard to recognize the font-weight attribute value in numbers. (100 ~ 900) Actually, only 400 and 700 are equal to normal and bold. Existing browsers support 600 attribute values. (Parameter 1: font) line-height should use the relative value because it is calculated based on the font-size value. Others Attribute prefixThe Compatibility writing attribute is extended to a short colon. Example

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.