Адаптивные психи или как я провел новогодние праздники

[СергейРусков]

Добавлю ложку дегтя, с Вашего позволения, которая, надеюсь, поможет Вам в проффессиональном росте

1. Возможно, ИЕ у меня неправильный, конечно, какой-то, но вот такая ситуация: http://joxi.ru/823pxaOF6agqdA. При чем это 11й.

2. Плюс, добавил бы немного интерактива по ховеру, это хороший тон в верстке, даже если не отображено в дизайне: http://joxi.ru/1A5px3bFKzpyX2. А так не понятно, кликабельно оно, или просто для прикола.

3. Не очень понимаю суть флексбокса тут. Зачем делать флекс, и получать в ие9 вот такую картину http://joxi.ru/1A5px3bFKzpyX2(пускай его и нет в требованиях), если можно сделать все без него, достигнув такого же результата, но при этом все будет более отказоустойчивым? Так и стили попроще станут, и действительно не надо будет писать такие классы для каждого блока индивидуальные, типа index_content--1 .... index_content--over-dofiga. 

4. Также я не приветствую практику hide--phone классов. Хотя, тут скорее к дизайнеру вашему претензия. Html грузится все равно на мобайлах и от того, что вы его просто захайдите, быстрее страница грузится не станет. Ладно еще, если это какие-то декоративные блоки, или якобы отрывок с другой страницы, куда можно перейти и увидеть полную картину предположительно, как тут http://joxi.ru/xAe0DnGfYbLKP2. Но прятать контентые блоки не есть хорошо, я думаю. Получается, вы обделяете своих мобильных пользователей при той же скорости загрузки.

5. По поводу хорошо БЭМ или плохо. Думаю, если вы 100% понимаете зачем он Вам тут, и чем он вам поможет, то хорошо. Если нет, думаю, лучше не использовать. Иначе получите раздутый, громоздкий, медлительный код, который плохо поддерживается.

6. По поводу импортов в цсс. Тут писали. Не знаю, где они были, не нашел, возможно, автор уже исправил. Но если использовать лесс, то общепринятой практикой является компиляция всех лесс в 1 цсс. Импорты соответственно должны прописываться в лесс, а на выходе будет один монолитный цсс и никаких импортов (это уже скорее просто совет).

7. Еще не понял сути вот этого: http://joxi.ru/n2Y5aQ8Ij7wK12. Зачем абсолют-то тут? По карусели: owl не плох, но советую попробовать также slick.

Думаю, хватит о плохом, поговорим о хорошем

1. Порадовали приятные анимации.

2. Использование и внедрение новых технологий типа флекс похвально. Однако, ИМХО, лучше делать это точечно, а не строить на нем лейаут сайта.

3. Также похвально пробовать методологии типа БЭМ. Но советую посмотреть и на другие, типа SMACSS.

Наверное, достаточно

Спасибо за потраченное время!

1. Продолб, спасибо поправил.

2. Ну на кликабельность намекает пальчик, а остальное еще не уточнил дизайнер, я думаю не надо бежать впереди паровоза.

3. Тут важна конкретика, как именно вы хотите добиться такого же результата? float: right, left? Это невозможно, блоки перемещаются абсолютно хаотично. Position: absolute - дичь. JS - это вариант, но более медленный и труднореализуемый. Может я что-то упускаю?

4. http://ruhighload.com/index.php/2009/12/16/optimizaciya-banernoy-reklamy/, если вкратце блоки с display: none загружаются после тех которые видны, так что в принципе страница начинает грузиться быстрее.

5. На скорость работы кода БЭМ не сказывается, вся фишка БЕМа в его поддержке и реиспользовании кода, это будет большой проект, поэтому смысл есть.

6. О импортах разговор шел в разрезе fonts, тут делать так или иначе большой разницы нет, почему - я написал несколькими сообщениями выше.

7. Не могу найти статью, частично про это говорится тут http://stackoverflow.com/questions/11367709/css3-slider-absolute-positioning-inside-relative-div-for-responsive-slideshow. Если вкратце, то при position: absolute элемент выпадает из общего потока, и браузеру проще (меньше ресурсов потребляется) перемещать слайды, так как они не зависят от других элементов.

 

3. SMACCS - давным давно пробовал, там вроде про размещение файлов, не?

Хорошо конечно получилось!

Только один вопрос возник - где искать смысл написания <header><div class="header"></div></header>?

Ошибся при рефакторинге, спасибо.

[yardim]

 

3. SMACCS - давным давно пробовал, там вроде про размещение файлов, не?

Эм, нет. Там скорее про разделение css на несколько основных независимых частей, типа Base, Layout, Modules, State, Theme. Интересная штука, на мой взгляд более логичная, нежели БЭМ. Ознакомьтесь, если интересно. Ну, структура накладывает отпечаток на файловую структуру - это, конечно, тоже

 

 

 

3. Тут важна конкретика, как именно вы хотите добиться такого же результата? float: right, left? Это невозможно, блоки перемещаются абсолютно хаотично. Position: absolute - дичь. JS - это вариант, но более медленный и труднореализуемый. Может я что-то упускаю?

По поводу этого - да. Можно флоатами. Посмотреть тот же бутстрап, там грид весь на флоатах был реализован. Также есть замечательное значение свойства display - inline-block. Мне больше он нравится тем, что элементы не выпадают из потока. 

 

 

 

7. Не могу найти статью, частично про это говорится тут http://stackoverflow...nsive-slideshow. Если вкратце, то при position: absolute элемент выпадает из общего потока, и браузеру проще (меньше ресурсов потребляется) перемещать слайды, так как они не зависят от других элементов.

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

Во-вторых, овл использует css3 трансформации для манипуляций, что позволяет исплользовать аппаратные ресурсы машины, так что с производительностью должно быть все гуд.

В-третьих, вы задаете высоту жестко слайдеру. А если высота картинки изменится? Если контента больше забьется? В общем, задавать высоту в css - это последнее, что стоит делать. Впрочем, как и использовать абсолют.

Ну и наконец, если вы заботитесь о производительности на мобильных, то можно хотябы для них написать эти свойства, а не применять и к дестопу их тоже.

 

 

 

На скорость работы кода БЭМ не сказывается, вся фишка БЕМа в его поддержке и реиспользовании кода, это будет большой проект, поэтому смысл есть.

А я и не говорил, что он влияет на скорость работы Только в том случае, если будет сипользоваться неправильно и повлечет за собой увеличение количества кода - тогда безусловно. Будете грузить лишние байты.

 

 

 

4. http://ruhighload.co...nernoy-reklamy/, если вкратце блоки с display: none загружаются после тех которые видны, так что в принципе страница начинает грузиться быстрее.

Тут вы меня не поняли, наверное. Страница, как ни крути, грузится быстрее не станет https://toster.ru/q/98637. Отрисовываться - да. Но грузится - нет. Все равно вы грузите те же байты текста и ходите запросами на сервер за картинками, когда встречается урл.

 

Edited January 18, 2016 by yardim

[Launder]

Вас интересует именно вёрстка или общее впечатление, подача?

[СергейРусков]

Вас интересует именно вёрстка или общее впечатление, подача?

Именно верстка конечно, впечатления это к дизайнерам

[СергейРусков]

 

 

3. SMACCS - давным давно пробовал, там вроде про размещение файлов, не?

Эм, нет. Там скорее про разделение css на несколько основных независимых частей, типа Base, Layout, Modules, State, Theme. Интересная штука, на мой взгляд более логичная, нежели БЭМ. Ознакомьтесь, если интересно. Ну, структура накладывает отпечаток на файловую структуру - это, конечно, тоже

 

 

 

3. Тут важна конкретика, как именно вы хотите добиться такого же результата? float: right, left? Это невозможно, блоки перемещаются абсолютно хаотично. Position: absolute - дичь. JS - это вариант, но более медленный и труднореализуемый. Может я что-то упускаю?

По поводу этого - да. Можно флоатами. Посмотреть тот же бутстрап, там грид весь на флоатах был реализован. Также есть замечательное значение свойства display - inline-block. Мне больше он нравится тем, что элементы не выпадают из потока. 

 

 

 

7. Не могу найти статью, частично про это говорится тут http://stackoverflow...nsive-slideshow. Если вкратце, то при position: absolute элемент выпадает из общего потока, и браузеру проще (меньше ресурсов потребляется) перемещать слайды, так как они не зависят от других элементов.

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

Во-вторых, овл использует css3 трансформации для манипуляций, что позволяет исплользовать аппаратные ресурсы машины, так что с производительностью должно быть все гуд.

В-третьих, вы задаете высоту жестко слайдеру. А если высота картинки изменится? Если контента больше забьется? В общем, задавать высоту в css - это последнее, что стоит делать. Впрочем, как и использовать абсолют.

Ну и наконец, если вы заботитесь о производительности на мобильных, то можно хотябы для них написать эти свойства, а не применять и к дестопу их тоже.

 

 

 

На скорость работы кода БЭМ не сказывается, вся фишка БЕМа в его поддержке и реиспользовании кода, это будет большой проект, поэтому смысл есть.

А я и не говорил, что он влияет на скорость работы Только в том случае, если будет сипользоваться неправильно и повлечет за собой увеличение количества кода - тогда безусловно. Будете грузить лишние байты.

 

 

 

4. http://ruhighload.co...nernoy-reklamy/, если вкратце блоки с display: none загружаются после тех которые видны, так что в принципе страница начинает грузиться быстрее.

Тут вы меня не поняли, наверное. Страница, как ни крути, грузится быстрее не станет https://toster.ru/q/98637. Отрисовываться - да. Но грузится - нет. Все равно вы грузите те же байты текста и ходите запросами на сервер за картинками, когда встречается урл.

 

 

Не люблю ввязываться в перепалки, но интересно докопаться до истины.

По мелочи, коротко:

По поводу загрузки, я понял правильно, и попытался показать взгляд на него с другой стороны.

Position: absolute - замарачиваться стоит, у меня в хроме на работе тормозит (слабоват компьютер). Все остальные замечания по этому вопросу немного не по теме.

 

И главное:

Я неплохо знаю бутстрап, сверстал пару сайтов на нем давным давно. Как именно перебрасывать элементы из одного row в другой (я еще раз повторю перемещения происходят хаотично)? Лично я знаю 1 способ, прячешь элемент в одном row на определенных разрешениях и показываешь их на другом, это не допустимо, даже лень перечислять причины(seo, нагрузка на пользователя и тд). Вероятно я что-то не знаю о бутстрап? Буду благодарен если объясните. Скажу, что этот вопрос у нас в компании достаточен болезнен, большинство проектов пришло к JS, я решил попробовать что-то новое.

[abrahadabra]

кстати, а зачем на каждую строку row? Можно же один на всё. А внутри уже колдовать всякими offset-pull-push

[yardim]

 

 

я еще раз повторю перемещения происходят хаотично

Что в вашем понимании является хаотично?

 

 

Лично я знаю 1 способ, прячешь элемент в одном row на определенных разрешениях и показываешь их на другом, это не допустимо, даже лень перечислять причины(seo, нагрузка на пользователя и тд).

 

А где у вас элементы-то на сайте перемещаются из строки в строку? По-моему у вас тупо лишние хайдятся, о чем я уже говорил. При чем все поголовно, если я ничего не пропустил. 

Edited January 19, 2016 by yardim

[СергейРусков]

Что в вашем понимании является хаотично?

 

Ну например блок  index-content__27 который на мобильной версии становится после index-content__32 в мобильной версии. Таких примеров вагон, поресайзите и посмотрите если есть желание. В моем понимание хаотично - это беспорядочно, то есть у передвижения блоком нет закономерности (в техническом смысли, продукт менеджеры в этом конечно видят логику).

 

 

А где у вас элементы-то на сайте перемещаются из строки в строку? По-моему у вас тупо лишние хайдятся, о чем я уже говорил. При чем все поголовно, если я ничего не пропустил. 

Вы потеряли контекст, я говорил о вашем совете про использование бутстрапа, и спрашивал как конкретно вы видите его реализацию.

 

кстати, а зачем на каждую строку row? Можно же один на всё. А внутри уже колдовать всякими offset-pull-push

Я сейчас рискну нести полную чушь, так как давно не имел практики с бутсрапом. Вроде как col-**-offset это тупо margin-left, а col-**-push это смещение влево с помощью position:relative и left, то есть если в случае с margin-left блок еще перескакивать на следующую строку в одном контейнере, то в случае с position: relative и left блок вывалится за пределы контейнера, поэтому изменения возможны только в рамках одной строки. Надеюсь я правильно разобрался.

Edited January 20, 2016 by СергейРусков

[abrahadabra]

Я сейчас рискну нести полную чушь

почему же? Всё так.

Но и своих стилей добавлять же тоже можно.

[yardim]

Вы потеряли контекст, я говорил о вашем совете про использование бутстрапа

По-моему это вы потеряли контекст Совет использовать бутстрап? Я не советовал вам бутстрап использовать, Боже вас упаси Я лишь привел пример, а не давал совет

[СергейРусков]

Можно флоатами. Посмотреть тот же бутстрап, там грид весь на флоатах был реализован.

Я уж не знаю как еще от вас какой-то конкретики добиться, о чем конкретно вы тут говорите? Как это может помочь в реализации конкретно этого грида?

[abrahadabra]

В бутстрапе, говорите, грид на флоатах? Это зависит только от вашего желания. Смотрим здесь кое-что интересное: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_grid.scss#L47, https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss%23L27, https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss%23L48

 

И если этим правильно воспользоваться, то порядком крутить уже можно как угодно

Edited January 20, 2016 by abrahadabra

[yardim]

Я уж не знаю как еще от вас какой-то конкретики добиться, о чем конкретно вы тут говорите

Ну, и где вы тут видите совет использовать бутстрап? Я написал, что можно флоатами обойтись, а бутстрап привел лишь в качестве примера ввиду того, что там на флоаты используются в сетке. А что касается конкретики, так что вам, может сайт еще сверстать за вас?

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

Вот с этим товарищем я согласен:

 

 

кстати, а зачем на каждую строку row? Можно же один на всё.

Он говорил вам суть одно и то же, что и я пытаюсь сказать.

Но только он приводит пример именно по бутстрапу, я же не фанат оного, поэтому реализовал бы без него. Суть в том, что вы не разбиваете просто на строки контент, а блоки идут у вас один за другим в контейнере, в общем, так же, как и у вас сейчас. На мобайлах хайдите лишние просто, и все. Так доступно?

Edited January 20, 2016 by yardim

[СергейРусков]

блоки идут у вас один за другим в контейнере.На мобайлах хайдите лишние просто, и все.

А как это поможет с перестановкой блоков местами? 

В бутстрапе, говорите, грид на флоатах? Это зависит только от вашего желания. Смотрим здесь кое-что интересное: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_grid.scss#L47, https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss%23L27, https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss%23L48

 

И если этим правильно воспользоваться, то порядком крутить уже можно как угодно

Так это же и есть flexbox модель.

Edited January 20, 2016 by СергейРусков

[yardim]

А как это поможет с перестановкой блоков местами?

Да, сейчас увидел, что у вас блок index_27 меняет позицию. Согласен, тут либо JS поможет, либо flex.

[abrahadabra]

это же и есть flexbox модель

она самая. А во флексбоксе, как известно, элементы местами переставляются очень легко.

Так что вот вам решение на бутстрапе простое и красивое.

[СергейРусков]

 

это же и есть flexbox модель

она самая. А во флексбоксе, как известно, элементы местами переставляются очень легко.

Так что вот вам решение на бутстрапе простое и красивое.

 

Вы слишком буквально меня поняли У меня тоже решение на флексбоксе, тут разговор шел, что можно решить все float'aми Но спасибо, это интересно.

[abrahadabra]

Да от начальной темы тут ушли сильно в сторону, бутстрап склонять стали во все стороны сразу. А я бутстрап очень сильно люблю, он очень часто здорово упрощает работу, но только знать его хотя бы немного надо. Вот и рассказываю, доношу, так сказать, до сведения общественности, в частности, что грид там не обязательно на флоатах