Why not just `body {font-family: sans-serif}`? Like, you don't have to explicitly enumerate all sans-serif system fonts ever. The browser will handle it.
Sometimes you care a lot about the design of the website and that everything looks 100% OK in all browsers and screen-sizes. For example, think web agency landing pages, where you're supposed to sell your service to potential customers.
In those cases, using whatever font is usually not good enough, because many of them have different sizes (both length-wise, height-wise and line-height-wise), so if a user gets a different font loaded than what you have tested with, it could at best just have a different size (right-side of the text is now 3px away from the side rather than 6px for example) and at worst introduce line-breaks in your buttons that only expects one line of text, making everything look very fugly.
Because they want to have a tighter control of user experience, which includes the choice of the font used to display text. So they list their preferred fonts first, with fallback fonts at the end.
It’s a fair reason with an appropriate CSS pattern.
I, like the GP, fail to see how listing dozens of fonts of completely different nature (x-height, line-height, width, proportions, weight...) provides any "control of the user experience".
This seems to be developed for browsers which do not default to system-wide fonts: which ones are those today?
