@@einsiedler > Darum ging es mir, wie man es halt "professionell" macht! War dir [mein Beispiel](https://codepen.io/gunnarbittersmann/pen/ppdYxX) nicht professionell genug? > ~~~HTML > <nav> > <ul class="gridcontainer"> > ~~~ Wenn man es ernst meint mit **separation of concerns**{:@en} (und es gibt gute Gründe, das zu tun), dann hat sowas wie *„grid“*{:@en} im Markup nichts zu suchen. HTML ist zur (semantischen) Auszeichnung der Inhalte da, nicht zur Angabe von deren Darstellung. Im Markup sollte überhaupt nicht ersichtlich sein, wie Inhalte dargestellt werden (bspw. ob als Grid oder nebeneinander oder untereinander). `gridcontainer`{:.bad} wäre eine rein darstellungsbezogene Klasse, also bäh! Ohne eine solche: ~~~HTML <nav> <ul> ~~~ ~~~CSS nav > ul { display: grid } ~~~ (Sollte es mehrere `nav`-Elemente geben, müsste man das freilich noch spezifischer angeben, bspw. über eine ID für dieses `nav`-Element oder einen Selektor wie `body > header > nav > ul`.) > Hast Du ein Beispiel wie man diese Sandwich-Navigation macht wenn man das > Bildschirmfenster horizontal zusammenzieht? Sandwich? Meinst du [sowas](https://codepen.io/gunnarbittersmann/pen/jYaRJM)? LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@einsiedler > Darum ging es mir, wie man es halt "professionell" macht! War dir [mein Beispiel](https://codepen.io/gunnarbittersmann/pen/ppdYxX) nicht professionell genug? > ~~~HTML > <nav> > <ul class="gridcontainer"> > ~~~ Wenn man es ernst meint mit **separation of concerns**{:@en} (und es gibt gute Gründe, das zu tun), dann hat sowas wie *„grid“*{:@en} im Markup nichts zu suchen. HTML ist zur (semantischen) Auszeichnung der Inhalte da, nicht zur Angabe von deren Darstellung. Im Markup sollte überhaupt nicht ersichtlich sein, wie Inhalte dargestellt werden (bspw. ob als Grid oder nebeneinander oder untereinander). `gridcontainer`{:.bad} wäre eine rein darstellungsbezogene Klasse, also bäh! Ohne eine solche: ~~~HTML <nav> <ul> ~~~ ~~~CSS nav > ul { display: grid } ~~~ (Sollte es mehrere `nav`-Elemente geben, müsste man das freilich noch speziefischer angeben, bspw. über eine ID für dieses `nav`-Element oder einen Selektor wie `body > header > nav > ul`.) > Hast Du ein Beispiel wie man diese Sandwich-Navigation macht wenn man das > Bildschirmfenster horizontal zusammenzieht? Sandwich? Meinst du [sowas](https://codepen.io/gunnarbittersmann/pen/jYaRJM)? LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)