A good starter to use cases for the :has() selector

This guide provides guideline for animations. Here are the following rules:

• 200-500ms is the optimal speed for interface animation
  • on mobile device, the duration of animation should be limited to 200-300ms.
  • on tablets, it should be longer by 3ß% as the screen is bigger so objects overcome the longer path when they change position.
  • on wearables, the duration should be accordingly 30% shorter
• the duration of web transitions should last about 2 times shorter than on mobile devices — between 150–200 ms
• the more bigger the element is, a bot better when it lasts a little longer.
• When objects collide, the energy of collision must be evenly distributed between them according to physical laws. Avoid the bounce effect.
• The movement of the objects should be clear and sharp. Avoid motion blur.
• List items (news cards, article list items) should have a very short delay between its appearance: 20-25 ms.

Easing makes the movement more natural: the object should move with some acceleration or deceleration — just like all live objects in the physical world. There are 3 categories:

• linear motion: it looks very unnatural and artificial to the human eye.
• ease-in (acceleration curve): should be used when the objects fly out of the screen at full speed and won't be displayed again.
• ease-out (deceleration curve): should be used when the element emerges on the screen. his can also be applied to different cards or objects that appear from the outside of the screen.
  • ease-in-out (standard curve): is the most frequently used in interface animation. In doubt, use this animation. Ease-in-out is used when the objects move from one part of the screen to another. The same movement type should be used when the element disappears from the screen but the user can return it to the previous place at any time.

Equal interaction: the appearance of all objects obeys to one particular rule

• A vertical list should be guided in one fluid direction
• Grid should have a diagonal appearance
• subordinate interactions (one central object which attracts all user's attention): animate as minimum objects as possible at one time.
• when the moving objects transform their size disproportionally, they should move along the arc rather than in a straight line.
• if the paths of the moving objects intersect one another, they cannot move through each other. In another case, the moving object can rise above other objects.

A 4-days workshop to learn rust

and the code example: https://codesandbox.io/s/css-grid-blog-bonus-v2-nn7t2

As a general rule, we should give the user as much control as possible, and we should never disable or block their settings from working. For this reason, it's very important to use a relative unit like rem for typography.

Then we should use rem everywhere ?

Do I actually want everything to scale with font size?
When we use rem values for horizontal padding, though we amplify the effect "larger the text is, the fewer characters can fit on each line".

So the final question is:

“Should this value scale up as the user increases their browser's default font size?”

I've come to realize, however, that we usually do want to use rems for media queries.

We're so used to thinking of media queries in terms of mobile/tablet/desktop, but I think it's more helpful to think in terms of available space. [Why in the post]

Other example is the space between paragraphs: it has a "functional" purpose so that we can quickly tell where one paragraph ends and the next one begins. For this reason, it does make sense to scale these margins with the user's chosen root font size.

Example of use of em instead of rem

• rem

h1 {
  font-size: 3rem
  margin-top: 6rem;
  margin-bottom: 1.5rem;
}
h2 {
  font-size: 2rem
  margin-top: 4rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 0.75rem;
}

• em

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
h1, h2, h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

Another example is the width of a button: we can think about it alone yet.

Finally, it is better to forge an intuition as opposed to a set of rules about using rem/px as there are always edge cases.