Вопрос про display: table

Question

Здраствуйте! Есть такой код. Так вот некоторые пишут что это типа говнокод. Объясните на чем основано данные утверждения. Спасибо

  <div class="wrapper">
        <div class="col">1</div>
        <div class="col">2</div>
    </div>

.wrapper {
  display: table;
}
wrapper .col {
  display: table-cell;
}

Answer 1

А что есть "семантика", может это чисто субъективное мнение отдельного индивида? По этому поводу можно почитать эту статью, которая является переводом этой статьи.

От себя хочу сказать, что это вполне себе нормальный код и если w3c валидатор не ругается на ваш HTML, то значит у вас всё в порядке.

1. Вполне нормально ставить display: block; для тэга a, хоть это и инлайновый элемент.
2. Вполне нормально ставить display: table, display: table-cell для тэгов div.

Семантика ничего и не говорит по этому поводу, а вот если вы пытаетесь сделать дивами таблицу, не важно как, то это уже может быть нерационально. И ключевое слово в этой фразе "может быть", вы сами хозяин своего кода и оцениваете рациональность применения тех или иных тэгов. Я вот использую бутстрап и в некоторых местах рациональнее сделать таблицу без тэга table, с помощью сетки bootstrap. А в некоторых местах я делаю колонки со стилями display: table, display: table-cell, потому что это отличный способ для вертикального центрирования блоков.

Вообщем, выбор есть всегда, а понимание рациональности и правильности этого выбора придёт со временем.

Answer 2

Из соображений семантики большинству элементов должны быть присвоены соответствующие теги. Таблица должна быть сверстана с использованием <table>. А то, что вы можете так сделать, не дает право верстать всю страницу одними дивами. Можно, но незачем.

Answer 3

Ну не говнокод, но семантика выносит мозг.
Хотя это может быть удобным - если таблица не вписывается в смысл, а структурировать данные надо.
Вопрос типа про <em></em> и <i></i> - первый акцентирует на себе внимание, второй просто ставит курсивное начертание. Для пользователя особой разницы нет, т.к. получилось так, что браузеры отображают одинаково их, но для робота разница огромна.

Так что такой код имеет место быть, но только если он вписывается в контекст приложения.