div.container dla Tagów HTML5 - czy to potrzebne ? Poważna rozkmina

Question

Witam wszystkich. Ostatnio przy zabawie z małymi projektami natrafiłem na dziwny dylemat, który już od dłuższego czasu nie dawał mi spokoju. Podczas poszukiwań natrafiłem na tego typu wątek: https://stackoverflow.com/questions/354739/why-should-i-use-a-container-div-in-html

Ok, nieco to rozjaśnia sytuację, ale jak ma się to do sematycznych tagów rodem z HTML5 ? :D

Weźmy pod lupę tag main - każdy wie, czym on jest i powszechnie wiadomo, że może być tylko jeden taki na całą podstronę. Określna on oryginalną treść na całej bowiem stronie, której nie znajdzie się na innych podstronach. 

Generalnie wyświetlany on jest blokowo (chyba że jakieś przeglądarki go nie interpretują). Czy zatem potrzebuje on kontenera w postaci div ?? A jeżeli tak, to jak to powinno wyglądać Waszym zdaniem ??

1. Po prostu tag main:

<main>

...content...

</main>

Czyli co tu dużo pisać.... po prostu block semantyczny typu main, który jest jednocześnie naszym selektorem którym będziemy stylować naszą główną treść.

 

2.

<div class="main" id="main">
   <main>

      ...content...

   </main>
</div>

Tutaj mamy przypadek, gdzie "kontenerem" owijamy cały nasz tag main, dlatego ma on klasę .main której nadajemy style, a dzięki #main możemy na samej górze strony wstawić link właśnie do tej głównej treści (przydatne, gdy mamy długi spis linków w nawigacji, zwłaszcza dla screen readerów).

 

3. 

<main>
   <div class="container">
      
      ...content...

   </div>
</main>

Tym razem to kontener jest zawarty bezpośrednio w main. W nim znajdować się będzie nasza główna treść i to jego stylować będziemy.

 

4.

<main id="main">
   <div class="container">

      ...content...

   </div>
</main>

Czyli to samo co powyżej, tyle że tym razem nadaliśmy tagowi main ID aby można było do niego łatwo nawigować. Analogicznie, do div zamiast klasy "container" możemy po prostu nadać klasę "main" i po niej właśnie stylować naszą główną treść. Wizualizację pozostawiam Wam ;)

 

5. 

<main class="main" id="main">

   ...content...

</main>

Czyli to samo co w punkcie pierwszym, tylko że nadaliśmy tu jeszcze klasę po której będziemy stylować i ID dzięki któremy łatwiej będzie nawigować do tego elementu. Przerost formy nad treścią ??

 

Temat moim zdaniem ciekawy, gdyż każdy chyba z nas wolałby odchudzić kod jak tylko się da. Ale spójrzmy chociaż na takowego Bootstrapa - ten chyba lubi korzystać z kontenerów jak mniemam ;p

A Wy, jakie podejście uznajecie za słuszne i stosowne i dlaczego ? Chciałbym poznać Wasze opinie i może jakieś konkretne źródła i informacje ? Bo jak mniemam Bootstrap nie robi tego bez powodu, a może się mylę ? :D

A może macie jeszcze jakieś inne podejście, którego nie wymieniłem powyżej ? Czekam na Wasze opinie :)

 

Pozdrawiam i życzę miłego dnia i spokojnego wieczoru :D

Answer 1

Wszystko zależy od konkretnego przypadku. Najczęściej stosuję podejście 5, czyli main z klasą (bo styluję wszystko po klasach, żeby trzymać specyficzność stylów na płaskim poziomie). Ale coraz częściej widzę podejście 1, czyli po prostu main (bo obecne możliwości CSS-a, takie jak warstwy, pozwalają zarządzać kaskadą bez konieczności trzymania płaskiej specyficzności). W wielu przypadkach takie podejście jest wystarczające.

Ale czasami zdarzają się bardziej zaawansowane projekty, w których np część treści ma inną szerokość niż reszta strony. Wówczas taki dodatkowy kontener się przydaje.

Comments

Rozumiem. Więc odpowiedź "to zależy" jest tutaj zasadna :D

A zatem pytanie zadam inaczej. Które z powyższych podejść wydaje się bezzasadne i dlaczego ?

 

bo styluję wszystko po klasach, żeby trzymać specyficzność stylów na płaskim poziomie

Dziękuję za podpowiedź. To dla mnie również bardzo ważna wskazówka :)

---

Które z powyższych podejść wydaje się bezzasadne i dlaczego ?

Chyba nie ma takich…? W sensie każdy da się jakoś uzasadnić i to serio zależy od przypadku. Niemniej najrzadziej widuje się prawdopodobnie 2.