Фонд 5 div heavy

Question

Я начал работу над новым проектом и решил дать Фонду 5 баху, чтобы понять, что это такое. Первое, что я заметил в документации при создании форм с горизонтальными полями, - это использование большого количества div для стилизации. Так что я попробовал пример ниже (второй пример, который я попробовал без дивы):

<!-- Example with extra divs --> 
<div class="row"> 
    <div class="large-2 columns"> 
    <label>Contact</label> 
    </div> 
    <div class="large-6 columns left"> 
    <select></select> 
    </div> 
</div> 

<!-- Example without extra divs --> 
<div class="row"> 
    <label class="large-2 columns">Contact</label> 
    <select class="large-6 columns left"></select> 
</div> 

Они оба достигает то же самое с немного другим стилем. Мне было интересно, может ли кто-нибудь объяснить, почему я буду использовать первый (следует за основанием documentation), а не другим ... с меньшим количеством html! Я предполагаю, что это имеет какое-то отношение к тому, как используется фундамент, и я просто не успеваю с ним справиться.

Благодаря

Answer 1

Имея <label> в <div> даст вам большую гибкость в моделировании. Определение класса для <label> ограничит ваши параметры стиля. Для <div> вы можете определить высоту, цвет фона, границу, ширину, фоновое изображение, заливку градиента, поля, отступы и многое другое. Принимая во внимание, что присвоение <label> имени класса не позволит вам выполнять эти стили. Вы можете попробовать.

В основном, <div> работает как коробка или контейнер, в котором содержится некоторый элемент контента, и это дает вам много энергии и гибкости в стилизации. В то время как определение классов для элемента контента не дает вам такой гибкости и мощности.