Bootstrap 3 grid in less vs in html

Question

Какова наилучшая практика для реализации сетки bootstrap 3? Существует два варианта: через классы в html и через меньшее количество миксинов.

Использование начальной загрузки классов в HTML и bootstrap.css (который, кажется, стандарт):

<div class="container"> 
    <div class="row"> 
     <div class="column-md-6 column-xs-8"> 
      <p>test</p> 
     </div> 
     <div class="column-md-6 column-xs-4"> 
      <div class="row"> 
       <div class="column-md-8 column-xs-6"> 
        <p>Another test</p> 
       </div> 
       <div class="column-md-4 column-xs-6"> 
        <p>Yet another test</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Используя МЕНЬШЕ и самонастройки Примеси и соответствующий HTML структуру:

<div id="maincontent"> 
    <div id="maincontentarea"> 
     <div id="blogarticles"> 
      <p>test</p> 
     </div> 
     <div id="whatsnew"> 
      <div id="whatsnewarea"> 
      <div id="whatsnewheading"> 
       <p>Another test</p> 
      <div> 
      <div id="whatsnewlist"> 
       <p>Yet another test</p></div> 
      <div> 
      </div> 
     </div> 
    </div> 
<div> 

и соответствующие МЕНЬШИЕ:

#maincontent{ 
    .container(); 
    #maincontentarea{ 
     .make-row(); 
     #blogarticles{ 
     .make-md-column(6); 
     .make-xs-column(8); 
     } 
     #whatsnew{ 
     .make-md-column(6); 
     .make-xs-column(4); 
     #whatsnewarea{ 
      .make-row(); 
      #whatsnewheading{ 
       .make-md-column(8); 
      } 
      #whatsnewlist{ 
       .make-xs-column(6); 
      } 
     } 
     } 
    } 
} 

Похоже, хорошая идея иметь .LESS-файл, просто используя бутстрап-микшины для определения структуры, но это не по существу дублирование структуры элемента в файле меньше, который уже определен в LESS. Какой из них более удобен в обслуживании?

Answer 1

Лично я считаю, что использование класса Bootstrap даст вам поддерживаемую структуру. В противном случае вы можете предпочесть более семантическое решение. Обратите внимание, что ваша соответствующая структура html не имеет добавленной ценности и, по моему мнению, не является семантической.

Использование и внедрение Bootstrap в более семантическом образом не всегда будет легко:

Пример проблемы с сеткой, чтобы решить: How can I create multiple rows using semantic markup in Bootstrap 3?. Также Twitter's Bootstrap 3.x semantic mobile grid и особенно обратите внимание на ответ @Gravy (https://stackoverflow.com/a/18667955/1596547).

Также интересно: How to use sass to properly avoid embedding twitter bootstrap class names on HTML