In addition to creating the project, installing AXIOS, and the framework, there is style reuse, logic reuse, and component reuse prior to project development.

  1. Clear the browser’s default styles
body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,a,input,button,textarea,select{
  margin: 0;
  padding: 0;
  outline: none;
}
html,body{
  color: #333333;
  background-color: #ffffff;
  min-width: 1200px;
  font-size: 12px;
}
a{
  text-decoration: none;
}
ul,li{
  list-style: none;
}
input{
  font: normal;
}
input:focus,a:focus{
  outline: none;
}
Copy the code
  1. Common style

The solution is as follows:

  1. Style reuse

The same style is used in multiple places with different parameters, as shown below:

The solution is as follows:

Set up flex layout reuse in mixin.css

@include Flex () in reusing pages;

Similarly, background image styles are reused

  1. Set the theme color and regular font size Settings, which is conducive to the later change of color and font, and more convenient and high maintenance efficiency.

  1. Logic reuse

  1. Component reuse

The 1-4 points above are the notes I made during my previous study of MOOCs. The 5-6 points are my own summary, which have been useful in the actual development process. I think they are quite practical and frequently used, so I would like to share them here, hoping it will be helpful to you.

Hahaha, today is also a happy and beautiful day.