Возможна ли адаптивная разработка сайта без использования большого количества классов?

Question

[Legioner911]

Всем доброго времени суток!
Гуляя по просторам интернета, я периодически просматриваю код страниц сайтов на которые захожу. И заметил одну интересную особенность, которая меня поставила в тупик в вопросе про адаптивный дизайн. Вот к примеру в bootstrap, при разработке адаптивного сайта, с классами в html коде получается что-то вроде этого

<div class="row"
<div class="blocks col-xs-12 col-sm-12 col-md-6 col-lg-3"></div>
<div class="blocks col-xs-12 col-sm-12 col-md-6 col-lg-3"></div>
<div class="blocks col-xs-12 col-sm-12 col-md-6 col-lg-3"></div>
<div class="blocks col-xs-12 col-sm-12 col-md-6 col-lg-3"></div>
</div>

Даже если генерировать просто адаптивную сетку, не используя фреймворк, то схема по использованию классов остаётся та же. Если использовать БЭМ, то вообще получится море текста из классов.
Но существуют же адаптивные сайты без использования такого количества классов. Даже встречал сайты где файл стилей назывался bootstrap.css .

Внимание вопрос.
Товарищи профессионалы, подскажите пожалуйста каким образом достигается данное сокращение количества классов без потери адаптивности сайта? Может другие схемы, не сетка? Может как-то с помощью JS ?

Заранее спасибо за ответ.

Answer 1

[Viktor Vsk]

col-xs-12 col-sm-12 col-md-6 col-lg-3 - это внутренняя кухня бутстрапа. Разработчики подразумевают, что вы используете препроцессоры и с их поомщью формируете классы,типа:

.article-row
  @extend .row
.article
  @extend .col-xs-12, .col-sm-6, .col-md-4, .col-lg-2

...

<div class='article-row>
<article clas='article'>
</article>
</div>

Comments

[Legioner911]

Ах вот оно что )
Понял, в таком случае это вполне логично.
Подскажите пожалуйста, вот я только что попробовал ваш код в Less, но у меня он отказывается компилиться, ошибка на второй строчке. В чём может быть проблема?
Может у вас есть какие то ссылки, материалы на этот счёт ? Заранее благодарен за ответ.

[zugo]

Legioner911: Потому что это код на SASS, а не на LESS

[Михаил]

Legioner911: в пример вам привели sass, в less должна прекрасно работать конструкция
.article-row {
.row;
}

[Legioner911]

Михаил: Странно, но ваш пример тоже выдаёт ошибку при компиляции на второй строчке...

[Viktor Vsk]

Legioner911: Код я привел абстрактный, забыл написать, что это SASS. Возможно, нужны дополнительные модули для препроцессоров. Например, в SASS из коробки, кажется, нет миксина @extend. Нужен compass-style.org
В LESS может быть что-то аналогичное. Тут, вроде, описан примеры синтакси lesscss.org/features/

[Legioner911]

Всё прекрасно заработало!
Спасибо огромное всем за такие полезные советы и ответы! :)