Be tired of repeat is our human essentially. When I had written down a lot of css, I think it is time to put and classify the css to the corresponding class name. For example, I found that I need the space-around in many places, so I created a class named around like this

.around{  display: flex;  justify-content: space-around;  width: 100vw;}

Next time we need it can write like this

<div class="around" ></div>

But, even so, we still feel it is tired when we repeat the <div> so we can write like this 

function around(){  return <div class="around" ></div>}

The problem is that the single around() is pointless, but since it is a function, we can give it some param 

let children=<span></span><span></span><span></span>function around(children){  return   <div class="around" >    {children}  </div>}

 Sometimes, we need to custom the css of the div 

let children=<span></span><span></span><span></span>function around(children,style){  return   <div class="around" style={style} >    {children}  </div>}

Finally, we need the click event 

let children=<span></span><span></span><span></span>function around(children,style,onclick){  return   <div class="around" style={style} onclick={onclick} >    {children}  </div>}</script>

 Is it all? No. Since the world is complicated, maybe we need to give the touch, the mouse event and so on to the around(), that means that the third param of the around() should be changed from  string to object 

let children=<span></span><span></span><span></span>function around(children,style,events){  for(let e  in events){    document.getElementsByClassName('around')[0].addEventListener(e,events[e])  }  return   <div class="around" style={style}  >    {children}  </div>}</script>