This is the 24th day of my participation in the August Text Challenge.More challenges in August

6. Values and units

6-1. Text content must be enclosed in double quotation marks

Example:

* / / * proposal
html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: "" ";
}

html[lang|="zh"] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: "" ";
}

/* Not recommended */
html[lang|=zh] q:before {
    font-family: 'Microsoft YaHei', sans-serif;
    content: ' ' ';
}

html[lang|=zh] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: ' ' ';
}
Copy the code

6-2. Omit the 0 part of the integer

When the value is a decimal between 0 and 1, you can omit the 0 part of the integer. Example:

* / / * proposal
.box {
    opacity:.8;
}

/* Not recommended */
.box {
    opacity: 0.8;
}
Copy the code

6-3. The path in the url() function can be unquoted

Example:

body {
    background: url(../images/background.png);
}
Copy the code

6-4. The protocol name can be omitted from the absolute path in the URL () function

Example:

body {
    background: url(//baidu.com/img/bg.png);
}
Copy the code

6-5. If the length is 0, omit the unit

Example:

* / / * proposal
body {
    margin: 0 5px;
}

/* Not recommended */
body {
    margin: 0px 5px;
}
Copy the code

6-6. Use abbreviations for color values

Example:

* / / * proposal
.success {
    color: #fff;
}

/* Not recommended */
.success {
    color: #ffffff;
}
Copy the code

6-7. Avoid using named color values

Example:

* / / * proposal
.text-success {
    color: #90ee90;
}

/* Not recommended */
.text-success {
    color: lightgreen;
Copy the code

7. Text formatting

7-1. The font size

Due to The Font rendering mechanism of Windows, text smaller than 12px looks very bad and is hard to read. Therefore, the font size of Chinese content displayed on Windows platform should not be less than 12px.

7-2. Font style

If you need to display Chinese content on Windows, do not use a font style other than Normal. Other platforms should also be used with caution. Since Chinese fonts do not have italic style implementation, all browsers will fallback to Obilique implementation (automatic fitting to italic), and the display effect is poor under small font size (especially under Windows, dot matrix font will be used under small font size), resulting in reading difficulties.

7-3 words

The font-weight attribute must be described numerically. CSS has a total of nine characters from 100 to 900, but is currently limited by the font quality and browser. In fact, it supports 400 and 700 characters, which are equivalent to the keywords Normal and bold respectively. The browser itself uses a series of heuristic rules to match the font’s Regular weight at <700 and Bold weight at >=700. Example:

* / / * proposal
h1 {
    font-weight: 700;
}

/* Not recommended */
h1 {
    font-weight: bold;
}
Copy the code

7-4. Line height

Line-height should be used as a numeric value when defining text paragraphs. Set line-height to a numeric value, and the browser will recalculate it based on the font size set for the current element. In a combination of text paragraphs with different sizes, a comfortable spacing between lines can be achieved, avoiding the need to set line-height for each font size. If line-height is used to control vertical center, it should be set to the same height as the container. Example:

.container {
    line-height: 1.5;
}
Copy the code

8. Transformations and animations

8-1. Specify transition-property when using transition

Example:

* / / * proposal
.box {
    transition: color 1s, border-color 1s;
}

/* Not recommended */
.box {
    transition: all 1s;
}
Copy the code

9. The response type

9-1.Media Queries cannot be choreographed separately and must be defined with the associated rules

Example:

* / / * proposal
/* header styles */
@media(...). {/* header styles */
}

/* main styles */
@media(...). {/* main styles */
}

/* footer styles */
@media(...). {/* footer styles */
}


/* Not recommended */
/* header styles */
/* main styles */
/* footer styles */
@media(...). {/* header styles */
    /* main styles */
    /* footer styles */
}
Copy the code

9-2.Media Query If you have more than one comma separated condition, place each condition on a separate line

Example:

@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) * /min-resolution: 2dppx),             /* The standard way */
(min-resolution: 192dpi) {           /* dppx fallback */
    /* Retina-specific stuff here */
}
Copy the code

Compatibility 10.

10-1. Attribute prefixes

Properties with private prefixes are arranged from long to short, aligned by colons, with standard properties at the end, for easy reading and multi-line editing within the editor. Example:

.box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
Copy the code

Other specification

11. Class and ID naming conventions

  • Use semantic and generic naming methods;
  • Use hyphens – as id and class name delimiters, not camel names and underscores;
  • Avoid too many selector nesting levels, as little as 3 levels;
  • Avoid using selectors in combination with class and ID.

Example:

* / / * proposal
.user-info{}

/* Not recommended */
.userInfo{}

.user_info{}
Copy the code

12. Not using @import

Compared to , @import is much slower, not only adding extra requests, but also causing unexpected problems. Alternatives:

  • Using multiple elements
  • Compile multiple CSS files into a single file with a CSS preprocessor like Sass or Less
  • Other CSS file merging tools

13. Style order of links

a:link -> a:visited ->a:hover -> a:active

conclusion

The above is my recent arrangement of some CSS coding specifications, basically covers the development of most of the situation, I believe you will be compared to their own coding, while thinking about the importance of standard coding, in the future development, write more elegant code, thank you.

Welcome to other articles

  • Internationalize your website with Vite2+Vue3 | August Update Challenge
  • Actual combat: The front-end interface request parameters are confused
  • Practice: Implement a Message component with Vue3
  • Actual combat: Vue3 Image components, incidentally support lazy loading
  • What updates does One Piece, vue.js 3.0 bring
  • An article digests the major new features of ES7, ES8, and ES9
  • Common problems and solutions for technical teams
  • Introduction to 10 common new features in ES6
  • Vue3 script Setup syntax is really cool