It's all relative.

In my childhood memory, I was six years old in the back seat of a family station wagon (child safety seats were not popular at that time). My father drove, and my mother played with me. It was my mother's turn to ask a question. She had already chosen an object in her mind and let me guess.

"Is it big?" I asked.

"What do you mean?" the mother asked back.

The whole game follows this pattern: I ask questions, and my mother responds with relative questions.

“You can only ask me questions when it’s your turn to think about objects,” I said.

"If you ask if it's as big as a mountain, the answer is no. But compared to the ant, it's big."

This year, I have been re-learning the meaning of "relative thinking". How long has it lasted? I think this is also very relative. But as 2020 ends, I seem to hear my mother ask me the same questions at work or in life:

"Relatively what?"

When I heard the word "relative", the relative units in CSS immediately emerged in my mind. I believe many people feel the same. In my work, I often use em , rem and % . When I first learned these units (I can't remember exactly when it was), I used them just to look cool, and I don't even know the difference between em and rem , and I thought they were related to retina screens.

Of course, that happened a long time ago. (How long? This is also very relative.) Now I understand that the relative unit is relative to the object it references . The result of 2rem on a website with a root font size of 16px is different from that on a website with a root font size of 24px. The same is true for percentages. In a 400px container, 50% means differently 50% in a 1200px container.

So now when I assign size values ​​to the element, I will have a "dialogue" with my mother first.

“This element is 5.25em.”

"Relatively what?" she asked.

I also learned that relative thinking requires a little perspective change . This has nothing to do with perspective on CSS (although I might try to make this connection). Relative thinking means temporarily breaking out of one's own position and looking at the problem from the perspective of other things.

I say "other things" because I think about this most often when writing code. Whenever I work on various parts of a component, I have to pay attention to the context—or perspective—where it resides. Why? Because these parts have different meanings in different contexts, which are relative to the components that contain them.

When is one<h1></h1> Just one<h1></h1> ? This is almost never the case. It could be the title of the article, it could be the title of the widget, or it could be the title of the card component. As front-end engineers, we name these things based on the perspective of components. From the perspective of the article,<h1></h1> The meaning (and appearance) from the perspective of the card<h1></h1> different.

 <code>.post {} .post__title {} .widget {} .widget__title {} .card {} .card__title {}</code>

Naming is a difficult task. I often think, "Oh! What exactly should this thing be called?"

"Relatively what?" the mother interrupted.

I can continue to talk. In fact, relativity thinking is equally important to the code we write, to the "Twenty Questions" games, and even to our personal lives. During this year we are subverted by many competing forces, in which relativistic thinking can bring us comfort and wisdom in stress and frustration—and of course, it is also very relative.

- "This puts a lot of pressure on me." Relative to what? - "I have a lot to do." Relatively when? - "My JavaScript is terrible." Relative to whom? - "I hate my workplace." Relatively?

It is easy to fall into an absolute mindset. Relative thinking forces us to see things differently.

The above is the detailed content of It's all relative.. For more information, please follow other related articles on the PHP Chinese website!