Как использовать Bootstrap, сохраняя семантическую разметку HTML?

Bootstrap предоставляет классы, такие как text-left (Уровни выравнивания), text-lowercase (классы преобразования) и т.д., что совпадает с определением встроенных стилей (не технически, а логически).

В альтернативной методологии, такой как bem, она налагает, что классы должны отражать "физические" блоки и элементы, а также их модификатор (или состояние элемента, например active, current), и любые стили должны применяться только в CSS.

Подход Bootstrap выглядит как плохое разделение беспокойства между структурой и презентацией и противоречит этому W3C Tip для веб-мастеров.

Эта проблема повторяется многими:

Как использовать Bootstrap, сохраняя при этом семантику разметки HTML?

ОТВЕТЫ

Ответ 1

Bootstrap предоставляет mixins, который вы можете использовать. Поэтому вместо добавления классов, таких как col-xs-12 в HTML, вы должны использовать @include make-xs-column(12) внутри блока селектора для элемента. Чтобы добавить строку, введите @mixin make-row.

Ссылаясь на ответ Алексей Морашко, вместо этой неземной разметки:

<div class="items-list row">
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product first</div>
        <div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product second</div>
        <div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product third</div>
        <div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
    </div>
</div>

Вместо этого вы можете использовать:

HTML

<div class="items-list">
    <div class="item">
        <div class="item-name">Product first</div>
        <div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="item">
        <div class="item-name">Product second</div>
        <div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
    </div>
    <div class="item">
        <div class="item-name">Product third</div>
        <div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
    </div>
</div>

CSS

.items-list {
    @include make-row();     
    .item 
        @include make-xs-column(12);
        @include make-sm-column(6);
        @include make-md-column(4);
    }
}

В статье Sitepoint вы можете найти больше примеров микширования Bootstrap - 5 Полезные Sass Mixins в Bootstrap.