37 ошибок верстальщиков. Не делай так!
Рет қаралды 55,625
Күн бұрынПривет! Ошибки допускают все, даже опытные верстальщики. И часто эти ошибки не поддаются никакому объяснению - они просто есть. То класс не так написан, то в сафари все поехало...В общем, в этом видео я хотел бы рассмотреть аж 37 подобных случаев, ошибок, которые не нужно допускать.
В этом видео я не смеюсь над теми, кто их совершает, да даже сам некоторые до сих пор совершаю. Я хочу лишь донести то, что это действительно ошибки, и как их исправить. Поехали!
Содержание:
00:00 - Вступление и критерии верстки
01:30 - Названия классов транслитом
02:38 - Названия классов не по назначению
03:44 - Названия классов верные, но теги - нет
04:40 - Большая длина названий классов
05:28 - Большая вложенность классов
06:40 - Проблема именования в БЭМ - элемент элемента
08:08 - Проблема именования в БЭМ - модификаторы
09:08 - Неверная табуляция кода
10:08 - Неправильная семантика в html
11:00 - Большая вложенность в html
12:26 - Неверное использование заголовков
14:22 - Использование тегов там, где их использовать нельзя
15:52 - Неверное использование ссылок и кнопок
17:48 - Декоративные элементы в html
18:48 - Декоративные изображения в html
19:44 - Проблема переполнения на сайте
21:26 - Не соблюдается базовая доступность
21:53 - Кириллица в названиях классов, картинок и т.д.
23:18 - Использование id для стилизации
24:15 - Бездумное использование br
25:36 - Использование инлайн-стилей
26:15 - Неверное использование абсолютного позиционирования
28:02 - Организация отступов в верстке
29:25 - Использование фиксированной высоты
30:35 - Следите за наследованием шрифтов
31:45 - Ошибки в стилизации textarea
33:52 - cursor: pointer и hover для интерактивных элементов
34:38 - Удаление outline без альтернативы
35:46 - Сброс и нормализация стилей
36:29 - Фоновые изображения и фоновый цвет
37:27 - Дробные пиксели
38:14 - анимация через left вместо transform
39:16 - Большое количество медиа-запросов
40:09 - Использование !important
41:22 - Неверный подход к верстке
42:20 - Несоответствие кодстайлу
43:03 - Кроссбраузерность
43:24 - Проблемы адаптива
44:02 - Заключение
github.com/yoksel/common-words - частоиспользуемые слова в классах
• Разбор ваших работ по ... - последняя проверка работ на канале
• Веб-доступность №2. Ка... - как семантика влияет на доступность
• Методология БЭМ. Теори... - видео по методологии БЭМ
caninclude.glitch.me/ - can i include (можно ли вложить?)
css-tricks.com/a-complete-gui... - отличная статья по ссылкам и кнопкам
clck.ru/RSUHK - декоративные и контентные изображения
www.artlebedev.ru/typograf/ - Типограф
github.com/WICG/focus-visible - focus-visible
• Организация отступов в... - организация отступов в верстке
necolas.github.io/normalize.css/ - normalize.css
codeguide.maxgraph.ru/ - кодстайл
• Stylelint. Как установ... - видео про stylelint
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
#обучение #ошибки #частыеошибки
@maxgraph 3 жыл бұрын
Спасибо за чрезвычайно огромный отклик на видео. Пару моментов из видео, о которых хотелось бы уточнить: 1. курсор поинтер - да, это спорная тема, по факту у кнопок он может вызвать проблему. Но тут уже все проверяется лишь опытом, метриками, оценкой поведения пользователей. 2. верстка дивами (в том числе и заголовков) - не понимаю, почему многие пишут про дивы, ссылаясь то на стоимость работы, то на СЕО. Заголовки - крайне важная часть сайта и с точки зрения доступности. Изучите это - это важно 3. Использование импортант - да, возможно есть еще кейсы для его использования, но предостерегайте себя, что бы не писали)
@covovker 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 3 жыл бұрын
@@covovker и неправильно. (=
@covovker 3 жыл бұрын
@@maxgraph Да, неправильно :) Точнее так: да, "неправильно". Правильно-неправильно, хорошо-плохо зависит исключительно от того, чего хотим добиться. Если цель - всегда писать наилучший код, то конечно да, неправильно. Если цель - поставить нечто, соответствующее невысоким требованиям заказчика, оставаясь в рамках ограниченных ресурсов, то тогда пойти по такому пути будет правильно. Плохо как раз будет набрать таких вот "правильно-неправильно" в проекте, решить всё сделать максимально хорошо, и в итоге либо просрать сроки, либо из-за такой ерунды лишить себя выходных, своих близких внимания, и вообще чего угодно, что требует времени, которое будет потрачено на достижение условного идеала, который и не требовался. Другое дело, что, как в случае с импортантом, использование этой штуки в общем случае нежелательно. И если бы видео называлось "37 ошибок начинающих верстальщиков", то тут мой аргумент померк бы - начинающих нужно учить общему случаю, а уж в частностях со временем и с опытом сами разберутся. Но название видео ничего не говорит о новичках. А не-новичкам уже можно давать нюансы.
@covovker 3 жыл бұрын
А, да, есличо - видео в целом оч хорошее :) Просто, на мой взгляд, догматизм в чём бы то ни было вреден, тут как раз именно его я и углядел, об этом и решил поболтать в комментах =)
@zapiski_verstalshika 2 жыл бұрын
@@covovker div.title это совсем не делает верстку понятнее. Даже зайдя в html проще ориентироваться если не дивы а семантические теги! Время? что для div прописать font-weight: bold, что для заголовка font-weight: normal. на время это не влияет. А отступы и размер шрифта - все равно нужно писать свои в любом случае. где потеря времени? Это все отговорки!!!
@user-oi3rk4ey8t 3 жыл бұрын
Лучшее видео из темы ошибок по верстке ! Без всяких визуальных пауз , рекламы и прочего не нужного. Спасибо ! Отлично объясняешь , кратко, четко !
@maxgraph 3 жыл бұрын
Спасибо)
@oloviddinazim2260 Жыл бұрын
Шикарно, супер просто!!! Огромная благодарность!!!
@Asver_ 3 жыл бұрын
Макс, спасибо большое за видео!!! Очень познавательно. Единственное, хотелось бы видеть и как можно исправлять ошибки. Так как в основном смотрим мы, начинающие верстальщики.
@maxgraph 3 жыл бұрын
Ну по большей части я говорил))
@frenkixp9638 3 жыл бұрын
Как верстальщик вставлю и свои 5 копеек Абсолютно полностью согласен со всем, что говорится в видео, но есть пару очень важных но - время, которое даётся на задачу, прихоти заказчика и неумение заказчика говорить с дизайнерами Расскажу пару ситуаций 1) Был проект, где нужно было делать типовые лендинги с почти одинаковым контентом (вёрстка почти не изменялась) и менялся только главный экран. Изначально сказали сделать 2 лендоса - сделал, давалось 4 часа, всё окей. А потом прилетало ещё по 2 лендинга в неделю и время на них давалось часа полтора от силы. Именно из-за этого я тупо брал старую вёрстку, вешал дополнительный класс и перебивал всё, что мне нужно стилями. Тут тупо дело времени, давалось бы его больше, такого говна бы не было, но получается вот так. Как мне сказали: работает - значит заебись. 2) Верстал один макет, где использовались декоративные квадратики над тайтлом. В чём прикол? Прикол в том, что дизайнеру не захотелось в фотошопе это всё разделять и он тупо скинул макет, где этот блок был джипегом, классно, да? Ага, вот поэтому я и делал дохера спанов, чтобы были эти квадратики. Нет, я конечно могу открыть фигму и потратить пол часа, чтобы эти квадратики нарисовать. Но что я скажу заказчику? Что я за 5 долларов рисовал ему в фигме пару квадратиков?) 3) Делал как-то раз фиксированную высоту для текста. Ну а что? Заказчик же прям так и хотел, чтобы текст был именно такой высоты и всё. И ничего ты ему не докажешь, сиди и делай, тебе платят и не выёбывайся. Аргумент - видел у многих такую ошибку - не аргумент вовсе, ибо бывают разные ситуации и именно в той ситуации такого было не избежать. Или ты теряешь деньги, или ты пишешь говнокод, который требует твой заказчик.
@maxgraph 3 жыл бұрын
Это все верно) я рассматривал все эти ошибки с точки зрения начинающих, тех, у кого я ежедневно проверяю работы, либо смотрю на стримах И там нет ни единой причины эти ошибки совершать. А вообще да, бывает всякое, конечно.
@bestlife9681 3 жыл бұрын
Здесь один важный нюанс . Всем не угодишь и не научишь .и нк надо ,а вот писать хороший код будьте любезны знать есть разные клиенты да и медаль на груди не помешает..
@maxgraph 3 жыл бұрын
Если хорошо делать свою работу - можно и угодить всем, и сделать верно.
@bestlife9681 3 жыл бұрын
@@maxgraph абсолютно спасибо
@timishurekeev6182 Жыл бұрын
Спасибо Максим, занимаюсь в Skillbox, видел ваши видео с пояснениями. Очень полезная информация!!!
@grind3204 3 жыл бұрын
Молодец, приятно видеть, что НАКОНЕЦ твой канал набирает просмотры, действительно хорошо рассказываешь, спасибо
@maxgraph 3 жыл бұрын
спасибо)
@anastasiaburim8309 3 жыл бұрын
Спасибо, Максим. Очень полезное видео и советы.
@maxgraph 3 жыл бұрын
Пожалуйста)
@nerrisy8839 3 жыл бұрын
Очень интересный, познавательный ролик, было приятно смотреть, не оторваться
@maxgraph 3 жыл бұрын
Спасибо)
@user-gs7ro3tl9t 3 жыл бұрын
Автор видео - опытный боец в мире верстки, однозначно лайк и подписка!
@maxgraph 3 жыл бұрын
Спасибо))
@user-lm9ee1gn5p 2 жыл бұрын
Полностью поддерживаю
@BananaBro757 2 жыл бұрын
Чел я понимаю что автору приятно но мне кажется что ты просто написал чтобы автор подумал что ты очень хороший
@juliachuprey2468 18 күн бұрын
Отличное видео! Очень полезное. Не смотря на то, что из всех ошибок указанных здесь мне подошли только пару, многие вещи я делала правильно только потому что так надо, но не понимала почему так надо. Теперь буду работать более осознано. Сделала себе несколько пометок. Спасибо, Максим!
@akw1d 2 жыл бұрын
Благодарю за видео и ответы в комментариях. Очень интересно посмотреть и почитать.
@maxgraph 2 жыл бұрын
Пожалуйста)
@user-lh9yf8lg8l Жыл бұрын
Супер, спасибо ! Очень полезно и понятно. Всех благ тебе)))
@miraigrafit7865 3 жыл бұрын
Второй раз пересматриваю видео, очень полезно и круто!
@user-uh8hz9xi2h 3 жыл бұрын
Класс.Спасибо. Подчеркнул много полезного для себя.
@maxgraph 3 жыл бұрын
Пожалуйста)
@batiaAlkash 3 жыл бұрын
Большое спасибо! Прекрасное видео)
@VladimirSalygin 2 жыл бұрын
Огромное человеческое СПАСИБО !!!
@maxgraph 2 жыл бұрын
Пожалуйста)
@user-qz8kj3tr8i Жыл бұрын
Отличное видео! Четко и по делу.
@toy9664 2 жыл бұрын
Это очень познавательно, спасибо тебе!
@maxgraph 2 жыл бұрын
Пожалуйста)
@bestlife9681 3 жыл бұрын
Стал учить верстку самостоятельно. Нашел инфу про плохой код и стал в этом разбираться. Вижу засада многому научиося но приступать к верстке не могу пока не раставлю акценты хотябы основные остальное со временем прийдет Не хочеться научиться плохому коду и затем переучиваться .Спасибо за вашу информацию она даст правильное напрввление новичкам и мне однозначно прорыв в светлое будущее.
@maxgraph 3 жыл бұрын
Спасибо за отзыв) рад помочь
@user-si2lo2tb1s 3 жыл бұрын
Нельзя понять почему код плохой не написав его пару сотен раз) Даже самая простая концепция компонентов и переиспользуемых блоков состоит в том что просто надоедает в сотый раз создавать один и тот же элемент в разных местах и думаешь такой "хмм, вот бы написать этот блок один раз, а менять его стили уже только там где он отличается"
@user-jb3cd5uk2j Жыл бұрын
Спасибо!!! Очень толково. Подписка однозначно
@maxgraph Жыл бұрын
Пожалуйста)
@MrZefirkin 3 жыл бұрын
Спасибо, нашел у себя ошибки, буду исправлять)
@maxgraph 3 жыл бұрын
Спасибо) круто =)
@mind150 9 ай бұрын
Браво! Это можно использовать смело для подготовки к собесам!
@antonk2448 3 жыл бұрын
Спасибо. Было очень полезно.
@maxgraph 3 жыл бұрын
Пожалуйста)
@user-xs8ty9dg5s Жыл бұрын
Спасибо за информацию!!! =)
@maxgraph Жыл бұрын
Пожалуйста)
@SergiyPolar 3 жыл бұрын
Я, блин, когда только начал веб разработку - транслитом сверстал первый сайт, начал натягивать на cms, запутался с этим всем, понял свою ошибку и переверстал 🤣 Больше я так никогда не делал. Это был далекий 2001 год, вëрстку я осваивал самостоятельно. P.S. уже давно не занимаюсь веб разработкой, ушел в мобильные приложения, но видео Макса смотрю с удовольствием.
@maxgraph 3 жыл бұрын
Спасибо)
@dmitrykuzmin6524 3 жыл бұрын
По поводу пикселя есть небольшая поправка, пиксель в CSS это не физический пиксель на экране, это некая площадь заполненная некоторым количеством физических пикселей, поэтому возможно указывать дробные значения пикселей, но лучше конечно так не делать. А вообще благодарю за видео, очень познавательно, 95% информации знал, но вот все же почерпнул для себя что-то новое.
@maxgraph 3 жыл бұрын
Спасибо, я это и имел ввиду :)
@user-ws5kz1pc5k Жыл бұрын
Спасибо. Основательно.👍🤘
@maxgraph Жыл бұрын
Пожалуйста)
@Elisha_GG 2 жыл бұрын
Очень круто. Вы прямо как Вадим Макеев))
@maxgraph 2 жыл бұрын
Ахах, ну не))
@assetzh 3 жыл бұрын
Спасибо за видео, очень полезно
@maxgraph 3 жыл бұрын
Пожалуйста)
@maks_Luschevych 3 жыл бұрын
як новачок скажу що таким відео є місце у навчанні правильної верстки сайтів но новачки не всіх нюанісів знають і ваші зауваження візьму до уваги дякую за хороший урок)
@maxgraph 3 жыл бұрын
спасибо)
@user-wl2hi2hs8m Жыл бұрын
Спасибо! Принял к сведению. Некоторые мои ошибки затронуты в видео) Кстати, жаль что Макеев В. перестал видео публиковать (оно и понятно). Тоже нравится его подача
@bayanbokan4971 3 жыл бұрын
Супер 😯
@alexlisouski4069 3 ай бұрын
как лучше nav > a или nav > ul > li > a? есть правила для таких кейсов?
@maxgraph 3 ай бұрын
Определенно со списком. Посмотрите плейлист по доступности на канале)
@svet0v 3 жыл бұрын
Привет. Спасибо за видео. Подскажи, так нормально писать классы по бэму (интересуют классы типа 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
@maxgraph 3 жыл бұрын
Да, так можно
@alexandermotorygin 3 жыл бұрын
Добавлять cursor: pointer для кнопок спорная практика, в операционках этого нет и в вебе по-умолчанию этого нет, кнопка должна выглядеть так, чтобы было понятно, что её можно нажать, если есть сомнения, то можно продумать для неё hover. Относительно недавно про это была статья, можно нагуглить То, что сказано про заголовки было актуально для HTML 4, в HTML 5 каждая section, article и некоторые другие теги создают новый контекст и значит заголовки должны начинаться снова с h1, для проверки правильной иерархии нужно пользоваться HTML 5 Outliner Также не все заголовки из макета стоит вносить в иерархию документа, в футере тоже могут быть заголовки для наборов ссылок, но это не значит, что они должны быть заголовками, сделать их через div логично и не засоряет иерархию
@maxgraph 3 жыл бұрын
Заголовки дивами - даже звучит странно, может просто дивы? По поводу h1 - спорно, опирался на мнение более опытных Про курсор - да, вполне согласен с вами
@ruslanandrievskiy4282 3 жыл бұрын
Но ведь изменение курсора в данном варианте как раз и будет выступать частью эффекта hover, с точки зрения пользователя
@Epenckorn 3 жыл бұрын
По пойнтеру соглашусь - архаизм, но что, так сложно прописать 1 строчку в начале css? *a,button,input[type="button"],input[type="submit"]{cursor:pointer;}* H1 на странице должен быть единственным, в секциях, как правило, начинаются с h2, так как ветвление. h1 - это заголовок страницы, а не секции. Есть, конечно, исключение - когда при скролинге статьи сменя.т друг друга. В футере не может быть заголовков. Если Вы про меню или карту сайта (ссылки на все разделы), то они делаются списками, а не дивами и, уж тем более, не заголовками.
@DmitryEverise 3 жыл бұрын
Поинтер обязателен. Сайт делается не для эстетов и ценителей тонкостей в верстке. Юзер привык к некоторым паттернам взаимодействия с интерфейсами в интернете, и поинтер - один из основных. Пока нет предпосылок к смене парадигмы.
@RiLelBeautyBlogger 3 жыл бұрын
important очень спасает, когда есть шаблонные настройки, при чем в огромных сложных темах, и клиент просит прям вот только один элемент поменять. Вот все кнопки желтые, а тут я хочу красную. И тогда приходится конкретно для этой одной кнопки перебивать все стили, иногда ни класс, ни id не спасает, только important Я как сеошник готова очень сильно поблагодарить за поднятие темы заголовков!
@DreamingDolphing 3 жыл бұрын
Beautify хорошо работает для вёрстки, но плагин Prettier универсальнее, сложнее и лучше. Лично я использую Prettier+, который ещё во фреймворках чуть лучше работает.
@Dmytrokan 3 жыл бұрын
Хорошее видео но для людей которые шарят, например на 30-й минуте, " не делайте фиксированную высоту" а какую делать не сказали, это мне повезло я вчера почитал о мин и Макс высотах. Новички же тоже смотрят
@maxgraph 3 жыл бұрын
верное замечание) спасибо
@user-tc9ml2mu5k 2 жыл бұрын
Молодец, много интересного и полезного рассказал, жду новых видео от тебя. Подписался.
@maxgraph 2 жыл бұрын
Спасибо)
@ForeverDarkDeath 2 жыл бұрын
31:15 этот совет можно было назвать проще - всегда используйте reset.css, а лучше normolize.css для сброса стилей и задания единого вида
@summersbyy 3 жыл бұрын
Полезное видео, о чем-то уже слышал, о чем - то нет. Но div. title это правда сильно
@maxgraph 3 жыл бұрын
эт да))
@Epenckorn 3 жыл бұрын
Поясню. div.title используется тогда, когда нужно стилизовать реальный заголовок, но скрыть его от индексации, а где-нибудь в другом месте разместить индексируемый заголовок. Проще говоря, div.title и h* - это не одно и тоже и нужны они оба. Если есть div, но нет h, то ошибка не в том, что div лишний, а в том, что h нет.
@aleksandrstetsyuk9198 3 жыл бұрын
"div" с классом "title" это нормальная практика. Так что не нужно брать это за ошибку. Но нужно понимать где можно этот "div" применять, а где реально требуется семантический тег для заголовка.
@maxgraph 3 жыл бұрын
Я так не считаю. Если пишешь title - значит ты уверен что там заголовок, иначе зачем так называть. Ничего другого, кроме как заголовок, с названием title быть не может.
@user-ll3qg1xm5b 3 жыл бұрын
@@maxgraph Делают div, чтобы не переопределять стили тега h, очевидно.
@maxgraph 3 жыл бұрын
Тогда можно столкнуться с проблемой похуже, если использовать див в макетах, где заголовки тонкие. потом поставят заголовок и будет жирно. А если писать изначально тонкий шрифт - тогда смысл от дива?))
@sashnevski 3 жыл бұрын
Один опытный верстальщик сказал:"Пусть семантикой занимаются сеошники"
@andriifentisov4179 3 жыл бұрын
@@sashnevski теги nav, header, footer и т.д. тоже сеошники расставлять будут?
@leriys 2 жыл бұрын
Спасибо!
@maxgraph 2 жыл бұрын
Пожалуйста)
@stanislavbeliy3646 3 жыл бұрын
НУ ЧТО, иду переделывать проекты) Спасибо автору, очень интересно)
@adaewandrei3725 Жыл бұрын
спасибо!
@6718289 3 жыл бұрын
Скажите, а что вы думаете по поводу сайта на тильде в смысле верстки?
@maxgraph 3 жыл бұрын
Привет! Считаю, что для простых (временных) решений для бизнеса, типа тестирования продаж продукта - пойдет. Но адекватный, рабочий, доступный сайт с его помощью создать невозможно. Только "заплатку")
@DmitryEverise 3 жыл бұрын
Сложносоставной заголовок(состоящий из нескольких шрифтов в несколько строк + иконка, например) как еще обозначить если не div.title? Все индивидуально. Так же как и вложенность стилей. Если писать с использованием препроцессора sсss - сам препроцессор к этому располагает. Еще! Использование нецелочисленных значений в иконках - это обязательно если так сделано в прототипе, графические дизайнеры будут ненавидеть вас за ваш перфекционизм, для них сверх важны выверенные толщины глифов, просвет и другие параметры, поэтому заниматься корректировкой дизайна верстакам точно не следует. А что следует - почитать книги о типографской верстке, верстке журналов, буклетов и баннеров. Эти знания точно дадут представления как должен перестраиваться сайт, какие отступы делать, и почему правило близости так важно. Непонимание основ самой верстки - сверхчастая проблема всех верстаков, я бы ее поставил во главу угла всего списка.
@maxgraph 3 жыл бұрын
Иконки делаются фоном (или через свг). И тот, и другой метод не помешает заголовку, так что нет, див тут остается ошибкой. Вложенность стилей - ошибка по БЭМ, препроцессор может преобразовать свой вложенный код в обычный, без вложенностей.
@RainbowJet1 3 жыл бұрын
По поводу class="title" у div. Могу говорить только за себя, может это поможет понять почему так могут делать другие. Пока я учусь верстать, и сейчас у меня это делается на автомате. Я знаю что все h это блочные элементы, но поскольку в заголовках пишут текст, то в мозгу сразу по привычке срабатывает скрипт "так, я сделал текст, надо сделать для него блок чтоб было больше возможностей для управления: а вдруг в будущем для заголовка понадобится какое нибудь выравнивание не совсем по центру с помощью margin, или вообще position: absolute(тогда как раз родительскому блоку удобно будет дать position: relative), да и в целом уже мышление сформировалось блочное, а текст без блока в него как-то не вписывается; в общем на всякий случай пусть у заголовка будет родительский блок, чтоб потом не париться с его позиционированием и прочими проблемами". Тоесть мозг таким шаблоном мышления привык уменьшать себе работу в будущем. И при этом я понимаю что можно прописать просто display: block/inline-block и это избавит от ненужного div, но.. привычка появилась быстро. А видео годное, спасибо. С некоторых пунктов орнул, какие-то знал, над какими-то задумался. Другие так подробно не рассказывают, а гуляют по поверхности типа просто ".. называйте классы правильно. Далее другая ошибка - проверяйте вёрстку на w3c. Далее другая ошибка .."
@maxgraph 3 жыл бұрын
спасибо :)
@Insp63 Жыл бұрын
Подскажите, а почему псевдокласс visited ведет себя как hover? Отдельно hover работает, но стоит добавить visited с другим цветом фона, при наведении мыши показывается цвет не hover-а, а visited и когда мышь уходит выделение пропадает
@maxgraph Жыл бұрын
Такого не бывает, если правильно написаны стили
@zharaserdaly7376 2 жыл бұрын
Здравствуйте, где можно найти ваше видео по стайл инт???
@maxgraph 2 жыл бұрын
В поиске по каналу вводите stylelint
@murshi2343 3 жыл бұрын
Еще ошибка, это излишнее количество плагинов в проекте..
@jiz842 3 жыл бұрын
Вы проверяете задания в skillbox по верстке?
@maxgraph 3 жыл бұрын
Да
@sashachichvarkin2109 3 жыл бұрын
это универсальный тег, можно вообще одними дивами верстать. Бывает ситуация когда нужен заголовок, а теги не уместны . Разные ситуации бывают, а так да, думать надо что пишешь в классах. БЭМ - в помощь.
@maxgraph 3 жыл бұрын
див - не универсальный. див - для построения верстки или для элементов, для которых тег не придумали :)
@sashachichvarkin2109 3 жыл бұрын
@@maxgraph - дружище, ты тему скользкую в этом видео выложил. Лучше подумай, да по делу сделай видос. Того, чего нет в интернете в русскоязычном, та инфа которую трудно найти новичку (обычно она разрознена, ее трудно собрать), а эту хрень на каждом сайте по верстке обсуждают знатоки. И это только твое мнение. Контент делай полезный, интересный, что бы было за что цепляется. Всех благ тебе.
@maxgraph 3 жыл бұрын
Ничего скользкого нет. Простые правила, которые вы (и многие) не знаете. Я лишь рассказал о них)
@sashachichvarkin2109 3 жыл бұрын
@@maxgraph , ты решил чисто подметить, мол смотрите чего я узнал. Твоя инфа и гроша ломоного не стоит, на каждом заборе пишут об этом, а бы чего сегодня бы дать на выкорм подписчикам. Одна вода... Про кириллицу вспомнил)), зачем? Неужели у тебя такие подписчики которые классы пишут кириллицей?? Ставлю диз. , за чрезмерную самоуверенность и снобизм. Ладно ,я скорее всего ошибся каналом однозначно. Изживите ребята что насрал в ваш огород, не смог пройти мимо, когда увидел очередного проповедника html)) и потратил время еще. Ребята, мой вам совет, нахер вам эти проповедники не нужны, самое важное это практика. Начинайте делать уже сейчас..
@maxgraph 3 жыл бұрын
Вы абсолютно не в теме, видимо. И стоит погуглить, что такое самоуверенность и снобизм :) Делайте верстку как хотите, но писать в комментариях неправильные суждения не надо, пожалуйста.
@user-dz1dr6wq1u 3 жыл бұрын
Как вы сделали свой верхний левый угол ( свернутая иконка для быстрого доступа гугл таблицы?)
@maxgraph 3 жыл бұрын
если вы про левый угол браузера - просто на вкладке браузера нажимаете закрепить.
@user-of3pn7jn4p 3 жыл бұрын
Спасибо за видео:) А как проверять верстку на сафари? Через виртуалку только?
@maxgraph 3 жыл бұрын
Купить мак, купить браузерстак, установить виртуалку)
@Future656 2 жыл бұрын
Из этого видео узнал больше чем с большинства курсов
@maxgraph 2 жыл бұрын
👍
@articus89 Жыл бұрын
Спасибо, узнал много нового. Но предположим есть модальное окно в которое нужно запихнуть много контента. Если не указать header, то все расползется за пределы экрана. Как быть в этом случае? Я бы ставил header + overflow
@maxgraph Жыл бұрын
не очень понял, о каком header речь, и как он влияет на размер.
@articus89 Жыл бұрын
@@maxgraph прошу прощения, неправильно написал, я имел ввиду height
@maxgraph Жыл бұрын
Погуглите мой плагин graph-modal, там все без высоты хорошо работает :)
@user-si2lo2tb1s 3 жыл бұрын
Я не уверен для кого снято это видео, но тут 70% ошибок можно оспорить. Табуляция? Следующий верстальщик просто в редакторе подгонит в 2 клика табуляцию под себя. Табуляция важна для бека? Спрашиваешь как он любит после завершения тем же углифаем ровняешь все под его вкус. Кириллица, длинные названия или что-то еще с названиями классов? Любой препроцессор css решает проблемы с вложенностью, длинною и прочим. А если класс назван "korzina" то это плохо, а если spa то уже класс "ghhdduus" это уже принято, так? Да, после ухода с флоатов перестали у блоков фиксовать высоту так как исчезла проблема зацепа блоков. А как же выпадающие списки с фиксированными высотами или их аналогами max-width для анимации? Фиксированная высота скажем в 100vh для мейн экрана? !important плохо согласен, но когда слик или овл идут со своими стилями а их надо поменять под себя, как перебить их стиль? Искать в их файлах название класса, считать вес класс тег а потом у себя дописывать макарон что бы перебить? В принципе для новичков полезная инфа, но деды то знают что как ни крути, а что-то да надо костылем подпереть)
@maxgraph 3 жыл бұрын
Ну это больше под новичков и было Но и деды могут обойтись без костылей, если постараться) Да и ваши доводы у моим отношения не имеют
@user-mr6yt2lz5v 3 жыл бұрын
полностью согласен с вами, выключил на 8 минуте.
@avaba 3 жыл бұрын
Табуляция тоже важна. Например ты сделал сайт на WP. А заказчик или другой программист решил в админке через Внешний вид - Редактор изменить что-то, а там табуляция нарушена...
@igoriugin1253 3 жыл бұрын
Здравствуй, есть вопрос, мне попал сайт в котором все значения заданны через vh/vw, правильный ли это подход? Я думаю, что нет, но я могу ошибаться. Это попадает под проблему адаптива, кажется.
@maxgraph 3 жыл бұрын
Это не очень хороший подход, привет. Но в целом используемый
@igoriugin1253 3 жыл бұрын
@@maxgraph а это не вызовет проблем с адаптивом?
@maxgraph 3 жыл бұрын
да нет, не должно)
@igoriugin1253 3 жыл бұрын
@@maxgraph спасибо за ответ. Ещё, хотел бы сказать, что очень нравится ваши видео и подача. Надеюсь, что вам это тоже доставляет удовольствие
@maxgraph 3 жыл бұрын
спасибо) ну, если бы не было удовольствия - я бы не делал)
@maximpopov4106 3 жыл бұрын
Ролик Хороший, но не совсем согласен, с title. И еще хотел спросить, всегда нужно подключать normalize.css я просто его ни когда не использую, у меня в других браузерах всегда более или менее норм отображается.
@maxgraph 3 жыл бұрын
а что не так с title?) нормалайз в идеале лучше подключать
@maximpopov4106 3 жыл бұрын
Делаю div.title > h1,2,3.. мне просто тимлид говорил что текстовым элементам к примеру в карточке товара лучше не задавать классы. И другие видео уроки смотрел тоже такое видел.
@maxgraph 3 жыл бұрын
Ну это странно, ведь даже по Бэм это стоит делать)
@evgeniyprowork 3 жыл бұрын
@@maxgraph обычно текстовым элементам не дают классы когда верстка натягивается на CMS, в этом случае для текста делается обертка и класс дается именно ей
@maxgraph 3 жыл бұрын
@@evgeniyprowork Ну да, такое бывает. Но все равно это бывает реже, чем с классами по БЭМ.
@lisofsky8151 3 жыл бұрын
спасибо
@maxgraph 3 жыл бұрын
пожалуйста)
@dobpblugg3371 Ай бұрын
Хотел узнать, учусть верстать сайты и столкнулся с такой проблемой что не знаю, как назвать переменную. И я подумал, а что если взять ключевое слово у меня в секции говорилось про профессора, я взял эту переменную и делал с БЭМ. Так тоже можно?
@maxgraph Ай бұрын
Да, вполне можно)
@user-wb9rd9bu9n 2 жыл бұрын
👍👍👍👍👍
@denissheyanov801 3 жыл бұрын
Если бы Вы Максим также объясняли все ошибки на платформе Skillbox своим ученикам, цены бы вам не было)))
@maxgraph 3 жыл бұрын
Я это и делаю :)
@denissheyanov801 3 жыл бұрын
@@maxgraph Блин, значит мне просто так не повезло)
@maxgraph 3 жыл бұрын
Вы на поняли :) Я специально не рассказываю все ошибки досконально) это готовит к реальной работе, это заставляет что-то поискать, подумать. Это важно)
@splcell 2 жыл бұрын
Ну естественно добавляя div ты проверяешь работает ли без него...проблема в том, что почти всегда не работает. А вообще все это чисто субьективно, потому что есть несколько способов сделать одно и тоже и один считает правильным такой вариант, а другой другой. Например на некоторых курсах наоборот учат вкладывать ссылку в кнопку когда это нужно и дают читать статьи в которых приводится обоснование правильности таких действий...в этом и есть главная проблема, есть много путей и нет единого стандарта
@maxgraph 2 жыл бұрын
Не на все есть несколько способов. Например, вкладывать ссылку в кнопку вообще запрещено :)
@AndiYarPk 3 жыл бұрын
!important можно использовать в случае когда правило класса должно переопределить инлайновые правила у элемента.
@maxgraph 3 жыл бұрын
стоит просто не писать инлайн-стили.
@AndiYarPk 3 жыл бұрын
@@maxgraph Если их js присваивает. В некоторых случаях это неизбежно
@maxgraph 3 жыл бұрын
Так и этого можно избежать
@AndiYarPk 3 жыл бұрын
@@maxgraph У меня был 1 случай на legacy проекте когда не избежать
@deniskhasanov8296 3 жыл бұрын
Все классно, но не совсем понял как быть с dis fl, jc spac-beetw при добавлении карточек, что делать и как решить эту проблему?
@maxgraph 3 жыл бұрын
Лучший вариант - гриды Или делать отступы между блоками, а крайним правым отступ обнулить
@prokrastinator6648 3 жыл бұрын
В целом очень интересно, есть штука которую на вооружение взял из урока, но я совершенно не согласен с темой - "Проблема переполнения на сайте" ведь есть четкие лендосы с оговоренным дизайном, которые никто не будет менять, зачем вот как в примере делать то 6ть блоков, то 8мь? ведь дизайн тогда весь будет меняться, а не только в одном месте это как будто двойная работа. Я еще понимаю когда есть страницы которые заранее подразумевают гибкие размеры, к примеру картинки на карточки товаров или текст для статей блога, там это надо учитывать, но здесь это по-моему трата времени. Если нет вы апологет другого, покажите примеры где это реально может пригодится и это надо учитывать.
@maxgraph 3 жыл бұрын
Лично я не вижу никакой двойной работы в этом. Просто научиться это сразу учитывать и все. Время не увеличится А насчёт чёткого дизайна - отчасти я согласен, но сам попадал на штуки типа "тут короче у нас ещё преимущества появились, закинь-ка", и что-то в таком духе :)
@prokrastinator6648 3 жыл бұрын
@@maxgraph так там будет с каждой секцией так. Вот если типичный случай для секции - это картинка с одной стороны и текст(или аккордион) с другой, тут кроме как скрол сделать ничего в голову не приходит, что бы доп текст верстку не сломал. Или еще такой момент, вот есть секция на ней те же 6ть блоков, но есть картинка на фоне, как здесь быть? Было бы круто увидеть видео с подобными случаями и как с ними справится, я думаю это полезно.
@maxgraph 3 жыл бұрын
Окей, подумаю :)
@detro1821 3 жыл бұрын
Как относитесь к макс ширине для перевода строки?
@maxgraph 3 жыл бұрын
Нормально)
@detro1821 3 жыл бұрын
@@maxgraph видео уже 5 месяцев, а вы все еще отвечаете на вопросы.. Спасибо, учитель.
@Kot_off 3 жыл бұрын
Давай видео про Vue, Next js =))
@maxgraph 3 жыл бұрын
скука)
@podoprigoraisv 3 жыл бұрын
Думаю стоило сказать, что при адаптивной верстке необходимо использовать rem вместо px это важно!
@maxgraph 3 жыл бұрын
Это абсолютно неважно, можно адаптив и с пикселями сделать) Но да, практика хорошая
@yura_8952 3 жыл бұрын
А чем это принципиально?
@podoprigoraisv 3 жыл бұрын
@@yura_8952 1rem = font-size of root element, т.е если мы задаем для html font-size 10px или более правильно 62.5% это 10 / 16 (размер шрифта браузера по умолчанию), мы можем только изменив размер шрифта в html автоматически "повлиять" на всю верстку.
@rytp624 2 жыл бұрын
Максим, я вот учусь на скиллбоксе и у меня появляются спорные моменты в вёрстке, и я не знаю даже с кем посоветоваться. А в телеге не всегда подскажут то, что хотелось бы Есть ли какие-нибудь преподаватели, которые отвечают хоть более-менее быстро, а не по 2 дня, как это делают проверяющие? Я просто каждый день верстаю и с чем-то сталкиваюсь.
@maxgraph 2 жыл бұрын
Проверяющие отвечают раз в сутки, почти все)
@rytp624 2 жыл бұрын
@@maxgraph у моего выходные через день) или через 2, если сегодня не отзовётся
@maxgraph 2 жыл бұрын
Вы можете его сменить, если очень хочется
@rytp624 2 жыл бұрын
@@maxgraph на вас можно?)
@maxgraph 2 жыл бұрын
На кого угодно можно)
@detro1821 3 жыл бұрын
Допустим height использовать не надо, а как вы относитесь к min-width, min-height для кнопок или же для целой секции?
@maxgraph 3 жыл бұрын
да тут не "допустим". А точно не надо)) min-height можно использовать, но обязательно в связке с паддингами, чтобы контент не имел возможности "прилипнуть" к краям. min-width - то же самое.
@detro1821 3 жыл бұрын
@@maxgraph а как тогда задавать размеры секциям и кнопкам?
@maxgraph 3 жыл бұрын
Размеры элементов берутся из их контента
@detro1821 3 жыл бұрын
@@maxgraph Понял, просто бывают моменты когда надо сделать две кнопки, которые в одном ряду однаковым размером, но проблема в том, что у этих кнопок разный контент и каждой свой паддинг, получается
@u-kob Жыл бұрын
В input сдублировали шрифт, потом, когда его нужно поменять, идём в css и начинаем дублировать заново 😁 А inherit для чего сделано? 😉
@rtnjo6936 3 жыл бұрын
Юзайте друзья styled-components и будет вам счастье)
@user-gs7ro3tl9t 3 жыл бұрын
Но это неточно)))
@mst9301 2 жыл бұрын
Вышло видео про семантику ?
@maxgraph 2 жыл бұрын
Ещё собираю материал)
@mushnikov35 3 жыл бұрын
important бывает нужен когда кастомизируешь стили какого то плагина, чтоб перебить базовые, а так по сути он не нужен, если это не легаси код 90-х годов на миллион строк
@maxgraph 3 жыл бұрын
Так можно использовать селекторы прямиком из плагина - импортант не понадобится
@mushnikov35 3 жыл бұрын
@@maxgraph а если по api грузиться ?
@maxgraph 3 жыл бұрын
разницы нет)
@ko22012 Жыл бұрын
С flex нужно использовать gap, а не margin, ибо после переноса элементов может верстка полететь. А gap учитывает.
@maxgraph Жыл бұрын
Наоборот, не нужно. Поддержка в сафари ещё очень мала
@detro1821 3 жыл бұрын
здравствуйте, а вот если заказчик в будущем захочет поменять декоративные элементы ему прийдется лезть в код, почему не сделать их имг для удобства?
@maxgraph 3 жыл бұрын
Здравствуйте, зачем лезть) их можно сделать через атрибут style
@detro1821 3 жыл бұрын
@@maxgraph а вы так делаете? Или всегда бекграундом?
@maxgraph 3 жыл бұрын
Так это и есть бэкграунд)
@detro1821 3 жыл бұрын
@@maxgraph я просто был на фриланс бирже и смотрел на работы топ фрилансеров, может, даже знаете одного из них фрилансер по жизни и я заметил что они все время делают с помощью имг и в редкости беком
@maxgraph 3 жыл бұрын
Ну это не значит что они делают верно))
@ctacello 3 жыл бұрын
почините ссылку к "декоративные и контентные изображения"
@maxgraph 3 жыл бұрын
она на самом деле была, в редакторе видео видна, а у самого видео почему-то нет. Сделал чуть другую, спасибо.
@user-xv9nz9we9d 3 жыл бұрын
можно инпутам в своем резете прописать фонт-фэмили инхерит)
@mit7871 3 жыл бұрын
Только прикол в том, что это реально не особо важно, а если глянуть в большие проекты то там всё это сто раз нарушается
@maxgraph 3 жыл бұрын
Кому как. На самом деле важно. А большие проекты - вовсе не значит что правильные))
@_cybernetic 3 жыл бұрын
Полностью согласен. Видел некоторые мощные ресурсы, которые не сдвинешь с первого места в выдаче, а они являются порталом. А по опыту, скажу так - на портале пром юа вычислил некоторые косяки и предъявил, на что мне сказали - умник, сделай своё, а не рассказывай. Вот и получается что этот портал хрен чем сдвинешь, кеш они зарабатывают многомиллионный. И хоть правильно ты умеешь писать, хоть транслитом - пофигу. Бабло у них, а не у тех, кто рассказывает как надо правильно.
@maxgraph 3 жыл бұрын
Мне за рассказ как правильно платят очень даже хорошо :) за обучение людей, точнее
@_cybernetic 3 жыл бұрын
Я же с вами не спорю)) Платят и Слава Богу, искренне за вас рад. Просто делюсь с вами тем, что видел за свою практику. Сам и дизайн делал, и верстал, и писал свой движок, и местами использовал транслит. Результат - уровень загрузки 100 и 100, а рекламное агенство (для которых создавал и раскручивал сайт) остались ооочень довольны, потому как и высокочастотные запросы висят уже четвертый год титаново.
@maxgraph 3 жыл бұрын
Ну я все равно топлю за правильность и буду, потому что она не мешает делать хорошие сайты)
@vitamax3777 3 жыл бұрын
как проверить сайт в сафари, если у тебя шиндовс?
@maxgraph 3 жыл бұрын
Виртуалка, браузерстак или купить мак))
@user-pf9wz2ik2r 3 жыл бұрын
Hе понял за высоту на примере блока height то как правильно задавать max height
@maxgraph 3 жыл бұрын
Да никак, не надо задавать :)
@user-pf9wz2ik2r 3 жыл бұрын
@@maxgraph а почему ?
@maxgraph 3 жыл бұрын
чтобы сайт проходил проверку на переполнение)
@user-pf9wz2ik2r 3 жыл бұрын
@@maxgraph да видно что вы любите это дело , контент реально полезный спасибо буду смотреть учиться правильно Верстать
@user-pf9wz2ik2r 3 жыл бұрын
@@maxgraph а как это сделать как проверить сайт
@vladkolesnik2274 3 жыл бұрын
Мои пять копеек по поводу !important, например если юзаете библиотеку SlickSlider то она там динамически css добавляет , всякие translate, margin, которые вызывают проблемы с позиционированием и для этого например можно юзать !important чтобы приоритет этим стилям перебить, в остальных случаях !important очень плохо как и сказал Макс!
@maxgraph 3 жыл бұрын
Ну нет же, стили слайдера не надо трогать) только сам css, но не то, что он вешает через js
@vladkolesnik2274 3 жыл бұрын
@@maxgraph стили слайдера как-то не корректно отрабатывают =( все перепробовал помог только импортант
@vladkolesnik2274 3 жыл бұрын
@@maxgraph может неправильно написал, попробую подробнее если интересно, там сложная схема когда два слайдера пытаются синхронизироваться и там какой-то баг со стилями происходит, SlickSlider навешивает свои стили на второй слайдер при прокрутке первого чтобы синхронизироваться , добавляет translate, margin инлайново который портит стили , так как специфичность у инлайновых стилей выше то мои стили не срабатывают и приходится important добавлять
@maxgraph 3 жыл бұрын
@@vladkolesnik2274 ну такие проблемы, я думаю, можно и без импортантов решить.
@lirrr6555 3 жыл бұрын
для аналога br в css открыл для себя такой хак: span::before { content: “\A”; }
@maxgraph 3 жыл бұрын
Интересно) но он же только в начале или конце будет, как псевдо Есть смысл?)
@lirrr6555 3 жыл бұрын
@@maxgraphНапример, когда у нас и не хотим использовать тег
@Vasili_Malai 3 жыл бұрын
Недавно смотрел разбор верстки магазина Amazon, так там такое понаписано, сплошные дивы, инлайновые стили, наименование классов вообще выходит за рамки логики, в наименованиях классов повсеместно встречаются octopus (осьминог), каким боком тут осьминог вообще не понятно.
@maxgraph 3 жыл бұрын
Может Фреймворк какой-то))
@nickluv81 3 жыл бұрын
Почему нельзя просто удалить outline ?
@maxgraph 3 жыл бұрын
Нельзя оставлять пользователей, которые используют клавиатуру, без возможности пользоваться сайтом. Оутлайн помогает понять, где пользователь находится, если использует клавиатуру.
@podoprigoraisv 3 жыл бұрын
По заголовкам не согласен, вложенность сложно соблюсти, лучше ориентироваться на размер, в том же 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;
@podoprigoraisv 3 жыл бұрын
- Нельзя так делать! Как вы собираетесь выполнять валидацию формы? На почту приходит html макет с подставленными данными в нужные места.
@maxgraph 3 жыл бұрын
Делал так очень много раз в течении пяти лет. И валидация, и отправка работают.
@sergeypetrovetsky3431 3 жыл бұрын
в БЭМ назывыаю классы аля .header-nav__link и вроде норм выходит. Не более 3 слов
@maxgraph 3 жыл бұрын
ну и отлично)
@user-gp8ok4yz6p 3 жыл бұрын
(23:19) Про кириллицу в аттрибуте инпута name вообще непонятно, зачем там кириллица если этот атрибут будет обрабатывать сервер при отправке формы, а на сервер приходит значение этого атрибута как ключ массива. А на почту отправить можно в каком угодно виде, это тоже делает сервер. Нипанятна
@maxgraph 3 жыл бұрын
Мы, верстальщики, часто используем простую схему отправки на сервер - через Name и value просто передать их в php и отправить функцией mail. Получаем name="Имя", value="Максим" на почту прилетает Имя: Максим. Все логично)
@Epenckorn 3 жыл бұрын
@@maxgraph Ну, так-то, отправка почты - это масштабная серверная задача, особенно, если заказчик крупный. Там проводится целый ряд обработок. Предложенная Вами обработка хороша только для демонстрации фирме-однодневке (простым foreach в одну строку). Но стоит появиться необходимости добавить отправку файлов, фильтровать и распределять отправку или формировать сложные макеты писем и этот примитив уже никому не нужен. Так что если уж делать, то делать качественно сразу. Я вот уже много лет использую самописный мощный функциональный обработчик, использующий атрибуты name по прямому назначению. А если вы делали видео для новичков, то не стоит приучать их, что "кириллица - это норм".
@user-re1zz4oz2b 3 жыл бұрын
Сафари в топку!
@lommmaster 3 жыл бұрын
Начнем с того, что ты путаешь понятие ошибки и предпочтения. И зачем в списке каждому li присваивать одинаковый класс? Ведь можно прописать же так: ul li { font-size:16px;}/ Есть вложенные li ? прописываем ul > li - так мы экономим много места в файле стилей.
@maxgraph 3 жыл бұрын
Но это не бэм :) не путайте людей.
@ForeverDarkDeath 2 жыл бұрын
31:33 а вот так как ты делаешь тоже нельзя делать. правильное написание тут INHERIT, а не дублирование: button, input, select, teaxtarea, optgroup { font-family: inherit; }
@maxgraph 2 жыл бұрын
Это лишь второй вариант.
@WERWOLION 2 жыл бұрын
видео можно закрывать на длине класов т.к существует Бэм и по бэму длинна классов всегда длинная + своя библиотека классов. не баг а фитча
@maxgraph 2 жыл бұрын
Вообще необязательно :)
@user-kz5go4mp8w 3 жыл бұрын
Разве нельзя так feature, fuature__list, fuature__list-item?
@maxgraph 3 жыл бұрын
Так - можно)
@user-kz5go4mp8w 3 жыл бұрын
@@maxgraph бем это вообще моща. Не представляю как без него работать)
@maxgraph 3 жыл бұрын
Это да))
@zapiski_verstalshika 3 жыл бұрын
разобрал верстку сайта amazon? )))) на 15й минуте все ошибки с того сервиса...
@maxgraph 3 жыл бұрын
бывает))
@zapiski_verstalshika 3 жыл бұрын
@@maxgraph на другом канале разбирали карточку товара на этом сервисе... (Александр Лущенко)... я так не верстал даже когда изучал html, и о семантике даже не слышал. Но что самое интересное, сам очень редко, но допускаю некоторые ошибки описанные в вашем видео))) а стаж верстки более пяти лет, кстати спасибо за видео напоминалку)))
@maxgraph 3 жыл бұрын
@@zapiski_verstalshika Да все мы грешим :) бывает.
@v.prochniy63 2 жыл бұрын
где тебя раньше носило?
@maxgraph 2 жыл бұрын
😀
Bungee Jumping Park
Рет қаралды 33 МЛН
ВебКадеми | Юрий Ключевский
Рет қаралды 11 М.
Фрілансер по життю
Рет қаралды 656 М.