Спасибо за чрезвычайно огромный отклик на видео. Пару моментов из видео, о которых хотелось бы уточнить: 1. курсор поинтер - да, это спорная тема, по факту у кнопок он может вызвать проблему. Но тут уже все проверяется лишь опытом, метриками, оценкой поведения пользователей. 2. верстка дивами (в том числе и заголовков) - не понимаю, почему многие пишут про дивы, ссылаясь то на стоимость работы, то на СЕО. Заголовки - крайне важная часть сайта и с точки зрения доступности. Изучите это - это важно 3. Использование импортант - да, возможно есть еще кейсы для его использования, но предостерегайте себя, что бы не писали)
2 - да сколько угодно оно может быть "важно" и для сео, и для доступности. Все знают, что переходить улицу нужно по переходу и на зелёный свет. Однако зачастую люди нарушают это. Почему? Кроме наплевательства на правила, есть ещё и спешка при длинном светофоре, и отсутствие машин ночью, когда по уму отключить бы его. К чему я это? Делать заголовки заголовками правильно по ряду причин, и большинство в курсе. Но именно факторы типа бюджета решают в пользу div.title Добавить div.title и пару css строк зачастую куда проще и быстрее, чем: 1) Изучить какие именно заголовки уже есть на странице в том месте, куда пойдёт новый блок, какое место этот заголовок будет иметь в условной иерархии, какую циферку поставить после h 2) Долбаться с ресетом уже существующего стиля этого условного h3. У div по умолчанию будет куда меньше стилей, поэтому та-дам, использование div делает как разработку, так и код на выходе проще и понятнее. Допустим по заданию заголовок у нашего блока в том же шрифте, что и текст, но болдовый. Тогда куда понятнее .my-block div.title {font-weight: bold;} чем .my-block h3 {font-family:другая; font-size: 14px; margin-top: 1em; padding: 0; color:black; } .my-block h3:before {content: ""}. Почему title болдовый? Это тайтл, его нужно выделить в блоке my block, в требованиях к внешнему виду указано, что заголовок этого блока должен быть болдовым. Почему у h3 в my block именно этот шрифт именно этого размера, задан именно такой верхний отступ, убиты паддинги и задан цвет, да ещё и запилен пустой before, если в требования было только то, что заголовок должен быть болдовым? А вот хрен его знает. Скорее всего, потому что где-то в системе у h3 был до того задан другой шрифт, цвет и отступы, и была какая-то декоративная фигня через before. Или в какой-то момент дизайнер решил что-то подвинуть у всех h3, и из-за этого конкретно наш h3 тоже пострадал. Это геморрой. Да, если пилишь страницу с нуля, то у тебя своя иерархия и свой сброс, тогда и проблем с наследованием стилей заголовков не будет. Но зачастую задача выполняется в рамках существующей написанной до тебя инфраструктуры, и вопрос div.title VS h3 - это вопрос "потратить ли на эту фигню полчаса-час или пять минут". А это уже вопрос бюджета, сколько ресурсов у тебя есть на это счастье. Так что div.title - это что-то вроде important: да, это плохо, но зачастую это проще, быстрее и понятнее, чем более "правильный" подход.
@@maxgraph Да, неправильно :) Точнее так: да, "неправильно". Правильно-неправильно, хорошо-плохо зависит исключительно от того, чего хотим добиться. Если цель - всегда писать наилучший код, то конечно да, неправильно. Если цель - поставить нечто, соответствующее невысоким требованиям заказчика, оставаясь в рамках ограниченных ресурсов, то тогда пойти по такому пути будет правильно. Плохо как раз будет набрать таких вот "правильно-неправильно" в проекте, решить всё сделать максимально хорошо, и в итоге либо просрать сроки, либо из-за такой ерунды лишить себя выходных, своих близких внимания, и вообще чего угодно, что требует времени, которое будет потрачено на достижение условного идеала, который и не требовался. Другое дело, что, как в случае с импортантом, использование этой штуки в общем случае нежелательно. И если бы видео называлось "37 ошибок начинающих верстальщиков", то тут мой аргумент померк бы - начинающих нужно учить общему случаю, а уж в частностях со временем и с опытом сами разберутся. Но название видео ничего не говорит о новичках. А не-новичкам уже можно давать нюансы.
А, да, есличо - видео в целом оч хорошее :) Просто, на мой взгляд, догматизм в чём бы то ни было вреден, тут как раз именно его я и углядел, об этом и решил поболтать в комментах =)
@@covovker div.title это совсем не делает верстку понятнее. Даже зайдя в html проще ориентироваться если не дивы а семантические теги! Время? что для div прописать font-weight: bold, что для заголовка font-weight: normal. на время это не влияет. А отступы и размер шрифта - все равно нужно писать свои в любом случае. где потеря времени? Это все отговорки!!!
Отличное видео! Очень полезное. Не смотря на то, что из всех ошибок указанных здесь мне подошли только пару, многие вещи я делала правильно только потому что так надо, но не понимала почему так надо. Теперь буду работать более осознано. Сделала себе несколько пометок. Спасибо, Максим!
Как верстальщик вставлю и свои 5 копеек Абсолютно полностью согласен со всем, что говорится в видео, но есть пару очень важных но - время, которое даётся на задачу, прихоти заказчика и неумение заказчика говорить с дизайнерами Расскажу пару ситуаций 1) Был проект, где нужно было делать типовые лендинги с почти одинаковым контентом (вёрстка почти не изменялась) и менялся только главный экран. Изначально сказали сделать 2 лендоса - сделал, давалось 4 часа, всё окей. А потом прилетало ещё по 2 лендинга в неделю и время на них давалось часа полтора от силы. Именно из-за этого я тупо брал старую вёрстку, вешал дополнительный класс и перебивал всё, что мне нужно стилями. Тут тупо дело времени, давалось бы его больше, такого говна бы не было, но получается вот так. Как мне сказали: работает - значит заебись. 2) Верстал один макет, где использовались декоративные квадратики над тайтлом. В чём прикол? Прикол в том, что дизайнеру не захотелось в фотошопе это всё разделять и он тупо скинул макет, где этот блок был джипегом, классно, да? Ага, вот поэтому я и делал дохера спанов, чтобы были эти квадратики. Нет, я конечно могу открыть фигму и потратить пол часа, чтобы эти квадратики нарисовать. Но что я скажу заказчику? Что я за 5 долларов рисовал ему в фигме пару квадратиков?) 3) Делал как-то раз фиксированную высоту для текста. Ну а что? Заказчик же прям так и хотел, чтобы текст был именно такой высоты и всё. И ничего ты ему не докажешь, сиди и делай, тебе платят и не выёбывайся. Аргумент - видел у многих такую ошибку - не аргумент вовсе, ибо бывают разные ситуации и именно в той ситуации такого было не избежать. Или ты теряешь деньги, или ты пишешь говнокод, который требует твой заказчик.
Это все верно) я рассматривал все эти ошибки с точки зрения начинающих, тех, у кого я ежедневно проверяю работы, либо смотрю на стримах И там нет ни единой причины эти ошибки совершать. А вообще да, бывает всякое, конечно.
Здесь один важный нюанс . Всем не угодишь и не научишь .и нк надо ,а вот писать хороший код будьте любезны знать есть разные клиенты да и медаль на груди не помешает..
Стал учить верстку самостоятельно. Нашел инфу про плохой код и стал в этом разбираться. Вижу засада многому научиося но приступать к верстке не могу пока не раставлю акценты хотябы основные остальное со временем прийдет Не хочеться научиться плохому коду и затем переучиваться .Спасибо за вашу информацию она даст правильное напрввление новичкам и мне однозначно прорыв в светлое будущее.
Нельзя понять почему код плохой не написав его пару сотен раз) Даже самая простая концепция компонентов и переиспользуемых блоков состоит в том что просто надоедает в сотый раз создавать один и тот же элемент в разных местах и думаешь такой "хмм, вот бы написать этот блок один раз, а менять его стили уже только там где он отличается"
Макс, спасибо большое за видео!!! Очень познавательно. Единственное, хотелось бы видеть и как можно исправлять ошибки. Так как в основном смотрим мы, начинающие верстальщики.
Добавлять cursor: pointer для кнопок спорная практика, в операционках этого нет и в вебе по-умолчанию этого нет, кнопка должна выглядеть так, чтобы было понятно, что её можно нажать, если есть сомнения, то можно продумать для неё hover. Относительно недавно про это была статья, можно нагуглить То, что сказано про заголовки было актуально для HTML 4, в HTML 5 каждая section, article и некоторые другие теги создают новый контекст и значит заголовки должны начинаться снова с h1, для проверки правильной иерархии нужно пользоваться HTML 5 Outliner Также не все заголовки из макета стоит вносить в иерархию документа, в футере тоже могут быть заголовки для наборов ссылок, но это не значит, что они должны быть заголовками, сделать их через div логично и не засоряет иерархию
Заголовки дивами - даже звучит странно, может просто дивы? По поводу h1 - спорно, опирался на мнение более опытных Про курсор - да, вполне согласен с вами
По пойнтеру соглашусь - архаизм, но что, так сложно прописать 1 строчку в начале css? *a,button,input[type="button"],input[type="submit"]{cursor:pointer;}* H1 на странице должен быть единственным, в секциях, как правило, начинаются с h2, так как ветвление. h1 - это заголовок страницы, а не секции. Есть, конечно, исключение - когда при скролинге статьи сменя.т друг друга. В футере не может быть заголовков. Если Вы про меню или карту сайта (ссылки на все разделы), то они делаются списками, а не дивами и, уж тем более, не заголовками.
Поинтер обязателен. Сайт делается не для эстетов и ценителей тонкостей в верстке. Юзер привык к некоторым паттернам взаимодействия с интерфейсами в интернете, и поинтер - один из основных. Пока нет предпосылок к смене парадигмы.
Хорошее видео но для людей которые шарят, например на 30-й минуте, " не делайте фиксированную высоту" а какую делать не сказали, это мне повезло я вчера почитал о мин и Макс высотах. Новички же тоже смотрят
як новачок скажу що таким відео є місце у навчанні правильної верстки сайтів но новачки не всіх нюанісів знають і ваші зауваження візьму до уваги дякую за хороший урок)
Я, блин, когда только начал веб разработку - транслитом сверстал первый сайт, начал натягивать на cms, запутался с этим всем, понял свою ошибку и переверстал 🤣 Больше я так никогда не делал. Это был далекий 2001 год, вëрстку я осваивал самостоятельно. P.S. уже давно не занимаюсь веб разработкой, ушел в мобильные приложения, но видео Макса смотрю с удовольствием.
Спасибо! Принял к сведению. Некоторые мои ошибки затронуты в видео) Кстати, жаль что Макеев В. перестал видео публиковать (оно и понятно). Тоже нравится его подача
По поводу пикселя есть небольшая поправка, пиксель в CSS это не физический пиксель на экране, это некая площадь заполненная некоторым количеством физических пикселей, поэтому возможно указывать дробные значения пикселей, но лучше конечно так не делать. А вообще благодарю за видео, очень познавательно, 95% информации знал, но вот все же почерпнул для себя что-то новое.
Сложносоставной заголовок(состоящий из нескольких шрифтов в несколько строк + иконка, например) как еще обозначить если не div.title? Все индивидуально. Так же как и вложенность стилей. Если писать с использованием препроцессора sсss - сам препроцессор к этому располагает. Еще! Использование нецелочисленных значений в иконках - это обязательно если так сделано в прототипе, графические дизайнеры будут ненавидеть вас за ваш перфекционизм, для них сверх важны выверенные толщины глифов, просвет и другие параметры, поэтому заниматься корректировкой дизайна верстакам точно не следует. А что следует - почитать книги о типографской верстке, верстке журналов, буклетов и баннеров. Эти знания точно дадут представления как должен перестраиваться сайт, какие отступы делать, и почему правило близости так важно. Непонимание основ самой верстки - сверхчастая проблема всех верстаков, я бы ее поставил во главу угла всего списка.
Иконки делаются фоном (или через свг). И тот, и другой метод не помешает заголовку, так что нет, див тут остается ошибкой. Вложенность стилей - ошибка по БЭМ, препроцессор может преобразовать свой вложенный код в обычный, без вложенностей.
"div" с классом "title" это нормальная практика. Так что не нужно брать это за ошибку. Но нужно понимать где можно этот "div" применять, а где реально требуется семантический тег для заголовка.
Я так не считаю. Если пишешь title - значит ты уверен что там заголовок, иначе зачем так называть. Ничего другого, кроме как заголовок, с названием title быть не может.
Тогда можно столкнуться с проблемой похуже, если использовать див в макетах, где заголовки тонкие. потом поставят заголовок и будет жирно. А если писать изначально тонкий шрифт - тогда смысл от дива?))
Подскажите, а почему псевдокласс visited ведет себя как hover? Отдельно hover работает, но стоит добавить visited с другим цветом фона, при наведении мыши показывается цвет не hover-а, а visited и когда мышь уходит выделение пропадает
important очень спасает, когда есть шаблонные настройки, при чем в огромных сложных темах, и клиент просит прям вот только один элемент поменять. Вот все кнопки желтые, а тут я хочу красную. И тогда приходится конкретно для этой одной кнопки перебивать все стили, иногда ни класс, ни id не спасает, только important Я как сеошник готова очень сильно поблагодарить за поднятие темы заголовков!
Beautify хорошо работает для вёрстки, но плагин Prettier универсальнее, сложнее и лучше. Лично я использую Prettier+, который ещё во фреймворках чуть лучше работает.
По поводу class="title" у div. Могу говорить только за себя, может это поможет понять почему так могут делать другие. Пока я учусь верстать, и сейчас у меня это делается на автомате. Я знаю что все h это блочные элементы, но поскольку в заголовках пишут текст, то в мозгу сразу по привычке срабатывает скрипт "так, я сделал текст, надо сделать для него блок чтоб было больше возможностей для управления: а вдруг в будущем для заголовка понадобится какое нибудь выравнивание не совсем по центру с помощью margin, или вообще position: absolute(тогда как раз родительскому блоку удобно будет дать position: relative), да и в целом уже мышление сформировалось блочное, а текст без блока в него как-то не вписывается; в общем на всякий случай пусть у заголовка будет родительский блок, чтоб потом не париться с его позиционированием и прочими проблемами". Тоесть мозг таким шаблоном мышления привык уменьшать себе работу в будущем. И при этом я понимаю что можно прописать просто display: block/inline-block и это избавит от ненужного div, но.. привычка появилась быстро. А видео годное, спасибо. С некоторых пунктов орнул, какие-то знал, над какими-то задумался. Другие так подробно не рассказывают, а гуляют по поверхности типа просто ".. называйте классы правильно. Далее другая ошибка - проверяйте вёрстку на w3c. Далее другая ошибка .."
Поясню. div.title используется тогда, когда нужно стилизовать реальный заголовок, но скрыть его от индексации, а где-нибудь в другом месте разместить индексируемый заголовок. Проще говоря, div.title и h* - это не одно и тоже и нужны они оба. Если есть div, но нет h, то ошибка не в том, что div лишний, а в том, что h нет.
Привет. Спасибо за видео. Подскажи, так нормально писать классы по бэму (интересуют классы типа benefits__card-title benefits__card-desc benefits__card-more и тд, можно ли писать так, добавляя в конец дефис и новое слово)?
Benefits of Odigo
Welcome to Odigo!
Jump off balcony, onto stranger's head. Chase ball of string hide when guests come over.
LEARN MORE
Your Personal Japan Guide
Jump off balcony, onto stranger's head. Chase ball of string hide when guests come over.
LEARN MORE
Promoting Local Businesses
Jump off balcony, onto stranger's head. Chase ball of string hide when guests come over.
Ну естественно добавляя div ты проверяешь работает ли без него...проблема в том, что почти всегда не работает. А вообще все это чисто субьективно, потому что есть несколько способов сделать одно и тоже и один считает правильным такой вариант, а другой другой. Например на некоторых курсах наоборот учат вкладывать ссылку в кнопку когда это нужно и дают читать статьи в которых приводится обоснование правильности таких действий...в этом и есть главная проблема, есть много путей и нет единого стандарта
Я не уверен для кого снято это видео, но тут 70% ошибок можно оспорить. Табуляция? Следующий верстальщик просто в редакторе подгонит в 2 клика табуляцию под себя. Табуляция важна для бека? Спрашиваешь как он любит после завершения тем же углифаем ровняешь все под его вкус. Кириллица, длинные названия или что-то еще с названиями классов? Любой препроцессор css решает проблемы с вложенностью, длинною и прочим. А если класс назван "korzina" то это плохо, а если spa то уже класс "ghhdduus" это уже принято, так? Да, после ухода с флоатов перестали у блоков фиксовать высоту так как исчезла проблема зацепа блоков. А как же выпадающие списки с фиксированными высотами или их аналогами max-width для анимации? Фиксированная высота скажем в 100vh для мейн экрана? !important плохо согласен, но когда слик или овл идут со своими стилями а их надо поменять под себя, как перебить их стиль? Искать в их файлах название класса, считать вес класс тег а потом у себя дописывать макарон что бы перебить? В принципе для новичков полезная инфа, но деды то знают что как ни крути, а что-то да надо костылем подпереть)
Табуляция тоже важна. Например ты сделал сайт на WP. А заказчик или другой программист решил в админке через Внешний вид - Редактор изменить что-то, а там табуляция нарушена...
Привет! Считаю, что для простых (временных) решений для бизнеса, типа тестирования продаж продукта - пойдет. Но адекватный, рабочий, доступный сайт с его помощью создать невозможно. Только "заплатку")
Спасибо, узнал много нового. Но предположим есть модальное окно в которое нужно запихнуть много контента. Если не указать header, то все расползется за пределы экрана. Как быть в этом случае? Я бы ставил header + overflow
это универсальный тег, можно вообще одними дивами верстать. Бывает ситуация когда нужен заголовок, а теги не уместны . Разные ситуации бывают, а так да, думать надо что пишешь в классах. БЭМ - в помощь.
@@maxgraph - дружище, ты тему скользкую в этом видео выложил. Лучше подумай, да по делу сделай видос. Того, чего нет в интернете в русскоязычном, та инфа которую трудно найти новичку (обычно она разрознена, ее трудно собрать), а эту хрень на каждом сайте по верстке обсуждают знатоки. И это только твое мнение. Контент делай полезный, интересный, что бы было за что цепляется. Всех благ тебе.
@@maxgraph , ты решил чисто подметить, мол смотрите чего я узнал. Твоя инфа и гроша ломоного не стоит, на каждом заборе пишут об этом, а бы чего сегодня бы дать на выкорм подписчикам. Одна вода... Про кириллицу вспомнил)), зачем? Неужели у тебя такие подписчики которые классы пишут кириллицей?? Ставлю диз. , за чрезмерную самоуверенность и снобизм. Ладно ,я скорее всего ошибся каналом однозначно. Изживите ребята что насрал в ваш огород, не смог пройти мимо, когда увидел очередного проповедника html)) и потратил время еще. Ребята, мой вам совет, нахер вам эти проповедники не нужны, самое важное это практика. Начинайте делать уже сейчас..
Вы абсолютно не в теме, видимо. И стоит погуглить, что такое самоуверенность и снобизм :) Делайте верстку как хотите, но писать в комментариях неправильные суждения не надо, пожалуйста.
Хотел узнать, учусть верстать сайты и столкнулся с такой проблемой что не знаю, как назвать переменную. И я подумал, а что если взять ключевое слово у меня в секции говорилось про профессора, я взял эту переменную и делал с БЭМ. Так тоже можно?
Вы на поняли :) Я специально не рассказываю все ошибки досконально) это готовит к реальной работе, это заставляет что-то поискать, подумать. Это важно)
да тут не "допустим". А точно не надо)) min-height можно использовать, но обязательно в связке с паддингами, чтобы контент не имел возможности "прилипнуть" к краям. min-width - то же самое.
@@maxgraph Понял, просто бывают моменты когда надо сделать две кнопки, которые в одном ряду однаковым размером, но проблема в том, что у этих кнопок разный контент и каждой свой паддинг, получается
@@yura_8952 1rem = font-size of root element, т.е если мы задаем для html font-size 10px или более правильно 62.5% это 10 / 16 (размер шрифта браузера по умолчанию), мы можем только изменив размер шрифта в html автоматически "повлиять" на всю верстку.
Здравствуй, есть вопрос, мне попал сайт в котором все значения заданны через vh/vw, правильный ли это подход? Я думаю, что нет, но я могу ошибаться. Это попадает под проблему адаптива, кажется.
Ролик Хороший, но не совсем согласен, с title. И еще хотел спросить, всегда нужно подключать normalize.css я просто его ни когда не использую, у меня в других браузерах всегда более или менее норм отображается.
Делаю div.title > h1,2,3.. мне просто тимлид говорил что текстовым элементам к примеру в карточке товара лучше не задавать классы. И другие видео уроки смотрел тоже такое видел.
@@maxgraph обычно текстовым элементам не дают классы когда верстка натягивается на CMS, в этом случае для текста делается обертка и класс дается именно ей
В целом очень интересно, есть штука которую на вооружение взял из урока, но я совершенно не согласен с темой - "Проблема переполнения на сайте" ведь есть четкие лендосы с оговоренным дизайном, которые никто не будет менять, зачем вот как в примере делать то 6ть блоков, то 8мь? ведь дизайн тогда весь будет меняться, а не только в одном месте это как будто двойная работа. Я еще понимаю когда есть страницы которые заранее подразумевают гибкие размеры, к примеру картинки на карточки товаров или текст для статей блога, там это надо учитывать, но здесь это по-моему трата времени. Если нет вы апологет другого, покажите примеры где это реально может пригодится и это надо учитывать.
Лично я не вижу никакой двойной работы в этом. Просто научиться это сразу учитывать и все. Время не увеличится А насчёт чёткого дизайна - отчасти я согласен, но сам попадал на штуки типа "тут короче у нас ещё преимущества появились, закинь-ка", и что-то в таком духе :)
@@maxgraph так там будет с каждой секцией так. Вот если типичный случай для секции - это картинка с одной стороны и текст(или аккордион) с другой, тут кроме как скрол сделать ничего в голову не приходит, что бы доп текст верстку не сломал. Или еще такой момент, вот есть секция на ней те же 6ть блоков, но есть картинка на фоне, как здесь быть? Было бы круто увидеть видео с подобными случаями и как с ними справится, я думаю это полезно.
Максим, я вот учусь на скиллбоксе и у меня появляются спорные моменты в вёрстке, и я не знаю даже с кем посоветоваться. А в телеге не всегда подскажут то, что хотелось бы Есть ли какие-нибудь преподаватели, которые отвечают хоть более-менее быстро, а не по 2 дня, как это делают проверяющие? Я просто каждый день верстаю и с чем-то сталкиваюсь.
important бывает нужен когда кастомизируешь стили какого то плагина, чтоб перебить базовые, а так по сути он не нужен, если это не легаси код 90-х годов на миллион строк
@@maxgraph я просто был на фриланс бирже и смотрел на работы топ фрилансеров, может, даже знаете одного из них фрилансер по жизни и я заметил что они все время делают с помощью имг и в редкости беком
Нельзя оставлять пользователей, которые используют клавиатуру, без возможности пользоваться сайтом. Оутлайн помогает понять, где пользователь находится, если использует клавиатуру.
Недавно смотрел разбор верстки магазина Amazon, так там такое понаписано, сплошные дивы, инлайновые стили, наименование классов вообще выходит за рамки логики, в наименованиях классов повсеместно встречаются octopus (осьминог), каким боком тут осьминог вообще не понятно.
Полностью согласен. Видел некоторые мощные ресурсы, которые не сдвинешь с первого места в выдаче, а они являются порталом. А по опыту, скажу так - на портале пром юа вычислил некоторые косяки и предъявил, на что мне сказали - умник, сделай своё, а не рассказывай. Вот и получается что этот портал хрен чем сдвинешь, кеш они зарабатывают многомиллионный. И хоть правильно ты умеешь писать, хоть транслитом - пофигу. Бабло у них, а не у тех, кто рассказывает как надо правильно.
Я же с вами не спорю)) Платят и Слава Богу, искренне за вас рад. Просто делюсь с вами тем, что видел за свою практику. Сам и дизайн делал, и верстал, и писал свой движок, и местами использовал транслит. Результат - уровень загрузки 100 и 100, а рекламное агенство (для которых создавал и раскручивал сайт) остались ооочень довольны, потому как и высокочастотные запросы висят уже четвертый год титаново.
Мои пять копеек по поводу !important, например если юзаете библиотеку SlickSlider то она там динамически css добавляет , всякие translate, margin, которые вызывают проблемы с позиционированием и для этого например можно юзать !important чтобы приоритет этим стилям перебить, в остальных случаях !important очень плохо как и сказал Макс!
@@maxgraph может неправильно написал, попробую подробнее если интересно, там сложная схема когда два слайдера пытаются синхронизироваться и там какой-то баг со стилями происходит, SlickSlider навешивает свои стили на второй слайдер при прокрутке первого чтобы синхронизироваться , добавляет translate, margin инлайново который портит стили , так как специфичность у инлайновых стилей выше то мои стили не срабатывают и приходится important добавлять
31:33 а вот так как ты делаешь тоже нельзя делать. правильное написание тут INHERIT, а не дублирование: button, input, select, teaxtarea, optgroup { font-family: inherit; }
это конечно хорошо. но! далеко ходить не надо, открыли ютуб и там класс - ytd-video-secondary-info-renderer. и тд.. и т.п.. приходишь в одну компанию, там так верстают, в другую, там этак. на деле почти не на что оно не влияет, а когда не лендос с фриланса а проект на только одного файла css из 8к строк,вся эта красота и выпендреж улетает в трубу! хороший верстальщик не тот, кто умеет классы именовать как там кто-то придумал.)) хороший верстальщик тот, кто делает так, что потом по сто раз не надо править и делает это быстро! хорошие верстальщик тот, кто умеет реализовать сложнейшие задачи дизайна! а не классы по мануалам называет.)) на деле, пример уже показал (отройте исходник данного ресурса), болт все клали на вашу красоту! я еще ни разу не обращал внимания, как там классы названы или какая структура когда правил или дорабатывал сайты с 2-5к страниц. открыл диспетчер, посмотрел что за что отвечает, там все само выровнено, скачал нужный файл, через поиск нашел что тебе надо, добавил, закрыл! вот как оно в реальности происходит.))) но если есть время, можно заморочиться и страдать херней. даже на стройке большинство стандартов приходиться игнорировать, ибо тогда хрена что построишь! и так везде!)))) печально, но вот такая она реальность.))) но посмотреть было интересно.
Ютуб может себе позволить, ибо это всемирно-известный сайт, и он собирается на технологиях, где даже классы скорее всего сами не пишут :) Ну и собственно чем плох данный класс? длинноват, но в целом норм.
(23:19) Про кириллицу в аттрибуте инпута name вообще непонятно, зачем там кириллица если этот атрибут будет обрабатывать сервер при отправке формы, а на сервер приходит значение этого атрибута как ключ массива. А на почту отправить можно в каком угодно виде, это тоже делает сервер. Нипанятна
Мы, верстальщики, часто используем простую схему отправки на сервер - через Name и value просто передать их в php и отправить функцией mail. Получаем name="Имя", value="Максим" на почту прилетает Имя: Максим. Все логично)
@@maxgraph Ну, так-то, отправка почты - это масштабная серверная задача, особенно, если заказчик крупный. Там проводится целый ряд обработок. Предложенная Вами обработка хороша только для демонстрации фирме-однодневке (простым foreach в одну строку). Но стоит появиться необходимости добавить отправку файлов, фильтровать и распределять отправку или формировать сложные макеты писем и этот примитив уже никому не нужен. Так что если уж делать, то делать качественно сразу. Я вот уже много лет использую самописный мощный функциональный обработчик, использующий атрибуты name по прямому назначению. А если вы делали видео для новичков, то не стоит приучать их, что "кириллица - это норм".
@@maxgraph на другом канале разбирали карточку товара на этом сервисе... (Александр Лущенко)... я так не верстал даже когда изучал html, и о семантике даже не слышал. Но что самое интересное, сам очень редко, но допускаю некоторые ошибки описанные в вашем видео))) а стаж верстки более пяти лет, кстати спасибо за видео напоминалку)))
Спасибо за чрезвычайно огромный отклик на видео. Пару моментов из видео, о которых хотелось бы уточнить:
1. курсор поинтер - да, это спорная тема, по факту у кнопок он может вызвать проблему. Но тут уже все проверяется лишь опытом, метриками, оценкой поведения пользователей.
2. верстка дивами (в том числе и заголовков) - не понимаю, почему многие пишут про дивы, ссылаясь то на стоимость работы, то на СЕО. Заголовки - крайне важная часть сайта и с точки зрения доступности. Изучите это - это важно
3. Использование импортант - да, возможно есть еще кейсы для его использования, но предостерегайте себя, что бы не писали)
2 - да сколько угодно оно может быть "важно" и для сео, и для доступности. Все знают, что переходить улицу нужно по переходу и на зелёный свет. Однако зачастую люди нарушают это. Почему? Кроме наплевательства на правила, есть ещё и спешка при длинном светофоре, и отсутствие машин ночью, когда по уму отключить бы его. К чему я это? Делать заголовки заголовками правильно по ряду причин, и большинство в курсе. Но именно факторы типа бюджета решают в пользу div.title Добавить div.title и пару css строк зачастую куда проще и быстрее, чем:
1) Изучить какие именно заголовки уже есть на странице в том месте, куда пойдёт новый блок, какое место этот заголовок будет иметь в условной иерархии, какую циферку поставить после h
2) Долбаться с ресетом уже существующего стиля этого условного h3. У div по умолчанию будет куда меньше стилей, поэтому та-дам, использование div делает как разработку, так и код на выходе проще и понятнее. Допустим по заданию заголовок у нашего блока в том же шрифте, что и текст, но болдовый. Тогда куда понятнее
.my-block div.title {font-weight: bold;}
чем
.my-block h3 {font-family:другая; font-size: 14px; margin-top: 1em; padding: 0; color:black; }
.my-block h3:before {content: ""}.
Почему title болдовый? Это тайтл, его нужно выделить в блоке my block, в требованиях к внешнему виду указано, что заголовок этого блока должен быть болдовым. Почему у h3 в my block именно этот шрифт именно этого размера, задан именно такой верхний отступ, убиты паддинги и задан цвет, да ещё и запилен пустой before, если в требования было только то, что заголовок должен быть болдовым? А вот хрен его знает. Скорее всего, потому что где-то в системе у h3 был до того задан другой шрифт, цвет и отступы, и была какая-то декоративная фигня через before. Или в какой-то момент дизайнер решил что-то подвинуть у всех h3, и из-за этого конкретно наш h3 тоже пострадал.
Это геморрой. Да, если пилишь страницу с нуля, то у тебя своя иерархия и свой сброс, тогда и проблем с наследованием стилей заголовков не будет. Но зачастую задача выполняется в рамках существующей написанной до тебя инфраструктуры, и вопрос div.title VS h3 - это вопрос "потратить ли на эту фигню полчаса-час или пять минут". А это уже вопрос бюджета, сколько ресурсов у тебя есть на это счастье. Так что div.title - это что-то вроде important: да, это плохо, но зачастую это проще, быстрее и понятнее, чем более "правильный" подход.
@@covovker и неправильно. (=
@@maxgraph Да, неправильно :) Точнее так: да, "неправильно". Правильно-неправильно, хорошо-плохо зависит исключительно от того, чего хотим добиться. Если цель - всегда писать наилучший код, то конечно да, неправильно. Если цель - поставить нечто, соответствующее невысоким требованиям заказчика, оставаясь в рамках ограниченных ресурсов, то тогда пойти по такому пути будет правильно. Плохо как раз будет набрать таких вот "правильно-неправильно" в проекте, решить всё сделать максимально хорошо, и в итоге либо просрать сроки, либо из-за такой ерунды лишить себя выходных, своих близких внимания, и вообще чего угодно, что требует времени, которое будет потрачено на достижение условного идеала, который и не требовался.
Другое дело, что, как в случае с импортантом, использование этой штуки в общем случае нежелательно. И если бы видео называлось "37 ошибок начинающих верстальщиков", то тут мой аргумент померк бы - начинающих нужно учить общему случаю, а уж в частностях со временем и с опытом сами разберутся. Но название видео ничего не говорит о новичках. А не-новичкам уже можно давать нюансы.
А, да, есличо - видео в целом оч хорошее :) Просто, на мой взгляд, догматизм в чём бы то ни было вреден, тут как раз именно его я и углядел, об этом и решил поболтать в комментах =)
@@covovker div.title это совсем не делает верстку понятнее. Даже зайдя в html проще ориентироваться если не дивы а семантические теги! Время? что для div прописать font-weight: bold, что для заголовка font-weight: normal. на время это не влияет. А отступы и размер шрифта - все равно нужно писать свои в любом случае. где потеря времени? Это все отговорки!!!
Лучшее видео из темы ошибок по верстке ! Без всяких визуальных пауз , рекламы и прочего не нужного. Спасибо ! Отлично объясняешь , кратко, четко !
Спасибо)
Отличное видео! Очень полезное. Не смотря на то, что из всех ошибок указанных здесь мне подошли только пару, многие вещи я делала правильно только потому что так надо, но не понимала почему так надо. Теперь буду работать более осознано. Сделала себе несколько пометок. Спасибо, Максим!
Автор видео - опытный боец в мире верстки, однозначно лайк и подписка!
Спасибо))
Полностью поддерживаю
Чел я понимаю что автору приятно но мне кажется что ты просто написал чтобы автор подумал что ты очень хороший
Как верстальщик вставлю и свои 5 копеек
Абсолютно полностью согласен со всем, что говорится в видео, но есть пару очень важных но - время, которое даётся на задачу, прихоти заказчика и неумение заказчика говорить с дизайнерами
Расскажу пару ситуаций
1) Был проект, где нужно было делать типовые лендинги с почти одинаковым контентом (вёрстка почти не изменялась) и менялся только главный экран. Изначально сказали сделать 2 лендоса - сделал, давалось 4 часа, всё окей. А потом прилетало ещё по 2 лендинга в неделю и время на них давалось часа полтора от силы. Именно из-за этого я тупо брал старую вёрстку, вешал дополнительный класс и перебивал всё, что мне нужно стилями. Тут тупо дело времени, давалось бы его больше, такого говна бы не было, но получается вот так. Как мне сказали: работает - значит заебись.
2) Верстал один макет, где использовались декоративные квадратики над тайтлом. В чём прикол? Прикол в том, что дизайнеру не захотелось в фотошопе это всё разделять и он тупо скинул макет, где этот блок был джипегом, классно, да? Ага, вот поэтому я и делал дохера спанов, чтобы были эти квадратики. Нет, я конечно могу открыть фигму и потратить пол часа, чтобы эти квадратики нарисовать. Но что я скажу заказчику? Что я за 5 долларов рисовал ему в фигме пару квадратиков?)
3) Делал как-то раз фиксированную высоту для текста. Ну а что? Заказчик же прям так и хотел, чтобы текст был именно такой высоты и всё. И ничего ты ему не докажешь, сиди и делай, тебе платят и не выёбывайся.
Аргумент - видел у многих такую ошибку - не аргумент вовсе, ибо бывают разные ситуации и именно в той ситуации такого было не избежать. Или ты теряешь деньги, или ты пишешь говнокод, который требует твой заказчик.
Это все верно) я рассматривал все эти ошибки с точки зрения начинающих, тех, у кого я ежедневно проверяю работы, либо смотрю на стримах
И там нет ни единой причины эти ошибки совершать.
А вообще да, бывает всякое, конечно.
Здесь один важный нюанс . Всем не угодишь и не научишь .и нк надо ,а вот писать хороший код будьте любезны знать есть разные клиенты да и медаль на груди не помешает..
Если хорошо делать свою работу - можно и угодить всем, и сделать верно.
@@maxgraph абсолютно спасибо
Спасибо Максим, занимаюсь в Skillbox, видел ваши видео с пояснениями. Очень полезная информация!!!
Шикарно, супер просто!!! Огромная благодарность!!!
Стал учить верстку самостоятельно. Нашел инфу про плохой код и стал в этом разбираться. Вижу засада многому научиося но приступать к верстке не могу пока не раставлю акценты хотябы основные остальное со временем прийдет Не хочеться научиться плохому коду и затем переучиваться .Спасибо за вашу информацию она даст правильное напрввление новичкам и мне однозначно прорыв в светлое будущее.
Спасибо за отзыв) рад помочь
Нельзя понять почему код плохой не написав его пару сотен раз) Даже самая простая концепция компонентов и переиспользуемых блоков состоит в том что просто надоедает в сотый раз создавать один и тот же элемент в разных местах и думаешь такой "хмм, вот бы написать этот блок один раз, а менять его стили уже только там где он отличается"
Браво! Это можно использовать смело для подготовки к собесам!
Макс, спасибо большое за видео!!! Очень познавательно. Единственное, хотелось бы видеть и как можно исправлять ошибки. Так как в основном смотрим мы, начинающие верстальщики.
Ну по большей части я говорил))
Молодец, приятно видеть, что НАКОНЕЦ твой канал набирает просмотры, действительно хорошо рассказываешь, спасибо
спасибо)
Благодарю за видео и ответы в комментариях. Очень интересно посмотреть и почитать.
Пожалуйста)
как лучше nav > a или nav > ul > li > a? есть правила для таких кейсов?
Определенно со списком. Посмотрите плейлист по доступности на канале)
Очень интересный, познавательный ролик, было приятно смотреть, не оторваться
Спасибо)
Отличное видео! Четко и по делу.
Добавлять cursor: pointer для кнопок спорная практика, в операционках этого нет и в вебе по-умолчанию этого нет, кнопка должна выглядеть так, чтобы было понятно, что её можно нажать, если есть сомнения, то можно продумать для неё hover. Относительно недавно про это была статья, можно нагуглить
То, что сказано про заголовки было актуально для HTML 4, в HTML 5 каждая section, article и некоторые другие теги создают новый контекст и значит заголовки должны начинаться снова с h1, для проверки правильной иерархии нужно пользоваться HTML 5 Outliner
Также не все заголовки из макета стоит вносить в иерархию документа, в футере тоже могут быть заголовки для наборов ссылок, но это не значит, что они должны быть заголовками, сделать их через div логично и не засоряет иерархию
Заголовки дивами - даже звучит странно, может просто дивы?
По поводу h1 - спорно, опирался на мнение более опытных
Про курсор - да, вполне согласен с вами
Но ведь изменение курсора в данном варианте как раз и будет выступать частью эффекта hover, с точки зрения пользователя
По пойнтеру соглашусь - архаизм, но что, так сложно прописать 1 строчку в начале css? *a,button,input[type="button"],input[type="submit"]{cursor:pointer;}*
H1 на странице должен быть единственным, в секциях, как правило, начинаются с h2, так как ветвление. h1 - это заголовок страницы, а не секции. Есть, конечно, исключение - когда при скролинге статьи сменя.т друг друга.
В футере не может быть заголовков. Если Вы про меню или карту сайта (ссылки на все разделы), то они делаются списками, а не дивами и, уж тем более, не заголовками.
Поинтер обязателен. Сайт делается не для эстетов и ценителей тонкостей в верстке. Юзер привык к некоторым паттернам взаимодействия с интерфейсами в интернете, и поинтер - один из основных. Пока нет предпосылок к смене парадигмы.
Хорошее видео но для людей которые шарят, например на 30-й минуте, " не делайте фиксированную высоту" а какую делать не сказали, это мне повезло я вчера почитал о мин и Макс высотах. Новички же тоже смотрят
верное замечание) спасибо
як новачок скажу що таким відео є місце у навчанні правильної верстки сайтів но новачки не всіх нюанісів знають і ваші зауваження візьму до уваги
дякую за хороший урок)
спасибо)
Я, блин, когда только начал веб разработку - транслитом сверстал первый сайт, начал натягивать на cms, запутался с этим всем, понял свою ошибку и переверстал 🤣 Больше я так никогда не делал. Это был далекий 2001 год, вëрстку я осваивал самостоятельно.
P.S. уже давно не занимаюсь веб разработкой, ушел в мобильные приложения, но видео Макса смотрю с удовольствием.
Спасибо)
Спасибо. Основательно.👍🤘
Пожалуйста)
Супер, спасибо ! Очень полезно и понятно. Всех благ тебе)))
Очень круто. Вы прямо как Вадим Макеев))
Ахах, ну не))
Спасибо! Принял к сведению.
Некоторые мои ошибки затронуты в видео)
Кстати, жаль что Макеев В. перестал видео публиковать (оно и понятно). Тоже нравится его подача
Спасибо!!! Очень толково. Подписка однозначно
Пожалуйста)
Спасибо, Максим. Очень полезное видео и советы.
Пожалуйста)
По поводу пикселя есть небольшая поправка, пиксель в CSS это не физический пиксель на экране, это некая площадь заполненная некоторым количеством физических пикселей, поэтому возможно указывать дробные значения пикселей, но лучше конечно так не делать. А вообще благодарю за видео, очень познавательно, 95% информации знал, но вот все же почерпнул для себя что-то новое.
Спасибо, я это и имел ввиду :)
Сложносоставной заголовок(состоящий из нескольких шрифтов в несколько строк + иконка, например) как еще обозначить если не div.title? Все индивидуально. Так же как и вложенность стилей. Если писать с использованием препроцессора sсss - сам препроцессор к этому располагает. Еще! Использование нецелочисленных значений в иконках - это обязательно если так сделано в прототипе, графические дизайнеры будут ненавидеть вас за ваш перфекционизм, для них сверх важны выверенные толщины глифов, просвет и другие параметры, поэтому заниматься корректировкой дизайна верстакам точно не следует. А что следует - почитать книги о типографской верстке, верстке журналов, буклетов и баннеров. Эти знания точно дадут представления как должен перестраиваться сайт, какие отступы делать, и почему правило близости так важно. Непонимание основ самой верстки - сверхчастая проблема всех верстаков, я бы ее поставил во главу угла всего списка.
Иконки делаются фоном (или через свг). И тот, и другой метод не помешает заголовку, так что нет, див тут остается ошибкой.
Вложенность стилей - ошибка по БЭМ, препроцессор может преобразовать свой вложенный код в обычный, без вложенностей.
Это очень познавательно, спасибо тебе!
Пожалуйста)
Класс.Спасибо. Подчеркнул много полезного для себя.
Пожалуйста)
Огромное человеческое СПАСИБО !!!
Пожалуйста)
Второй раз пересматриваю видео, очень полезно и круто!
Молодец, много интересного и полезного рассказал, жду новых видео от тебя. Подписался.
Спасибо)
"div" с классом "title" это нормальная практика. Так что не нужно брать это за ошибку. Но нужно понимать где можно этот "div" применять, а где реально требуется семантический тег для заголовка.
Я так не считаю. Если пишешь title - значит ты уверен что там заголовок, иначе зачем так называть. Ничего другого, кроме как заголовок, с названием title быть не может.
@@maxgraph Делают div, чтобы не переопределять стили тега h, очевидно.
Тогда можно столкнуться с проблемой похуже, если использовать див в макетах, где заголовки тонкие.
потом поставят заголовок и будет жирно.
А если писать изначально тонкий шрифт - тогда смысл от дива?))
Один опытный верстальщик сказал:"Пусть семантикой занимаются сеошники"
@@sashnevski теги nav, header, footer и т.д. тоже сеошники расставлять будут?
Спасибо за информацию!!! =)
Пожалуйста)
Подскажите, а почему псевдокласс visited ведет себя как hover? Отдельно hover работает, но стоит добавить visited с другим цветом фона, при наведении мыши показывается цвет не hover-а, а visited и когда мышь уходит выделение пропадает
Такого не бывает, если правильно написаны стили
Спасибо. Было очень полезно.
Пожалуйста)
important очень спасает, когда есть шаблонные настройки, при чем в огромных сложных темах, и клиент просит прям вот только один элемент поменять. Вот все кнопки желтые, а тут я хочу красную. И тогда приходится конкретно для этой одной кнопки перебивать все стили, иногда ни класс, ни id не спасает, только important
Я как сеошник готова очень сильно поблагодарить за поднятие темы заголовков!
31:15 этот совет можно было назвать проще - всегда используйте reset.css, а лучше normolize.css для сброса стилей и задания единого вида
Beautify хорошо работает для вёрстки, но плагин Prettier универсальнее, сложнее и лучше. Лично я использую Prettier+, который ещё во фреймворках чуть лучше работает.
Большое спасибо! Прекрасное видео)
По поводу class="title" у div. Могу говорить только за себя, может это поможет понять почему так могут делать другие. Пока я учусь верстать, и сейчас у меня это делается на автомате. Я знаю что все h это блочные элементы, но поскольку в заголовках пишут текст, то в мозгу сразу по привычке срабатывает скрипт "так, я сделал текст, надо сделать для него блок чтоб было больше возможностей для управления: а вдруг в будущем для заголовка понадобится какое нибудь выравнивание не совсем по центру с помощью margin, или вообще position: absolute(тогда как раз родительскому блоку удобно будет дать position: relative), да и в целом уже мышление сформировалось блочное, а текст без блока в него как-то не вписывается; в общем на всякий случай пусть у заголовка будет родительский блок, чтоб потом не париться с его позиционированием и прочими проблемами". Тоесть мозг таким шаблоном мышления привык уменьшать себе работу в будущем. И при этом я понимаю что можно прописать просто display: block/inline-block и это избавит от ненужного div, но.. привычка появилась быстро.
А видео годное, спасибо. С некоторых пунктов орнул, какие-то знал, над какими-то задумался. Другие так подробно не рассказывают, а гуляют по поверхности типа просто ".. называйте классы правильно. Далее другая ошибка - проверяйте вёрстку на w3c. Далее другая ошибка .."
спасибо :)
спасибо!
НУ ЧТО, иду переделывать проекты) Спасибо автору, очень интересно)
Спасибо, нашел у себя ошибки, буду исправлять)
Спасибо) круто =)
Еще ошибка, это излишнее количество плагинов в проекте..
Спасибо за видео, очень полезно
Пожалуйста)
Здравствуйте, где можно найти ваше видео по стайл инт???
В поиске по каналу вводите stylelint
👍👍👍👍👍
Полезное видео, о чем-то уже слышал, о чем - то нет. Но div. title это правда сильно
эт да))
Поясню. div.title используется тогда, когда нужно стилизовать реальный заголовок, но скрыть его от индексации, а где-нибудь в другом месте разместить индексируемый заголовок. Проще говоря, div.title и h* - это не одно и тоже и нужны они оба. Если есть div, но нет h, то ошибка не в том, что div лишний, а в том, что h нет.
Спасибо!
Пожалуйста)
Привет. Спасибо за видео. Подскажи, так нормально писать классы по бэму (интересуют классы типа benefits__card-title benefits__card-desc benefits__card-more и тд, можно ли писать так, добавляя в конец дефис и новое слово)?
Benefits of Odigo
Welcome to Odigo!
Jump off balcony, onto stranger's head. Chase ball of string hide when guests come over.
LEARN MORE
Your Personal Japan Guide
Jump off balcony, onto stranger's head. Chase ball of string hide when guests come over.
LEARN MORE
Promoting Local Businesses
Jump off balcony, onto stranger's head. Chase ball of string hide when guests come over.
LEARN MORE
Да, так можно
Ну естественно добавляя div ты проверяешь работает ли без него...проблема в том, что почти всегда не работает. А вообще все это чисто субьективно, потому что есть несколько способов сделать одно и тоже и один считает правильным такой вариант, а другой другой. Например на некоторых курсах наоборот учат вкладывать ссылку в кнопку когда это нужно и дают читать статьи в которых приводится обоснование правильности таких действий...в этом и есть главная проблема, есть много путей и нет единого стандарта
Не на все есть несколько способов. Например, вкладывать ссылку в кнопку вообще запрещено :)
Я не уверен для кого снято это видео, но тут 70% ошибок можно оспорить. Табуляция? Следующий верстальщик просто в редакторе подгонит в 2 клика табуляцию под себя. Табуляция важна для бека? Спрашиваешь как он любит после завершения тем же углифаем ровняешь все под его вкус. Кириллица, длинные названия или что-то еще с названиями классов? Любой препроцессор css решает проблемы с вложенностью, длинною и прочим. А если класс назван "korzina" то это плохо, а если spa то уже класс "ghhdduus" это уже принято, так? Да, после ухода с флоатов перестали у блоков фиксовать высоту так как исчезла проблема зацепа блоков. А как же выпадающие списки с фиксированными высотами или их аналогами max-width для анимации? Фиксированная высота скажем в 100vh для мейн экрана? !important плохо согласен, но когда слик или овл идут со своими стилями а их надо поменять под себя, как перебить их стиль? Искать в их файлах название класса, считать вес класс тег а потом у себя дописывать макарон что бы перебить?
В принципе для новичков полезная инфа, но деды то знают что как ни крути, а что-то да надо костылем подпереть)
Ну это больше под новичков и было
Но и деды могут обойтись без костылей, если постараться)
Да и ваши доводы у моим отношения не имеют
полностью согласен с вами, выключил на 8 минуте.
Табуляция тоже важна. Например ты сделал сайт на WP. А заказчик или другой программист решил в админке через Внешний вид - Редактор изменить что-то, а там табуляция нарушена...
Скажите, а что вы думаете по поводу сайта на тильде в смысле верстки?
Привет! Считаю, что для простых (временных) решений для бизнеса, типа тестирования продаж продукта - пойдет. Но адекватный, рабочий, доступный сайт с его помощью создать невозможно. Только "заплатку")
Вышло видео про семантику ?
Ещё собираю материал)
Спасибо, узнал много нового. Но предположим есть модальное окно в которое нужно запихнуть много контента. Если не указать header, то все расползется за пределы экрана. Как быть в этом случае? Я бы ставил header + overflow
не очень понял, о каком header речь, и как он влияет на размер.
@@maxgraph прошу прощения, неправильно написал, я имел ввиду height
Погуглите мой плагин graph-modal, там все без высоты хорошо работает :)
Из этого видео узнал больше чем с большинства курсов
👍
это универсальный тег, можно вообще одними дивами верстать. Бывает ситуация когда нужен заголовок, а теги не уместны . Разные ситуации бывают, а так да, думать надо что пишешь в классах. БЭМ - в помощь.
див - не универсальный. див - для построения верстки или для элементов, для которых тег не придумали :)
@@maxgraph - дружище, ты тему скользкую в этом видео выложил. Лучше подумай, да по делу сделай видос. Того, чего нет в интернете в русскоязычном, та инфа которую трудно найти новичку (обычно она разрознена, ее трудно собрать), а эту хрень на каждом сайте по верстке обсуждают знатоки. И это только твое мнение. Контент делай полезный, интересный, что бы было за что цепляется. Всех благ тебе.
Ничего скользкого нет. Простые правила, которые вы (и многие) не знаете. Я лишь рассказал о них)
@@maxgraph , ты решил чисто подметить, мол смотрите чего я узнал. Твоя инфа и гроша ломоного не стоит, на каждом заборе пишут об этом, а бы чего сегодня бы дать на выкорм подписчикам. Одна вода... Про кириллицу вспомнил)), зачем? Неужели у тебя такие подписчики которые классы пишут кириллицей?? Ставлю диз. , за чрезмерную самоуверенность и снобизм. Ладно ,я скорее всего ошибся каналом однозначно. Изживите ребята что насрал в ваш огород, не смог пройти мимо, когда увидел очередного проповедника html)) и потратил время еще. Ребята, мой вам совет, нахер вам эти проповедники не нужны, самое важное это практика. Начинайте делать уже сейчас..
Вы абсолютно не в теме, видимо. И стоит погуглить, что такое самоуверенность и снобизм :)
Делайте верстку как хотите, но писать в комментариях неправильные суждения не надо, пожалуйста.
Супер 😯
Хотел узнать, учусть верстать сайты и столкнулся с такой проблемой что не знаю, как назвать переменную. И я подумал, а что если взять ключевое слово у меня в секции говорилось про профессора, я взял эту переменную и делал с БЭМ. Так тоже можно?
Да, вполне можно)
В input сдублировали шрифт, потом, когда его нужно поменять, идём в css и начинаем дублировать заново 😁 А inherit для чего сделано? 😉
Как вы сделали свой верхний левый угол ( свернутая иконка для быстрого доступа гугл таблицы?)
если вы про левый угол браузера - просто на вкладке браузера нажимаете закрепить.
Если бы Вы Максим также объясняли все ошибки на платформе Skillbox своим ученикам, цены бы вам не было)))
Я это и делаю :)
@@maxgraph Блин, значит мне просто так не повезло)
Вы на поняли :)
Я специально не рассказываю все ошибки досконально) это готовит к реальной работе, это заставляет что-то поискать, подумать. Это важно)
!important можно использовать в случае когда правило класса должно переопределить инлайновые правила у элемента.
стоит просто не писать инлайн-стили.
@@maxgraph Если их js присваивает. В некоторых случаях это неизбежно
Так и этого можно избежать
@@maxgraph У меня был 1 случай на legacy проекте когда не избежать
Все классно, но не совсем понял как быть с dis fl, jc spac-beetw при добавлении карточек, что делать и как решить эту проблему?
Лучший вариант - гриды
Или делать отступы между блоками, а крайним правым отступ обнулить
Допустим height использовать не надо, а как вы относитесь к min-width, min-height для кнопок или же для целой секции?
да тут не "допустим". А точно не надо))
min-height можно использовать, но обязательно в связке с паддингами, чтобы контент не имел возможности "прилипнуть" к краям.
min-width - то же самое.
@@maxgraph а как тогда задавать размеры секциям и кнопкам?
Размеры элементов берутся из их контента
@@maxgraph Понял, просто бывают моменты когда надо сделать две кнопки, которые в одном ряду однаковым размером, но проблема в том, что у этих кнопок разный контент и каждой свой паддинг, получается
Юзайте друзья styled-components и будет вам счастье)
Но это неточно)))
спасибо
пожалуйста)
Как относитесь к макс ширине для перевода строки?
Нормально)
@@maxgraph видео уже 5 месяцев, а вы все еще отвечаете на вопросы.. Спасибо, учитель.
С flex нужно использовать gap, а не margin, ибо после переноса элементов может верстка полететь. А gap учитывает.
Наоборот, не нужно. Поддержка в сафари ещё очень мала
Hе понял за высоту на примере блока height то как правильно задавать max height
Да никак, не надо задавать :)
@@maxgraph а почему ?
чтобы сайт проходил проверку на переполнение)
@@maxgraph да видно что вы любите это дело , контент реально полезный спасибо буду смотреть учиться правильно Верстать
@@maxgraph а как это сделать как проверить сайт
Думаю стоило сказать, что при адаптивной верстке необходимо использовать rem вместо px это важно!
Это абсолютно неважно, можно адаптив и с пикселями сделать)
Но да, практика хорошая
А чем это принципиально?
@@yura_8952 1rem = font-size of root element, т.е если мы задаем для html font-size 10px или более правильно 62.5% это 10 / 16 (размер шрифта браузера по умолчанию), мы можем только изменив размер шрифта в html автоматически "повлиять" на всю верстку.
Здравствуй, есть вопрос, мне попал сайт в котором все значения заданны через vh/vw, правильный ли это подход?
Я думаю, что нет, но я могу ошибаться. Это попадает под проблему адаптива, кажется.
Это не очень хороший подход, привет. Но в целом используемый
@@maxgraph а это не вызовет проблем с адаптивом?
да нет, не должно)
@@maxgraph спасибо за ответ. Ещё, хотел бы сказать, что очень нравится ваши видео и подача. Надеюсь, что вам это тоже доставляет удовольствие
спасибо)
ну, если бы не было удовольствия - я бы не делал)
Вы проверяете задания в skillbox по верстке?
Да
Ролик Хороший, но не совсем согласен, с title. И еще хотел спросить, всегда нужно подключать normalize.css я просто его ни когда не использую, у меня в других браузерах всегда более или менее норм отображается.
а что не так с title?)
нормалайз в идеале лучше подключать
Делаю div.title > h1,2,3.. мне просто тимлид говорил что текстовым элементам к примеру в карточке товара лучше не задавать классы. И другие видео уроки смотрел тоже такое видел.
Ну это странно, ведь даже по Бэм это стоит делать)
@@maxgraph обычно текстовым элементам не дают классы когда верстка натягивается на CMS, в этом случае для текста делается обертка и класс дается именно ей
@@evgeniyprowork Ну да, такое бывает. Но все равно это бывает реже, чем с классами по БЭМ.
В целом очень интересно, есть штука которую на вооружение взял из урока, но я совершенно не согласен с темой - "Проблема переполнения на сайте" ведь есть четкие лендосы с оговоренным дизайном, которые никто не будет менять, зачем вот как в примере делать то 6ть блоков, то 8мь? ведь дизайн тогда весь будет меняться, а не только в одном месте это как будто двойная работа. Я еще понимаю когда есть страницы которые заранее подразумевают гибкие размеры, к примеру картинки на карточки товаров или текст для статей блога, там это надо учитывать, но здесь это по-моему трата времени. Если нет вы апологет другого, покажите примеры где это реально может пригодится и это надо учитывать.
Лично я не вижу никакой двойной работы в этом. Просто научиться это сразу учитывать и все. Время не увеличится
А насчёт чёткого дизайна - отчасти я согласен, но сам попадал на штуки типа "тут короче у нас ещё преимущества появились, закинь-ка", и что-то в таком духе :)
@@maxgraph так там будет с каждой секцией так. Вот если типичный случай для секции - это картинка с одной стороны и текст(или аккордион) с другой, тут кроме как скрол сделать ничего в голову не приходит, что бы доп текст верстку не сломал. Или еще такой момент, вот есть секция на ней те же 6ть блоков, но есть картинка на фоне, как здесь быть?
Было бы круто увидеть видео с подобными случаями и как с ними справится, я думаю это полезно.
Окей, подумаю :)
Максим, я вот учусь на скиллбоксе и у меня появляются спорные моменты в вёрстке, и я не знаю даже с кем посоветоваться. А в телеге не всегда подскажут то, что хотелось бы
Есть ли какие-нибудь преподаватели, которые отвечают хоть более-менее быстро, а не по 2 дня, как это делают проверяющие? Я просто каждый день верстаю и с чем-то сталкиваюсь.
Проверяющие отвечают раз в сутки, почти все)
@@maxgraph у моего выходные через день) или через 2, если сегодня не отзовётся
Вы можете его сменить, если очень хочется
@@maxgraph на вас можно?)
На кого угодно можно)
можно инпутам в своем резете прописать фонт-фэмили инхерит)
important бывает нужен когда кастомизируешь стили какого то плагина, чтоб перебить базовые, а так по сути он не нужен, если это не легаси код 90-х годов на миллион строк
Так можно использовать селекторы прямиком из плагина - импортант не понадобится
@@maxgraph а если по api грузиться ?
разницы нет)
Спасибо за видео:) А как проверять верстку на сафари? Через виртуалку только?
Купить мак, купить браузерстак, установить виртуалку)
здравствуйте, а вот если заказчик в будущем захочет поменять декоративные элементы ему прийдется лезть в код, почему не сделать их имг для удобства?
Здравствуйте, зачем лезть) их можно сделать через атрибут style
@@maxgraph а вы так делаете? Или всегда бекграундом?
Так это и есть бэкграунд)
@@maxgraph я просто был на фриланс бирже и смотрел на работы топ фрилансеров, может, даже знаете одного из них фрилансер по жизни и я заметил что они все время делают с помощью имг и в редкости беком
Ну это не значит что они делают верно))
По заголовкам не согласен, вложенность сложно соблюсти, лучше ориентироваться на размер, в том же sass задать переменные:
$heading-1-font-size: $font-size * 2.5;
$heading-2-font-size: $font-size * 2;
$heading-3-font-size: $font-size * 1.75;
$heading-4-font-size: $font-size * 1.5;
$heading-5-font-size: $font-size * 1.25;
$heading-6-font-size: $font-size;
Давай видео про Vue, Next js =))
скука)
Почему нельзя просто удалить outline ?
Нельзя оставлять пользователей, которые используют клавиатуру, без возможности пользоваться сайтом. Оутлайн помогает понять, где пользователь находится, если использует клавиатуру.
Недавно смотрел разбор верстки магазина Amazon, так там такое понаписано, сплошные дивы, инлайновые стили, наименование классов вообще выходит за рамки логики, в наименованиях классов повсеместно встречаются octopus (осьминог), каким боком тут осьминог вообще не понятно.
Может Фреймворк какой-то))
Только прикол в том, что это реально не особо важно, а если глянуть в большие проекты то там всё это сто раз нарушается
Кому как. На самом деле важно. А большие проекты - вовсе не значит что правильные))
Полностью согласен. Видел некоторые мощные ресурсы, которые не сдвинешь с первого места в выдаче, а они являются порталом. А по опыту, скажу так - на портале пром юа вычислил некоторые косяки и предъявил, на что мне сказали - умник, сделай своё, а не рассказывай. Вот и получается что этот портал хрен чем сдвинешь, кеш они зарабатывают многомиллионный. И хоть правильно ты умеешь писать, хоть транслитом - пофигу. Бабло у них, а не у тех, кто рассказывает как надо правильно.
Мне за рассказ как правильно платят очень даже хорошо :) за обучение людей, точнее
Я же с вами не спорю)) Платят и Слава Богу, искренне за вас рад.
Просто делюсь с вами тем, что видел за свою практику. Сам и дизайн делал, и верстал, и писал свой движок, и местами использовал транслит. Результат - уровень загрузки 100 и 100, а рекламное агенство (для которых создавал и раскручивал сайт) остались ооочень довольны, потому как и высокочастотные запросы висят уже четвертый год титаново.
Ну я все равно топлю за правильность и буду, потому что она не мешает делать хорошие сайты)
как проверить сайт в сафари, если у тебя шиндовс?
Виртуалка, браузерстак или купить мак))
почините ссылку к "декоративные и контентные изображения"
она на самом деле была, в редакторе видео видна, а у самого видео почему-то нет. Сделал чуть другую, спасибо.
где тебя раньше носило?
😀
Мои пять копеек по поводу !important, например если юзаете библиотеку SlickSlider то она там динамически css добавляет , всякие translate, margin, которые вызывают проблемы с позиционированием и для этого например можно юзать !important чтобы приоритет этим стилям перебить, в остальных случаях !important очень плохо как и сказал Макс!
Ну нет же, стили слайдера не надо трогать) только сам css, но не то, что он вешает через js
@@maxgraph стили слайдера как-то не корректно отрабатывают =( все перепробовал помог только импортант
@@maxgraph может неправильно написал, попробую подробнее если интересно, там сложная схема когда два слайдера пытаются синхронизироваться и там какой-то баг со стилями происходит, SlickSlider навешивает свои стили на второй слайдер при прокрутке первого чтобы синхронизироваться , добавляет translate, margin инлайново который портит стили , так как специфичность у инлайновых стилей выше то мои стили не срабатывают и приходится important добавлять
@@vladkolesnik2274 ну такие проблемы, я думаю, можно и без импортантов решить.
- Нельзя так делать! Как вы собираетесь выполнять валидацию формы? На почту приходит html макет с подставленными данными в нужные места.
Делал так очень много раз в течении пяти лет. И валидация, и отправка работают.
Сафари в топку!
31:33 а вот так как ты делаешь тоже нельзя делать. правильное написание тут INHERIT, а не дублирование:
button, input, select, teaxtarea, optgroup {
font-family: inherit;
}
Это лишь второй вариант.
видео можно закрывать на длине класов т.к существует Бэм и по бэму длинна классов всегда длинная + своя библиотека классов.
не баг а фитча
Вообще необязательно :)
это конечно хорошо. но! далеко ходить не надо, открыли ютуб и там класс - ytd-video-secondary-info-renderer. и тд.. и т.п.. приходишь в одну компанию, там так верстают, в другую, там этак. на деле почти не на что оно не влияет, а когда не лендос с фриланса а проект на только одного файла css из 8к строк,вся эта красота и выпендреж улетает в трубу! хороший верстальщик не тот, кто умеет классы именовать как там кто-то придумал.)) хороший верстальщик тот, кто делает так, что потом по сто раз не надо править и делает это быстро!
хорошие верстальщик тот, кто умеет реализовать сложнейшие задачи дизайна! а не классы по мануалам называет.))
на деле, пример уже показал (отройте исходник данного ресурса), болт все клали на вашу красоту!
я еще ни разу не обращал внимания, как там классы названы или какая структура когда правил или дорабатывал сайты с 2-5к страниц. открыл диспетчер, посмотрел что за что отвечает, там все само выровнено, скачал нужный файл, через поиск нашел что тебе надо, добавил, закрыл! вот как оно в реальности происходит.)))
но если есть время, можно заморочиться и страдать херней. даже на стройке большинство стандартов приходиться игнорировать, ибо тогда хрена что построишь! и так везде!))))
печально, но вот такая она реальность.)))
но посмотреть было интересно.
Ютуб может себе позволить, ибо это всемирно-известный сайт, и он собирается на технологиях, где даже классы скорее всего сами не пишут :)
Ну и собственно чем плох данный класс? длинноват, но в целом норм.
для аналога br в css открыл для себя такой хак:
span::before {
content: “\A”;
}
Интересно) но он же только в начале или конце будет, как псевдо
Есть смысл?)
@@maxgraphНапример, когда у нас и не хотим использовать тег
(23:19) Про кириллицу в аттрибуте инпута name вообще непонятно, зачем там кириллица если этот атрибут будет обрабатывать сервер при отправке формы, а на сервер приходит значение этого атрибута как ключ массива. А на почту отправить можно в каком угодно виде, это тоже делает сервер. Нипанятна
Мы, верстальщики, часто используем простую схему отправки на сервер - через Name и value просто передать их в php и отправить функцией mail.
Получаем name="Имя", value="Максим"
на почту прилетает Имя: Максим. Все логично)
@@maxgraph Ну, так-то, отправка почты - это масштабная серверная задача, особенно, если заказчик крупный. Там проводится целый ряд обработок. Предложенная Вами обработка хороша только для демонстрации фирме-однодневке (простым foreach в одну строку). Но стоит появиться необходимости добавить отправку файлов, фильтровать и распределять отправку или формировать сложные макеты писем и этот примитив уже никому не нужен. Так что если уж делать, то делать качественно сразу. Я вот уже много лет использую самописный мощный функциональный обработчик, использующий атрибуты name по прямому назначению. А если вы делали видео для новичков, то не стоит приучать их, что "кириллица - это норм".
Разве нельзя так feature, fuature__list, fuature__list-item?
Так - можно)
@@maxgraph бем это вообще моща. Не представляю как без него работать)
Это да))
разобрал верстку сайта amazon? )))) на 15й минуте все ошибки с того сервиса...
бывает))
@@maxgraph на другом канале разбирали карточку товара на этом сервисе... (Александр Лущенко)... я так не верстал даже когда изучал html, и о семантике даже не слышал. Но что самое интересное, сам очень редко, но допускаю некоторые ошибки описанные в вашем видео))) а стаж верстки более пяти лет, кстати спасибо за видео напоминалку)))
@@zapiski_verstalshika Да все мы грешим :) бывает.
в БЭМ назывыаю классы аля .header-nav__link и вроде норм выходит. Не более 3 слов
ну и отлично)