This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

As a qualified front-end development engineer, coding standards is very important, when the style of the page with the increase of time was complicated, CSS files and code has said, if you don’t have a qualified norms to regulate our coding, this time to see we have written the code must be very painful, if it is other colleagues to take over your project, I don’t know where to start. So, when we go to chat coding standards, not must be paranoid the implementation of the standards for a standard, but a kind of habit and thinking, to better participate in the efficient teamwork, specification coding is just a small way, each person’s code style is different, each team, each company code conventions is not identical also, Hopefully, you’ll be able to maintain a good code specification and then apply it to actual team work, rather than just doing something different on your own.

What are the benefits of canonical CSS coding?

  • Reduce code, increase readability, and increase maintainability.
  • Reduce the cost of project communication and enhance development efficiency.
  • Improves CSS performance, speeds up page rendering, and improves user experience.
  • .

1. Blank space specification

Proper whitespace can improve the reading experience of the code, and make it more elegant and beautiful. Most of the code beautification plug-ins in the current editor automatically add a space before and after a particular character. Let’s see what happens.

1-1. Between selector and

Most languages have a space before {, and CSS is no exception. Style content is wrapped in {}, with Spaces appended between the content and the selector. Example:

.user_info {
    margin: 0;
    padding: 0;
}
Copy the code

1-2. Between the colon and the attribute value

As in the example above, the colon between attributes also needs to be appended with a space. Note that the colon is not required. Example:

margin: 0;
Copy the code

1-3. A comma must be followed by a space

A similar specification exists for function arguments in most languages. Example:

color(0.04, rgb(88.94.124));
Copy the code

2. Limit the length of each line

Each line is limited to 120 characters unless a single line is indivisible. Example:

/* Different attribute values are logically grouped */
background:
    transparent url(xxxxxxxxxxxxxxxxxxxxxxx)
    no-repeat 0 0;

/* Attributes that can be repeated multiple times, one line at a time */
background-image:
    url(xxxxxxxxxxxxxxxxxxxxxxxx)
    url(xxxxxxxxxxxxxxxxxxxxxxxxxx);

/* Function-like attribute values can be indented according to the function call */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04.rgb(88.94.124)),
    color-stop(0.52.rgb(115.123.162)));Copy the code

3. The value is surrounded by double quotation marks

Values in property selectors must be surrounded by double quotes; single quotes and no quotes are allowed. Example:

* / / * proposal
article[character="sam"] {
    voice-family: "Bob Barker"."Monty Hall", male;
}

/* Not recommended */
article[character='sam'] {
    voice-family: "Bob Barker"."Monty Hall", male;
}
Copy the code

4. Selector correlation

4-1. Multiple selectors occupy a single row

When a rule contains multiple selectors, each selector must be declared on a single line. If the rule is too long, horizontal scrolling is required to read the rest of the content. Try to make the reading order vertical. Example:

* / / * proposal
.text-danger..danger {
    color:#F56C6C;
}

/* Not recommended */
.text-danger..danger {
    color:#F56C6C;
}
Copy the code

4-2. Do not add type selectors to ID and class selectors

In addition to not very beautiful, but also affect certain performance. Example:

* / / * proposal
#error..danger-message {
    color: #F56C6C;
}

/* Not recommended */
dialog#error.p.danger-message {
    color: #F56C6C;
}
Copy the code

4-3. The nesting level of the selector should be no more than 3 levels

In general, the HTML structure should be determined before starting to design the style, and the development effect should be achieved by using the minimum level of element nesting, no more than 3 levels are recommended. Example:

* / / * proposal
#username input {}
.comment .avatar {}

/* Not recommended */
.page .header .login #username input {}
.comment div * {}
Copy the code

5. Attribute correlation

5-1. Property definitions must end with a semicolon

This is not the first time to write CSS. Semicolon endings are mandatory.

* / / * proposal
.user_info {
    margin: 0;
}

/* Not recommended */
.user_info {
    margin: 0
}
Copy the code

5-2. Use attribute abbreviations whenever possible

I’m not too comfortable with this either, although there’s a lot less code, but the reading experience is a lot worse. Example:

* / / * proposal
.user_info {
    font: 12px/1.5 arial, sans-serif;
}

/* Not recommended */
.user_info {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
Copy the code

5-3. Standard writing sequence of attributes

Properties under the same rule should be grouped by function when written. And writing in order of Formatting Model > Box Model > Typographic > Visual to improve the readability of the code. Explanation:

  • Relative attributes of Formatting Model include position/top/right/bottom/left/float/display/overflow, etc
  • Box Model attributes include border/margin/padding/width/height, etc
  • Typographic related attributes include: font/line-height/text-align/word-wrap and so on
  • Visual attributes include: background/color/transition/list-style, etc

Also, for readability, if the content attribute is included, it should be placed first. Example:

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... * /
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... * /
    background: #f5f5f5;
    color: # 333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}
Copy the code

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