CSS should be Shorthand or Longhand

Set the correct practice, use CSS with Shorthand or Longhand ? I looked, but I did not find a definite answer ...

When we declare the class with Shorthand we are saying that all other values should be set to initial . I will only demonstrate a few situations that illustrate my interest and doubt.

  

A value that is not specified is set to its initial value. Source: link

So when we declare our BG color like this:

div { 
     background: red;
} 

In fact we are saying, or at least that's how Browser is reading, this:

div { 
    background-image: initial; 
    background-position-x: initial; 
    background-position-y: initial; 
    background-size: initial; 
    background-repeat-x: initial; 
    background-repeat-y: initial; 
    background-attachment: initial; 
    background-origin: initial; 
    background-clip: initial; 
    background-color: red; /* mas eu só queria o bg :) */
} 

• Is this good for performance?
• Is it better to declare all values individually or let Browser process all values we are not declaring ?

Possible problems with Shorthand (another example with background)

Simple shorthand problem with background doing override in classes defined by the default component.

.base-class { 
    height: 50px; 
    width: 100%;
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 
.base-class--modifier { 
    background: radial-gradient(...) 
}

<div class="base-class base-class--modifier"></div>

Should be used background-image: radial-gradient(...)

Today like Emmet and software that already has autocomplit almost everything still worth writing CSS with shortcuts? Or is it better to be more concise in style statements?

Is there any good practice Considering performance, maintainability, readability, etc.

Reference links:

• link
• link