Front-end development css, less preparation of specifications

One ❀ lead

As early as half a year ago, I was in charge of finishing the definition of front-end JavaScript development group norms and less, css style development specifications. Always wanted to organize articles into two specifications, but after finishing the JavaScript specification, I spent more time in learning the basics of JavaScript, so for style specifications has been placed in state. Until last week, I received a comment on JavaScript standard, reminded me of the style specification can not be delayed, so take the time to organize it again as a refresher before the holiday is also quite good.

He said earlier, this article though as the norm but for less and css wording also gives some of the recommendations, it is recommended that the reader before reading this specification to master the basic usage of less, and for the specification here only give advice, after all, only for their own It is the best beginning of this article.

II ❀ naming convention

II ❀ One class, id name

We recommend using a JavaScript variable small hump, but the style was named for a change, here we recommend - delimiter stitching.

/* good */
#foo-bar;.foo-bar

/* bad */
#fooBar;.fooBar

II ❀ II less variable named

We know less variable styles provided for multiplexing, for multi-word variable names begin with @ and is recommended - named delimiter stitching.

/* good */
@border-color:#fff;

/* bad */
@borderColor: #fff;

II ❀ three less function named

In addition to variables, less also provides a multi-attribute class multiplexing functions for style classes, beginning with a function of recommendation - dividing line named splicing;. If the parameter is more than one word, the first letter of the word is recommended to use short lowercase, a plurality semicolon between parameter; isolated. (Although a function of many)

/* good */
.foo-bar (@bg: #f5f5f5;@color: #900; @fz: 12px) {
    background: @bg;
    color: @color;
    font-size: @fz;
}

/* bad */
.foo-bar (@background: #f5f5f5, @color: #900, @font-size: 12px) {
    background: @background;
    color: @color;
    font-size: @font-size;
}

II ❀ store less namespace

Namespace less in fact, it is part of the variable and packaging of the hybrid module, named for the recommended space # at the beginning - the dividing line splicing unified.

/* good */
#foo-bar {
    .border-radius() {
        font-size: 12px;
    };
    .border-color() {
        color: #fff;
    }
}

Triple ❀ less File introduction

One big advantage is less support for file purely as a variable to store files, which can be introduced in other less, the less said the introduction of the first usage, directly attached to the official website here Usage:

Due to possible simultaneous index.lessfile with index.cssa file, the same name but different in order to facilitate distinguishing suffix files, @ import external documents incorporated suffix omitted __ __ not recommended, if the file itself is only used as a reference without the need to compile the output must be referenced in the document add the reference field.

/* good */
@import 'demo.css'; //引入demo.css
@import (reference) 'demo.less';//引入demo.less,只作引用，不输出demo的内容

/* bad */
@import 'demo.css'; //引入demo.css
@import 'demo';     //引入demo.less，并输出

Wantonly ❀ css, less abbreviated

One attribute value store ❀ omitted wording

About padding, margin:

/* good */
margin: 1px 2px;
padding: 2px;

/* bad */
margin: 1px 2px 1px 2px;
padding: 2px 2px 2px 2px;

When the unit value is zero, omit unit; decimal point if present, remove the recommendation 0 abbreviations are used:

/* good */
transition-duration: .5s;
margin-top: 0;

/* bad */
transition-duration: 0.5s;
margin-top: 0px;

Hexadecimal color values ​​recommended wording, rather than RGB expression, of course, you can use if you need to use RGB transparency, flexible:

/* good */
border-color: #f00;
color: #fefefe;

/* bad */
border-color: red;
color: rgb(254, 254, 254);

II store ❀ deprecated element selector + class / id combinations

For performance reasons, to avoid the element selector and the class or id selector overlay use, contrary to the rules of such an approach and separate style html, if the corresponding html tags have modified the modified css element selector; Second, since the selector matching rules from right to left, originally targeted to class or id should be the end, if you add an element selector, css'll have to match all the elements, huge performance, it is strongly not recommended.

/* good */
.foo-bar

/* bad */
div.foo-bar

❀ store style three multiplexes

When the selector has a plurality of common attributes, separated by commas recommended multiplexing selector, each selector separate line. If the environment is less, is also recommended variable, mixed and other practices.

/* good */
h1,
h2,
h3{
    color: #fff;
}

/* bad */
h1,h2,h3{
    color: #fff;
}

Use store store less ❀ parent selector &

Pseudo parent class attribute selector is recommended instead of the traditional written writing, look at a few examples:

Common pseudo-classes, such as hover, etc.

/* good */
a {
    color: #fff;
    &:hover {
        color: #ddd;
    }
}

/* bad */
a {
    color: #fff;
}
a:hover {
    color: #ddd;
}

clearfix hack Example:

/* good */
.demo {
    font-size: 12px;
    &:after {
        display: block;
        content: '';
        clear: both;
    }
}

/* bad */
.demo {
    font-size: 12px;
}
.demo:after {
    display: block;
    content: '';
    clear: both;
}

Wu ❀ code organization structure

Wu ❀ One divided block units to layout style code

Before writing style, page layout, and to please divided block units writing style layout, not fragmented arbitrarily defined. Recommended code blocks from top to bottom writing, the writing order from left to right, there should be no earlier than the child style definitions parent, in the case of the upper layer underlying the style pattern defined earlier.

For example, the page is divided into head, body and tail, then head to tail style early style definitions; Another example is the interior of the body into left and right two boxes on the right box styles can not be earlier than the left side of the box, so that the code is more in line with the layout of the reading habits .

/* good */
.parent {}
.child {}
.top {}
.bottom {}

/* bad */
.child {}
.parent {}
.bottom {}
.top {}

Wu ❀ II less variable, please define the function after use

Variable, the file must first declare / re-use references, and secondly, file reference code should be placed in the file header.

/* good */
@import 'demo.less';
@color: #fff;
.page {
    color:@color;
}

/* bad */
@import 'demo.less';
.page {
    color:@color;
}
@color: #fff;

Wu ❀ three nested style rules

less recommended wording nesting and nesting is not recommended more than three layers:

/* good */
.parent {
    color: #fff;
    .child{
        font-size: 12px;
    }
}

/* bad */
.parent {
    color: #fff;
}
.parent .child {
    font-size: 12px;
}

Lu ❀ comment requirements

For the overall layout of the page in chunks, it is recommended to add explanatory notes before the style definition, such as:

/* good */
/* 头部样式定义 */
.header {}

/* 产品推荐样式定义 */
.mayLike {}

SEVEN ❀ mixin mixing requirements

Mixed with a function of, if mixed attribute class itself need not be compiled output attribute class must parentheses ().

/* good */
.border-color() {
    color: #fff;
}
.demo {
    .border-color;
}

/* bad */
.border-color{
    color:#fff;
}
.demo{
    .border-color;
}

A function of the parameters, if desired parameter is a reference to all the different values ​​of properties, the dispersion parameter instead of the recommended @arguments wording:

/* good */
.box-shadow(@x:0;@y:0;@blur:1;@color:#000){
    box-shadow:@arguments;
}

/* bad */
.box-shadow(@x:0; @y:0; @blur:1; @color:#fff){
    box-shadow:@x @y @blur @color;
}

Ba ❀ extend inheritance demand

If the mixed attribute class itself needs to be compiled output, it is recommended to use inheritance instead of mixing:

/* good */
.border-color{
    color: #fff;
}
.demo {
    &:extend(.border-color);
}
/* 编译后 */
.border-color,
.demo{
    color: #fff;
}

/* bad */
.border-color{
    color: #fff;
}
.demo {
    .border-color;
}
/* 编译后 */
.border-color{
    color: #fff;
}
.demo {
    color: #fff;
}

Nine ❀ performance optimization (supplement)

• Display properties affect the rendering of a page, the rational use of

  • display: width should not be used after inline, height, margin, padding and float;
  • display: should no longer use the float after inline-block;
  • display: should no longer use vertical-align the block;
  • display: table- should not be used after the margin or float *;
• float when rendering computationally intensive, do not float abuse; context allows flex recommended layout.

• Animation Optimization

  • Use translate to replace absolute positioning will get better fps, the animation will be more smooth.
  • To avoid a similar jQuery animate () - style change style every frame animation using CSS declaration will be better browser optimization.
  • If you are using javaScript based animation, to make use of requestAnimationFrame. Avoid using setTimeout, setInterval. (I will explain about css animation alone, to leave a pit)

• CSS selectors to enhance performance, the rational use of key selector

  • Special note, CSS selectors matching mechanism is matched from right to left, as long as the currently selected character to the left of the other selectors, style, the system will continue to move to the left, until it finds a matching rule and selector, or because mismatch drop out. So we called the rightmost selector key selector.
  • Avoid using universal selector .content * {color: red;}
  • Avoid using restriction id tag selector button#backButton {…}
  • Avoid labels that limits class selector treecell.indented {…}
  • Avoid using multi-layer tag selector, replace the use of class selectors, reduce css find.
  • Avoid using descendant selectors, please indicate the hierarchy as possible.
• Reduce reflux (rearrangement)
  • If you want to control the displacement of an element, it is recommended first out of the document flow.
  • As little change font-size, and font-family
  • Little change inside and outside the margin elements
  • When substituted inline-block using the Flex and float, although reflux will, but better flex properties.

❀ overall pick

So here, on css, less specification on the finished presentation, style is simple, but through proper planning, whether in the post-maintenance code or colleague to read the code, will bring an unexpected convenience.

Say good month to write a minimum of eight blog, there is still only three home wrote. It is 2020, at 0:18 on January 20, had finished it today, I'm going home for the holiday! ! ! ! Although I did not grab a ticket to go home tomorrow ... or to find cattle arrange it, then good night, I stay up late.