Abbreviated Properties

Why set a picture through background-image , if you can just write a background ?

The CSS background property is an abbreviation of a whole group of properties: background-color , image , attachment , position and others. Instead of writing a whole battery of properties, it is sometimes convenient to simply set the background and describe everything in it.

 background-color background-image background-position background-size background-repeat 

And the background just shorter: both when you type and the user when you upload your styles with the rest of the site. Well, solid pluses, let's write only abbreviated properties! Checkmate.

In general: if you write one simple thing, which once set the background, then no problems. But if you have already begun to think modularly, combine several classes on one element or you know what modifiers are for blocks - there is a problem.

For example, you described in the .first class the .first properties in the background , but did not specifically specify the image. And then the .second class adds an element to the picture with the background-image property. And all is well, the picture is simply added: .first , .second .

 .first { background: red no-repeat; } .second { background-image: url(pic.png); } 

But if the opposite: first, background-image , and then the rest in the abbreviated background property, then the picture will not be - it will be erased. Eh, cascade , you merciless bastard.

 .second { background-image: url(pic.png); } .first { background: red no-repeat; } 

Just think! - you will say, - I will just be more attentive and will not allow it. I believe in you and for sure everything will be fine. But it is better to immediately apply approaches that do not allow even random errors, right? We are all humans.

If we describe the properties of the background in both classes with full properties instead of abbreviated, then whatever one may say, the classes - everything will be in order, they will complement each other. And it also makes it easier to read styles: the order of properties in the abbreviated background property is arbitrary and everyone writes as they like.

 .first { background-color: red; background-repeat: no-repeat; } .second { background-image: url(pic.png); } 

On a similar star, frontend star Harry Roberts wrote and directly called abbreviated properties antipattern. Be sure to read, all links will be in the description of the video.

There are many simple abbreviated properties: font , list-style , border , padding , margin and others. But there are complex ones or simply new ones for you - they are easier to understand in a separate entry.

One of my favorites is the animation property. I could not remember its syntax for a long time, until one day I decided to record it always in parts: animation-name , duration , timing-function and so on. And everything fell into place.

 .wat { animation: 3s ease-in 1s 2 reverse both paused slidein; } 

The same story with the reduced flex property: it combines flex-grow , shrink and basis . And if you sometimes look for a long time at some flex: 0 0 1 or try to understand this magic, then just write them down separately and everything will become clearer.

Remember: it is convenient to write abbreviated properties, but it is difficult to combine and understand, so write modular styles or new properties for you deployed.

Video version

Questions can be asked here .