The very useful 'quickstart' includes both id and class css selectors in the html.
https://openlayers.org/en/latest/doc/quickstart.html
To attach the map object to the div, the map object takes a target into arguments. The value is the id of the div:
In other OL guidance e.g. the workshop code, then only id selector is used.
I understand the differences in selectivity, and I am aware of guidance to be less selective and use class over id e.g. https://github.com/airbnb/css.
What I do not understand is why class and id selectors maybe needed together for a fairly simple map-based app.
I have searched through OL GH pages, SO, GIS-SE etc and see no clear guidance on this key aspect of displaying a map object.
As you found out, you need the id because the map output will be displayed in a single div. Should you have two maps on a page, you would need two div with different id, so that the two maps can display different content.
Example: a zoomed-in map for a given address and a neighborhood map.
Now if you just have one map, you could style it using its id, i.e. you set the size, borders etc to the div id. But if you have several maps on your site, you will want some common styling, which relies on using a class.