Comment by 65
12 days ago
The first example of not using absolute positioning isn't a good example because sometimes you do need to absolutely position things, like a modal.
Also you can just use display: flex with justify-content: center and align-items: center for non absolutely positioned elements.
Just because it uses CSS grid does not make it more "correct" than flexbox.
I also only see one usage of custom @property properties here, which has been one of the most useful things to happen to CSS in years. They have many different use cases, particularly for complex animations.
Modal containers should be position: fix; with their own internal flexbox or grid btw.
Not always. That's assuming you have a full viewport modal. There are plenty of instances where you'll have a modal inside of another container somewhere on the page.
You also generally don't want to use position: fixed as it can allow the user to scroll behind the modal.