Лучший подход к разметке сетки

Question

Лучший подход к разметке сетки

0

Хорошо, поэтому этот вопрос скорее является "наилучшим типом сделки", или я делаю это неправильно.

На данный момент я использую сетку для нескольких проектов, и я довольно часто меняю оценки, как я строил общий макет. Оба wasy, похоже, работают нормально, мне просто интересно, какой из них логичен логически.

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

Я делаю это один или другой путь

A.

<div class="container">
 <div class="grid_4 sidebar"></div>
 <div class"grid_8 content"></div>
</div>

B.

<div class="container">
 <div class="grid_12 wrap">
  <div class="grid_4 sidebar alpha"></div>
  <div class"grid_8 content omega"></div>
 </div>
</div>

Мои вопросы - это лучший подход и почему.

user1019144 21 март 2014, в 18:21

Источник

0

Учитывая, что B не является допустимым HTML, я бы выбрал A. Используете ли вы начальную загрузку?
RyanS 21 март 2014, в 17:17
0

Это была опечатка извините.
user1019144 21 март 2014, в 17:18
0

Вопрос актуален для меня для многих систем сетки.
user1019144 21 март 2014, в 17:19
0

Если они функционируют точно так же, я бы сказал, что с меньшей разметкой.
Chad 21 март 2014, в 17:31

Показать ещё 2 комментария

Теги:

html

css

grid

2 ответа

0

Я бы пошел с A, по крайней мере, так JQuery Mobile обрабатывает сетки.

Мобильные сетки JQuery

Benjamin Anderson 21 март 2014, в 16:16

1

Точно так же сам по себе загрузчик использует тот же подход, что и здесь: getbootstrap.com/customize
RyanS 21 март 2014, в 17:31

Ещё вопросы

Учитывая, что B не является допустимым HTML, я бы выбрал A. Используете ли вы начальную загрузку?
Вопрос актуален для меня для многих систем сетки.
Если они функционируют точно так же, я бы сказал, что с меньшей разметкой.
Точно так же сам по себе загрузчик использует тот же подход, что и здесь: getbootstrap.com/customize

ganovicefhm · Accepted Answer · 2014-03-21T16-52-00.000Z

А наиболее подходит для простых страниц.

По сути, B <div class="grid_12 wrap"></div> - это всего лишь второй контейнер. Если есть что-то выше или ниже вашего содержимого, которое все еще находится в вашем контейнере <div>, это может иметь смысл. Он позволяет "содержать" область сетки, но все равно держать все внутри контейнера.

Если это вся ваша сетка, вам лучше идти с более простой разметкой. A будет легче отслеживать проблемы позже, когда ваш код будет длиннее или сложнее. Я не могу подсчитать, сколько раз я потерял следы моих вложенных тегов <div></div>, особенно при работе в блокноте/текстовом редакторе или когда моя разметка не понятна в редакторе разработки.