“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Understanding the process of finding a solution is more useful than the solution itself

Minimize code duplication

Keep the editing to a minimum

Size: To enlarge a component, your CSS needs to make several changes

When values depend on each other, they should be expressed in code.

The authors recommend using percentages or EM units. Such as:

font-size: 20px; The line - height: 1.5;Copy the code

This can be modified as follows:

font-size: 125%; The line - height: 1.5;Copy the code

Using em, components can be scaled by font size.

In the MDN Web Doc, the definition of EM is:

Em: A unit of relative length, used in font-size to be the font size relative to the parent element, and in other attributes to be the font size relative to itself, such as width

Another similar unit of relative length: REM:

In the MDN Web Doc, the definition of REM is:

Rem: a unit of relative length, the font size of the root element

Of course, for those that do not want to change with scaling, you can use absolute length units, such as border-width.

Color: How do I change component colors on dark and light backgrounds?

This problem can be easily overcome by superimposing translucent black or white on top of the main tone, creating bright and dark variants of the main tone.

Translucent white: RGBA (255, 255, 255, 0.5) or HSLA (0, 0%, 100%, 0.5),

Translucent black: RGBA (0, 0, 0, 0.5) or HSLA (0, 0%, 0%, 0.5);

The final transparency can be adjusted according to the actual situation.

Set the semi-transparent color and semi-transparent drop shadow on the white and black backgrounds as shown in the following image.

You can easily override background-color to get different versions of the button by setting background: background-color, backgound-image on the original component:

Variables in CSScurrentColor

CurrentColor is parsed to the value of the color of the current font, which, according to CSS Reveal, is the first variable in CSS history.

Trust your eyes, not the numbers

Visual errors are common in all forms of visual design. Design is for people, not machines.

Relevant techniques include:

  1. For vertical center, move the object slightly upward from the center of the geometry;
  2. The circular component is magnified slightly to look the same size as the rectangle;
  3. Reduce the top and bottom margins slightly relative to the left and right margins so that they look the same.

About responsive page design

The idea is to do your best to achieve an elastic and scalable layout and specify the corresponding size within each breakpoint interval of the media query.

When to use media queries:

Other attempts have failed; Or you might want to completely change the design of your site under a larger or smaller viewport.

Some tips for avoiding media inquiries:

Here are a few of them:

  1. Use percentage lengths instead of fixed lengths: %, vw, Vh, Vmin, vmax.
  2. If the background image requires a container to be fully covered, regardless of the size of the container,background-size: coverThis property can do all of that.
  3. When an image (or other element) is laid out as a determinant, let the width of the viewport determine the number of columns.
  4. Specifies when using multiple-column textcolumn-width(column width) instead of specifyingcolumn-count(Number of columns).

Use abbreviations reasonably

Proper use of abbreviations is a good way to code defensively against future risks.

background: url(tr.png) no-repeat top right / 2em 2em,
           url(br.png) no-repeat bottom right / 2em 2em,
           url(bl.png) no-repeat bottom left / 2em 2em;
Copy the code

You can use CSS’s “list diffusion rule” : If only one value is provided for one property, it will be amplified and applied to each item in the list.

background: url(tr.png) top right,
           url(br.png) bottom right,
           url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;
Copy the code

About the preprocessor

CSS preprocessor:

  1. The Stylus (stylus-lang.com/)
  2. Sass (sass.lang.com/)
  3. LESS (lesscss.org/)

They make the code more flexible in large projects.

As mentioned in the article, they can cause the size and complexity of parsed CSS files to get out of hand; Also, these preprocessors can be buggy.