Front-end specification 2-CSS specification_html/css_WEB-ITnose

CSS specification

Indentation

Use Tab indentation (equivalent to four spaces )

There must be a space between the selector and {, Parameter 1

The attribute name and the following : are not allowed to contain spaces, and there must be a space between : and the attribute value.

Example

When the list attribute value is in a single line, it must be followed by a space.

For example:

Example:

Selector

When selecting with a collection and there are multiple selectors, it is recommended to declare them separately Write on one line (easy to maintain)

Example

>, , - Leave a space on both sides of the selector

Example

The value in the attribute selector must be surrounded by double quotes

Example

 

Attribute definitions of the same class are written on the same line (see -1)

Example

The attribute definition must end with a semicolon (especially the last one)

If not necessary, it must not Add type selectors to qualify the id and class selectors.

Note: It has a certain impact on performance and maintenance

Example

performance. (Compare lines 891 and 895 in the figure below)

2. It is recommended that the nesting level of the selector should not be greater than 3 levels, and the limiting conditions at the rear should be as precise as possible. (Reference 1)

3. Avoid using some attribute selectors (for example, [class^="..."]) in frequently occurring components. Browser performance can be affected by these conditions.

4. Only use descendant selectors when necessary

Examples of 1 and 2 above

Attribute abbreviation

Where possible, use abbreviations.

If you need to rewrite attributes, try to avoid unnecessary attribute abbreviations.

Example should avoid the following situations:

margin:3px 5px;

margin-left:8px; F: Declaration order)

Formatting Model related properties include: position / top / right / bottom / left / float / display / overflow, etc.

Box Model related properties include: border / margin / padding / width / height, etc.

Typographic related properties include: font / line-height / text-align / word-wrap, etc.

Visual related properties include: background / color / transition / list-style etc.

clear floats

!important

Try not to use !important in a third-party environment (For example, if you define a module and use an online text editor in the module, you can try to change the attribute definition)

z-index

There is nothing too complicated to use at the moment, so use this attribute Just mark

Value and unit

Value (parameter 1)

When it is between 0 and 1 When it is a decimal, should the 0 in the integer part be omitted?

Example: Opacity: .8;

But the reason for the zero before zero numerals is found, so I still write zero

url () here for the time being

The path in url() is not quoted

Example: background: url(bg.png);

The protocol name that can be omitted without using an absolute path

                                                                                                                                                                                                   

Length

Omitting zero units

                                                                                                                                                                                                                                                         RGB color values ​​

must

use the hexadecimal notation #RRGGBB.

Use rgba() for color information values ​​with alpha (transparent).

Use abbreviations when abbreviations are available

Color names are not allowed, rgb()

Ensure that hexadecimal mark symbols are in the same case. (Capital letters recommended)

2D position (background-position)

The values ​​in both directions of background-position must be given.

Because the default is 0% 0%, but only the value in one direction is given, the other direction will default to the center attribute value.

Text

The font-family attribute should be in English

Example: font-family:"Microfoft YaHei";

font -Size attribute

It must not be less than 12px Reason: Windows text display is poor, it is not easy to identify

FONT-weight

The attribute value is represented by numbers. (100~900)

Actually, there are only two gears, 400 and 700, which are equal to normal and bold respectively.

There are already browsers supporting the 600 attribute value. (Refer to 1: Font Talk)

Line-height should use relative values ​​because it will be calculated based on the font-size value.

Others

Attribute prefix

Compatibility writing attributes are paired with long to short colons.

Examples

🎜>