так это могут быть друзьяшки не из комментов, а обычные друзьяшки, чьи аккаунты в ютубе ты знаешь. ВК вон в своей умной ленте показывает комментарии друзей, тут что-то типа того же, если я правильно понял.
Это серьезно ваш мега-пример в котором невозможна кастомизация?
Никто не мешает сделать сетку с двумя, тремя, n типами контейнеров, другое дело, понятия не имею, зачем вам это, я с такими задачми встречаюсь крайне редко.
Вариант а) просто @extend-им нативный контейнер и кастомизируем width на брейкпоинтах, результат получается грязноватым, но вполне рабочим, если у вас скажем один такой выделяющийся контейнер, это переопределение ничего не затармозит.
Вариант б) пишем свой контейнер, самое вербозное что там будет — это наши брейкпоинты, заодно можно их вынести в отдельные переменные.
.row трогать не надо.
.col тоже, там где нужны margin-ы не такие как у нас по умолчанию, @extend-им .col и добавляем margin-ы. Если еще приправить БЭМ-ом, выглядеть будет так:
.block1 {
@extend .first-type-container; //наш собственный контейнер
}
.block1__row {
@extend .row; // Без БЭМ-а это было бы лишним, но если нам необходимо сделать кастомную версию .row, то пожалуйста, в вашем случае в этом нет необходимости.
}
.block1__col {
@extend .col, .col-md-8, .col-lg-4;
margin: 0 20px 0 20px;
}
// допустим нужен второй вид колонок в рамках этого же контейнера с другими margin-ами и размерами - не беда
.block2__col-wide {
@extend .col, .col-md-12;
margin: 0 10px 0 10px;
}
Опять таки, если вы не любите @extend, никто не мешает использовать сетки на миксинах, они работают точно так же, просто конечный CSS другой, даже велосипед автора вам здесь вполне зайдет, да как впрочем и любая сетка на миксинах. Если честно связи между сетками и
например увеличив margin с 10 до 12 пикселей (просто поменяв одну переменную в SCSS)
я вообще не вижу, переменные вы можете использовать и в классах с сеткой.
без привязки к топорным глобальным брейкпоинтам (аля $phone, $tablet, $smallDesktop, $largeDesktop
А как вы без брейкпоинтов делаете адаптивный дизайн, интересно? Если же вы имели в виду, что их недостаточно: вы можете сгенерировать их хоть на каждый пиксель, достаточно добавить в лист нужные цифры и буквы при генерации сетки.
В какие границы вас загоняет сетка? Что, допустим, в той же бутстраповской сетке невозможно кастомизировать? Какой-нибудь практическйи пример задачи связанной с лэйаутом, с которой вы часто сталкиваетесь и которую невозможно решить сеткой будет? Ну хоть сайт покажите, что ли.
Если вы хоть немного знакомы с дизайном, о котором сами говорили, то должны прекрасно знать, что сами дизайнеры как раз таки используют сетки для построения макетов, даже самых кастомных и необычных, у любого сайта, если это не глубоко художественная работа, есть некоторая общая структура, повторяющиеся блоки, система отступов: так же как и вертикальный ритм текста, подобное существует и у блоков. Сетка как раз и помогает сохранять эту структуру и обобщить одинаковые стили применяемые ко многим элементам с целью их расположения на странице.
А вы то сами уверены что не хрень написали? Сетка это не фреймворк. Сетка не создает никакого дизайна, она лишь помогает создавать лэйаут сайта. Вы как считаете, хабр подходит под ваше определение «лендос от васяна для вордпресса»? Так вот, на хабре используется сетка. Устаревшая, построенная на таблицах, но все же сетка, скорее всего самописная, но только вот сетка бутстрапа ничем не хуже, количество CSS говнокода там минимально. А вот как раз самодельные велосипеды на других сайтах зачастую пестрят всякими !important и длинными цепочками классов, которые только тормозят рендеринг и обычно нечитаемы, а если, не дай бог, вам захочется в ней что-то изменить — без кровавых слез обходится редко.
Не отрицаю, конечно, что, вероятно, только мне достаются в поддержку говносайты, а все остальные пишут сетки чисто, аккуратно и читабельно, только вот какой смысл велосипедить при наличии готовых решений?
Что мешает использовать @extend? Я сейчас его использую в связке Stylus + Bootstrap 4 Grid засунутый в отдельный .styl файл, и пока что не встречал кейсов, где бы оно не работало. По сути это решает 80% описанных вами проблем, а остальные 20 решаются путем кастомной сборки сетки, которую можно сделать просто подправив две-три переменные и скомпилировав sass.
Не совсем понимаю, о каких конкретных случаях речь, я говорил о самом банальном сравнении, которое вы дали в начале.На любом тесте, который бы я не находил на jsPerf, цикл выигрывал с довольно большим отрывом. И да, я не делал заявлений, я как раз таки задал вопрос, так как самому интересно.
Никто не мешает сделать сетку с двумя, тремя, n типами контейнеров, другое дело, понятия не имею, зачем вам это, я с такими задачми встречаюсь крайне редко.
Вариант а) просто @extend-им нативный контейнер и кастомизируем width на брейкпоинтах, результат получается грязноватым, но вполне рабочим, если у вас скажем один такой выделяющийся контейнер, это переопределение ничего не затармозит.
Вариант б) пишем свой контейнер, самое вербозное что там будет — это наши брейкпоинты, заодно можно их вынести в отдельные переменные.
.row трогать не надо.
.col тоже, там где нужны margin-ы не такие как у нас по умолчанию, @extend-им .col и добавляем margin-ы. Если еще приправить БЭМ-ом, выглядеть будет так:
Опять таки, если вы не любите @extend, никто не мешает использовать сетки на миксинах, они работают точно так же, просто конечный CSS другой, даже велосипед автора вам здесь вполне зайдет, да как впрочем и любая сетка на миксинах. Если честно связи между сетками и
я вообще не вижу, переменные вы можете использовать и в классах с сеткой.
А как вы без брейкпоинтов делаете адаптивный дизайн, интересно? Если же вы имели в виду, что их недостаточно: вы можете сгенерировать их хоть на каждый пиксель, достаточно добавить в лист нужные цифры и буквы при генерации сетки.
Если вы хоть немного знакомы с дизайном, о котором сами говорили, то должны прекрасно знать, что сами дизайнеры как раз таки используют сетки для построения макетов, даже самых кастомных и необычных, у любого сайта, если это не глубоко художественная работа, есть некоторая общая структура, повторяющиеся блоки, система отступов: так же как и вертикальный ритм текста, подобное существует и у блоков. Сетка как раз и помогает сохранять эту структуру и обобщить одинаковые стили применяемые ко многим элементам с целью их расположения на странице.
Не отрицаю, конечно, что, вероятно, только мне достаются в поддержку говносайты, а все остальные пишут сетки чисто, аккуратно и читабельно, только вот какой смысл велосипедить при наличии готовых решений?