Article Content

  • Home
  • The front end
  • Do you really understand the CSS property shorthand
  • JQuery descendant traversal summary
  • This is the latest article

Do you really understand the CSS property shorthand

2016/09/11 18 ℃ Grab a sofa

By LiDong from www.lidongtech.com/understand-… This article may be reproduced in its entirety with the written permission of the original author, while retaining the original author and source. If only drainage, feel free to ~

Being efficient means getting more done in the same amount of time, and getting more done may result in more money. Under the background of little difference in knowledge stock, the difference between the great god and the novice is reflected in the speed of knowledge invocation. You’re already out there with thousands of lines of code, and I’m still looking through the documentation for the DEMO. You got paid for the project and I’m probably still negotiating with the client. It really doesn’t hurt…

Everyone who knows JavaScript will feel like stepping into an air-conditioned room in the dog days of summer when they learn jquery. CSS will also let a person have a similar experience, you are at least big bird level of people, about the CSS property shorthand is absolutely familiar. You’ll probably have a lot of shorthand CSS properties in mind by now, such as margin, font, box-shadow, etc.

People who like gossip have a “dig to the bottom” quality. Unfortunately, I tend to be this type of gossip when it comes to issues that interest me. I asked myself a question the moment the gossip God possessed me. “What are these CSS shorthand properties for?”

After thinking hard for a long time, I came up with several points: the shorthand attribute can reduce the amount of code, so that the code is cleaner; The shorthand attribute improves code readability and makes code easy to maintain. Shorthand properties can be loaded… Okay, I’ll admit that last one’s a bit of a patchwork. Can not help but wonder in my heart, is it possible that the W3C group of goods out of some shorthand attributes can be such a simple reason?

The answer is obviously not that simple, and it’s hard to find out why by looking at the data. Obviously I’m in a wrong way of thinking on this issue. My way of thinking and direction of thinking have been in a small circle and I can’t get out. Forget temporarily put aside it, perhaps when a flash of light happy heart to solve.

A small BUG I encountered in a project suddenly reminded me of this problem. In the past, when faced with this problem, the materials searched on the Internet were all about introducing specific attribute values that can be abbreviated or the ways to be abbreviated, which was hard for me to find out. For the existence of god level, this problem is not a problem at all, but I am white ah, or white in white, do not understand that I am “repeatedly sleepless at night”. It is said that people who like to think are not too lucky, it seems that I have a little luck in this respect //PS: I quietly praise myself, by the way in my heart to write down a pen.

As we all know, the following two lines of CSS code are not equivalent.

/ / short background: # 7 d7d7d; // expand background-color:#7D7D7D;Copy the code

You might wonder why isn’t it equivalent? Can both lines of CSS make the background color #7D7D7D (gray)? If you’re using the shorthand background, I can guarantee you’ll get a solid #7D7D7D background. But if you’re using the expanded background-color attribute, you might end up with a gray gradient, an image of a sexy girl, or something else in the background of the CSS declaration element.

Because there may be another background-image or background: Linear-gradient (); At work, the expanded attribute writing does not interfere with the desired effect by helping us clear out all other related attributes. For example, if you define font-size and omit font-weight, you may end up with a bold, black piece of text. If you use the shorthand font, you’ll overwrite the value of font-weight, and that’s not a problem.

Assuming you have a “disciplined level” of productivity and patience, set up all the expansions and call it a day to play LOL. But you’ll probably look back and realize you missed a few; Or more pull is one day in the future the CSS x. 0 version by the W3C that helped out the goods, and it also introduces more expansion properties, these properties have default values, and the default value is not what we want, as a result, your code can’t completely cover them, dare not imagine that it is a “seamless” sort of disaster.

At this point, it seems that the expanded property is useless, and the shorthand property is the “magic bullet.” Unfortunately, I don’t mean that. What I’m advocating is the proper use of shorthand attributes. The proper use of shorthand attributes is a good way to code defensively against future risks. If we explicitly want to override a specific expanded property and preserve other related styles, we need expanded properties. The two are not mutually exclusive, but mutually coordinated and complementary.

The combination of expanded attributes and abbreviated attributes can be very efficient and useful, especially for those that accept comma-separated lists. //ep: background, box-shadow can accept multiple Settings separated by commas. Here’s an example:

// Set three background images: background:url(.. /images/t-r.png) no-repeat top right / 2em 2em, url(.. /images/b-r.png) no-repeat bottom right / 2em 2em, url(.. /images/b-l.png) no-repeat bottom left / 2em 2em; // All following urls are separated by commasCopy the code

If you’re already a god, these lines of code are a “joke.” Hang on, here we need a few lines of code to illustrate a rule and the power of using the expanded and abbreviated properties together.

In the above code, the meaning of each position parameter value after the shorthand property background is familiar to you. After careful observation, we will find that the values of background-size and background-repeat are repeated three times, and these two values are the same for each layer of background. In this case, we need to borrow a rule that we often use in real projects but don’t pay attention to. This rule is known as the “list proliferation rule” for CSS, and we can derive a lot from this rule in the example above.

So what is a list proliferation rule? This means that if you provide only one value for an attribute, it will spread out and apply to every item in the list. With this rule, we can “refactor” the code above. We can simply extract the duplicate values into an expanded attribute and delete the corresponding values in the abbreviated attribute.

// Set three background images: background:url(.. /images/t-r.png) top right, url(.. /images/b-r.png) bottom right, url(.. /images/b-l.png) bottom left; background-repeat:no-repeat; background-size:2em 2em;Copy the code

The result we get after refactoring the code in this way is the same. We only need to modify one property to change the values of three background layers, such as background-size, then the property of all three background layers is changed. Once versus three times, you can see who is more maintainable. The power of expansion attribute and shorthand attribute is indeed very great. As you go through this, you’ll see that this technique is often used in our projects. Everyone knows how to use a good thing…

Proper use of shorthand attributes makes our code more “robust” and less code. The combination of abbreviated attributes and expanded attributes can greatly improve the readability and maintainability of code. And we need to do is to do a little bit of change, this mother no longer need to worry about my study!