Спасибо за видео! Пока сверстал совсем мало, но тоже начал делать маленький сброс под себя, многое увидел и в твоём сбросе, кажется он намного чище и современнее чем reset или классический normalize 👍🏻
Спасибо за очередной урок! Забавно, что про нормализацию и сброс стилей не видел ни в одном курсе, который смотрел до этого. Можно сказать, что новый материал. Нужно будет только понять как и где это использовать.
Писал в предыдущих видео, что круто было бы ссылки на код прикладывать. Сделать библиотеку, а не только код на гит это вообще круто, выше всяких похвал и ожиданий! Спасибо)
Очень полезное видео. Такого подробного объяснения по сбросу стилей я не припомню. У меня вопрос по поводу сброса стилей, с точки зрения скорости загрузки сайта: что будет быстрее загружать страницу - сбросить стили через звёздочку, или использовать обнуление с пропиской правил для всех тегов?
Ну, на скорость загрузки сайта влияет объем данных, которые загружаются по сети, которые необходимы для отображения сайта. То есть чем легковеснее CSS, тем быстрее загрузится сайт. Но разница между этими двумя вариантами сброса будет настолько незначительна в байтах информации, что ею точно можно пренебречь и стоит в первую очередь подумать о том, что браузеру сбрасывать в ноль отступы большинству элементов точно не обязательно, то есть нет смысла на пустом месте генерировать лишние вычисления (тут может ошибаюсь, так глубоко в работу браузера не копал). В общем и целом, считаю, что оптимальнее всего будет сбрасывать / нормализовывать стили точечно, а не через селектор-звездочку.
@@AleksanderLamkov просто интересно как влияет на скорость загрузки сайта оба метода. Я часто встречаю плохо сделанные сайты, которые очень долго загружаются, у таких проблема обычно в нагрузке на процессор, а не в размере файлов стилей и меда. Если будет время, был бы признателен за видео по этому поводу.
Факторов замедления сайта очень много. Навскидку: глубина DOM-дерева, сложность CSS-селекторов, неоптимальные переходы / анимации через неподходящие свойства, ну и море проблем с JavaScript, начиная от утечек памяти, заканчивая оперированием бешеным объемом данных на клиентской части. В общем, да, видео на такую тему не помешало бы, спасибо за идею!
Плюсую за видео про скорость. Мне вот интересно, как подключать стили вместе с элементами, чтоб если элемент не использовался на странице, то и ненужные стили не подгружались. А если элементов два одинаковых, то один раз подключились нужные стили и всё…
Вот это уже труднореализуемо в привычном формате «1 файл html + 1 файл css». Нужно парсить статичный HTML-файл и фильтровать CSS-файл, удаляя все неиспользуемые селекторы. Не думаю, что так кто-то делает. Тем более, если на странице есть динамическое изменение DOM (а его не может не быть, если ваш сайт сложнее, чем сайт-визитка без дизайна). В таком случае в принципе собрать «только нужные стили» в один файл будет титанической задачей. Может я не прав и уже есть какие-то рациональные способы, но кроме CSS-in-JS в SPA-приложениях мне ничего на ум не приходит.
Спасибо за видео! Я не понял, за чем нужен normalize? Круто, что он задаёт одинаковые стили всем браузерам, но разработчики же верстают по макетам. Целесообразнее всё обнулить, чтобы удобнее было задавать точечно стили из макета 🤔 Из всех 3 вариантов мне больше всего понравился кастомный. Если голый html, то он его немного приукрашивает. А если есть классы (условно верстаешь макет), то лишние стили уберутся.
Привет! Нормалайз в первую очередь задает одинаковые стили (отступы, в основном) элементам без классов, которые генерируются CMS через WYSIWYG-редакторы.
Я не понял в чем проблема сброса всех стилей через "*". Меньше кода для глаз, меньше размер файла для передачи браузеру. Ну есть избыточность в сбросе значений там где это не нужно, но это уже проблемы браузера как это оптимально обрабатывать. Александр, буду рад вашему ответу!
«Это уже проблемы браузера» - этим можно оправдать что угодно, хоть несемантическую верстку, хоть автоприведение типов при нестрогом сравнении в JS. Если сбрасывать условные паддинги каждому из сотен существующих HTML-элементов, вместо точечного сброса у 5-10, то это не будет оптимальнее лишь потому, что «так будет меньше размер файла». Ну а «меньше кода для глаз» достигается выносом сброса стилей в отдельный файл / либу. Вот вырезка с MDN на счет вопроса: developer.mozilla.org/en-US/docs/Learn/Performance/CSS Don't apply styles to more elements than needed: A common mistake is to apply styles to all elements using the universal selector, or at least, to more elements than needed. This kind of styling can impact performance negatively, especially on larger sites.
Но при динамическом добавлении/удалении класса стили будут прыгать, что будет неожиданным и приведет к неправильному отображению. Например, без класса элемент имеет браузерные отступы, а js добавив класс active сразу из обнулит, помимо своей основной задачи
У меня ни разу за все годы работы не возникало ситуации, когда на элемент, который изначально не имеет никаких классов, добавлялся бы класс состояния типа 'is-active'. Инструкция по типу document.querySelector('p').classList.add('is-active') сама по себе крайне странная.
@@AleksanderLamkov Да, это нечастая ситуация, но все равно, при подходе что обнуление применяется только к элементам у которых прописан класс, требует jsника постоянно знать и помнить об этом. Особенно, если элементы создаются динамически и без класса (такое может быть)
И даже если элементы не создаются динамически, вариант типа is-active может устанавливаться js, например, при реализации логики при появлении элементов в контейнере при прокрутке. В таком варианте, js логика может и не требовать наличия классов у элементов, а просто заявлять, что любому видимому элементу в контейнере будет выставлен класс active. Понятно, что можно и по другому всю логику делать, но суть в том, что если использовать такой подход (обнуление при наличие класса), то надо не забывать об этом при использовании сторонних js библиотек
Я понимаю твою логику. Но лично я ни разу не добавлял и не удалял класс состояния элементу с семантическим тегом (например, ), который кроме класса состояния никаких других классов не имеет.
Чтобы скачать пакет через npm и использовать его, в проекте должен быть сборщик проектов. В ином случае нужно открыть файл со стилями index.css по ссылке в описании и скопировать всё содержимое в начало собственного файла стилей.
Я бы закинул в селектор p:not([class]) {} То есть для всех элементов параграфов, у которых нет классов. Но для body {} точно не стоит, пострадает перформанс.
Подскажи пожалуйста, я в VSCode в отдельный файл CSS закинул код Reset от Эрика Мейера, открываю html в LiveServer смотрю стили и они не сбрасываются, почему это может быть?
@@AleksanderLamkov да, действительно, я просто в VSCode внес файл CSS стилей в папку, в которой не находится html файл мой, а как добавил файл стилей куда надо всё заработало, спасибо!
Дружище, если меня спросят на собесе - "Зачем ты этот сброс делаешь ?" как мне правильно ответить я лично для того чтобы правильно верстать хотя не совсем уверен. Спасибо.
Чтобы привести браузерные различия в отступах некоторых элементов к единому значению и чтобы избавиться от зачастую ненужных отступов у элементов, имеющих атрибут class.
Вызывает вопрос ситуация - все разработчики обнуляют\нормализуют стили, но зачем разработчики браузеров прописывают дефолтные стили, если их потом разработчики будут обнулять? Спасибо.
Без стилей по умолчанию кнопка не выглядела бы как кнопка, а ссылка, как ссылка. Это банальная перестраховка, чтобы даже без загрузки стилей сайт оставался минимально работоспособным.
поспорю с тем что кроме ol, ul браузер не добавляет больше внутренний отступ, у тега button есть внутренний отступ, у input type='checkbox' есть внешний отступ, так что автор в этом не очень хорошо разобрался. Так что думаю лучше сбросить отступы у всех, т.к не известно еще каким элементам браузер задает отступы
Я нарочито не внес в этот список эти элементы. Не стоит обнулять внутренние отступы кнопкам и полям ввода. Если сайт будет интегрироваться с CMS, то нередки случаи, когда в публичной части админки из-за таких глобальных стилей для интерактивных элементов весь интерфейс поедет. Лучше точечно задать стили по селекторам классов .button {} и .input {}, там же и перебить внутренние отступы, если необходимо.
Все хорошо и информативно. Но, на мой взгляд слишком сложная и сухая подача. И.М.Х.О. Много академических определений, которые все сразу не запомнить, также слишком быстро. Можно помедленнее и с повторением таких терминов, как например, специфичность. Не сразу вспомнишь на лету, что означает термин, который изучался в предыдущем или еще более раннем видео. Еще нужны какие-то аналогии, напоминания. И еще раз про скорость: можно помедленнее. Не успеваешь схватывать и запоминать все сразу. Еще сложно понять материал, когда идет забегание вперед и упоминания терминов или селекторов, про которые не упоминалось до этого. Желательно сначала про них в двух словах, а потом КАК их применять. Потому что на практике сначала изучают ЧТО, а потом КАК.
Хорошее видео, только непонятно для кого. Выстрелил, как из пушки. Поймёт только подготовленный верстальщик, а ему это видео уже бесполезно. Начинающим нужен простой понятный язык и наглядные примеры, не в коде. Покажите простое, сложное потом поймут сами. У Вас половина стилей в файле, для обучающих вёрстке, просто не нужны. Сделайте два урока, один простой второй более сложный. На мой взгляд так проще, главное понятней.
Тогда прошу более конкретный совет. Изначальный комментарий по диагонали читается как «видео хорошее, но плохое, все надо по-другому, не скажу как именно, но по-другому, не как у вас, у вас сложно, а надо просто». Давайте дожмем критику, пожалуйста. Мне нужны аргументы. 1. Подготовленному верстальщику разве не будет полезно услышать о псевдоклассе where, медиазапросе prefers-reduced-motion и о том, что «не нужно сбрасывать отступы всем элементам подряд»? Не думаю, что все разработчики знают о таких тонкостях. 2. «Начинающим нужны примеры не в коде» - это как? Курс ведь про код. Про CSS-код. Как без кода обучать людей? Приведите пример. 3. Какая такая половина стилей лишняя? Приведите пример. 4. «Сделайте простой и сложный урок» - как вы себе это представляете? Курс для детсадовцев, где всё будет построено на аналогиях и ни в коем случае не показывать им код, а курс посложнее - тот, который есть у меня сейчас? Ну вот давайте раскроем и этот пункт вашей критики.
@@AleksanderLamkov Давайте без дискуссий. Я критикой не занимаюсь. Тем более здесь моё мнение вообще не имеет никакого значения. Нет времени. Я имел ввиду, что конкретное видео не является удачным для обучения, это скажет любой более менее грамотный человек и только, все. Большая половина зрителей, которые ставят лайки, до конца не понимают, о чем Вы говорите. Понятно, контент скороговоркой, не больше 10 минут для RUclips и т.д., это хайп, ради просмотров, лайков и подписки. Признаю у Вас это очень хорошо получается, это нормально. Сам подписан. Да ещё, в браузере, примеры выглядят наглядней. Вы с этим тоже можете не соглашаться.
В кастомном то сбросе? Ну, я добавил самый минимум… Разве что аннулирование анимаций может показаться лишним, но мне, как адепту цифровой доступности, это кажется очень важным моментом :)
Это смотря какой проект. Разумеется, в лендинге за 3000₽ можно этим пренебречь. А если разрабатывается веб-приложение на миллионы или даже десятки миллионов, где каждый чих задокументирован в ТЗ, в таком случае приходится углубляться в нюансы.
Нет ничего прекраснее, чем проснуться от уведомления о видео на твоём канале
Качество структурирования, подачи информации просто ТОП! спасибо)
Максимум качественно поданной информации за минимум времени. Спасибо!
Спасибо за видео! Пока сверстал совсем мало, но тоже начал делать маленький сброс под себя, многое увидел и в твоём сбросе, кажется он намного чище и современнее чем reset или классический normalize 👍🏻
Спасибо за очередной урок! Забавно, что про нормализацию и сброс стилей не видел ни в одном курсе, который смотрел до этого. Можно сказать, что новый материал. Нужно будет только понять как и где это использовать.
Спасибо за видео, очень приятная подача
Спасибо, очень полезный материал и легкая подача!
Саша - красава!
Писал в предыдущих видео, что круто было бы ссылки на код прикладывать. Сделать библиотеку, а не только код на гит это вообще круто, выше всяких похвал и ожиданий! Спасибо)
Такого к уже написанным курсам организовать не получится. В следующих версиях курсов учту этот момент. Спасибо за обратную связь!
Огромное тебе спасибо!
Урок просто топчик!))
Пушка!!!
Спасибо!
Очень полезное видео. Такого подробного объяснения по сбросу стилей я не припомню. У меня вопрос по поводу сброса стилей, с точки зрения скорости загрузки сайта: что будет быстрее загружать страницу - сбросить стили через звёздочку, или использовать обнуление с пропиской правил для всех тегов?
Ну, на скорость загрузки сайта влияет объем данных, которые загружаются по сети, которые необходимы для отображения сайта.
То есть чем легковеснее CSS, тем быстрее загрузится сайт. Но разница между этими двумя вариантами сброса будет настолько незначительна в байтах информации, что ею точно можно пренебречь и стоит в первую очередь подумать о том, что браузеру сбрасывать в ноль отступы большинству элементов точно не обязательно, то есть нет смысла на пустом месте генерировать лишние вычисления (тут может ошибаюсь, так глубоко в работу браузера не копал).
В общем и целом, считаю, что оптимальнее всего будет сбрасывать / нормализовывать стили точечно, а не через селектор-звездочку.
@@AleksanderLamkov просто интересно как влияет на скорость загрузки сайта оба метода. Я часто встречаю плохо сделанные сайты, которые очень долго загружаются, у таких проблема обычно в нагрузке на процессор, а не в размере файлов стилей и меда. Если будет время, был бы признателен за видео по этому поводу.
Факторов замедления сайта очень много.
Навскидку: глубина DOM-дерева, сложность CSS-селекторов, неоптимальные переходы / анимации через неподходящие свойства, ну и море проблем с JavaScript, начиная от утечек памяти, заканчивая оперированием бешеным объемом данных на клиентской части.
В общем, да, видео на такую тему не помешало бы, спасибо за идею!
Плюсую за видео про скорость. Мне вот интересно, как подключать стили вместе с элементами, чтоб если элемент не использовался на странице, то и ненужные стили не подгружались. А если элементов два одинаковых, то один раз подключились нужные стили и всё…
Вот это уже труднореализуемо в привычном формате «1 файл html + 1 файл css». Нужно парсить статичный HTML-файл и фильтровать CSS-файл, удаляя все неиспользуемые селекторы. Не думаю, что так кто-то делает. Тем более, если на странице есть динамическое изменение DOM (а его не может не быть, если ваш сайт сложнее, чем сайт-визитка без дизайна). В таком случае в принципе собрать «только нужные стили» в один файл будет титанической задачей.
Может я не прав и уже есть какие-то рациональные способы, но кроме CSS-in-JS в SPA-приложениях мне ничего на ум не приходит.
Видосы топ
Thank you so much 😊
Есть статистика: что чаще применяют - normalize или reset?
Нормалайз, судя по статистике на npm.
Спасибо за видео! Я не понял, за чем нужен normalize? Круто, что он задаёт одинаковые стили всем браузерам, но разработчики же верстают по макетам. Целесообразнее всё обнулить, чтобы удобнее было задавать точечно стили из макета 🤔
Из всех 3 вариантов мне больше всего понравился кастомный. Если голый html, то он его немного приукрашивает. А если есть классы (условно верстаешь макет), то лишние стили уберутся.
Привет! Нормалайз в первую очередь задает одинаковые стили (отступы, в основном) элементам без классов, которые генерируются CMS через WYSIWYG-редакторы.
Я не понял в чем проблема сброса всех стилей через "*". Меньше кода для глаз, меньше размер файла для передачи браузеру. Ну есть избыточность в сбросе значений там где это не нужно, но это уже проблемы браузера как это оптимально обрабатывать.
Александр, буду рад вашему ответу!
«Это уже проблемы браузера» - этим можно оправдать что угодно, хоть несемантическую верстку, хоть автоприведение типов при нестрогом сравнении в JS.
Если сбрасывать условные паддинги каждому из сотен существующих HTML-элементов, вместо точечного сброса у 5-10, то это не будет оптимальнее лишь потому, что «так будет меньше размер файла».
Ну а «меньше кода для глаз» достигается выносом сброса стилей в отдельный файл / либу.
Вот вырезка с MDN на счет вопроса:
developer.mozilla.org/en-US/docs/Learn/Performance/CSS
Don't apply styles to more elements than needed: A common mistake is to apply styles to all elements using the universal selector, or at least, to more elements than needed. This kind of styling can impact performance negatively, especially on larger sites.
Есть предположение что про отступ тэга pre забыли
Но при динамическом добавлении/удалении класса стили будут прыгать, что будет неожиданным и приведет к неправильному отображению. Например, без класса элемент имеет браузерные отступы, а js добавив класс active сразу из обнулит, помимо своей основной задачи
У меня ни разу за все годы работы не возникало ситуации, когда на элемент, который изначально не имеет никаких классов, добавлялся бы класс состояния типа 'is-active'.
Инструкция по типу document.querySelector('p').classList.add('is-active') сама по себе крайне странная.
@@AleksanderLamkov Да, это нечастая ситуация, но все равно, при подходе что обнуление применяется только к элементам у которых прописан класс, требует jsника постоянно знать и помнить об этом. Особенно, если элементы создаются динамически и без класса (такое может быть)
И даже если элементы не создаются динамически, вариант типа is-active может устанавливаться js, например, при реализации логики при появлении элементов в контейнере при прокрутке. В таком варианте, js логика может и не требовать наличия классов у элементов, а просто заявлять, что любому видимому элементу в контейнере будет выставлен класс active. Понятно, что можно и по другому всю логику делать, но суть в том, что если использовать такой подход (обнуление при наличие класса), то надо не забывать об этом при использовании сторонних js библиотек
Я понимаю твою логику. Но лично я ни разу не добавлял и не удалял класс состояния элементу с семантическим тегом (например, ), который кроме класса состояния никаких других классов не имеет.
после установки в терминале npm оно как то автоматом будет к каждому файлу с расширением css применятся или что то нужно сделать?
Чтобы скачать пакет через npm и использовать его, в проекте должен быть сборщик проектов.
В ином случае нужно открыть файл со стилями index.css по ссылке в описании и скопировать всё содержимое в начало собственного файла стилей.
Куда можно было бы закинуть text-wrap balance и свойство которое сглаживает шрифт?
Я бы закинул в селектор p:not([class]) {}
То есть для всех элементов параграфов, у которых нет классов.
Но для body {} точно не стоит, пострадает перформанс.
А куда еще закинуть дефолтный размер шрифта, стиль, лайнхайт, цвет, жирность? @@AleksanderLamkov
В body, однозначно. Это ведь наследуемые свойства и они не нагружают страницу, как тот же text-wrap balance.
@@AleksanderLamkov У batton cursor pointer специально нет, или нужно самому для каждой кнопки добавлять для производительности?
@@AleksanderLamkov кстати заголовоки ведь тоже не наследуют размер шрифта
Подскажи пожалуйста, я в VSCode в отдельный файл CSS закинул код Reset от Эрика Мейера, открываю html в LiveServer смотрю стили и они не сбрасываются, почему это может быть?
Привет! А этот файл стилей корректно подключён в HTML-разметке? Напиши в чат t.me/friendlyFrontendChat, если не разберешься, тебе помогут.
@@AleksanderLamkov да, действительно, я просто в VSCode внес файл CSS стилей в папку, в которой не находится html файл мой, а как добавил файл стилей куда надо всё заработало, спасибо!
Дружище, если меня спросят на собесе - "Зачем ты этот сброс делаешь ?" как мне правильно ответить я лично для того чтобы правильно верстать хотя не совсем уверен. Спасибо.
Чтобы привести браузерные различия в отступах некоторых элементов к единому значению и чтобы избавиться от зачастую ненужных отступов у элементов, имеющих атрибут class.
Вызывает вопрос ситуация - все разработчики обнуляют\нормализуют стили, но зачем разработчики браузеров прописывают дефолтные стили, если их потом разработчики будут обнулять? Спасибо.
Без стилей по умолчанию кнопка не выглядела бы как кнопка, а ссылка, как ссылка. Это банальная перестраховка, чтобы даже без загрузки стилей сайт оставался минимально работоспособным.
поспорю с тем что кроме ol, ul браузер не добавляет больше внутренний отступ, у тега button есть внутренний отступ, у input type='checkbox' есть внешний отступ, так что автор в этом не очень хорошо разобрался. Так что думаю лучше сбросить отступы у всех, т.к не известно еще каким элементам браузер задает отступы
Я нарочито не внес в этот список эти элементы.
Не стоит обнулять внутренние отступы кнопкам и полям ввода.
Если сайт будет интегрироваться с CMS, то нередки случаи, когда в публичной части админки из-за таких глобальных стилей для интерактивных элементов весь интерфейс поедет.
Лучше точечно задать стили по селекторам классов .button {} и .input {}, там же и перебить внутренние отступы, если необходимо.
@@AleksanderLamkov у чекбокса я бы все таки обнулил внешний отступ, а на счет отступов кнопки и инпута я согласен
😇😇😇😇😇
Все хорошо и информативно. Но, на мой взгляд слишком сложная и сухая подача. И.М.Х.О. Много академических определений, которые все сразу не запомнить, также слишком быстро. Можно помедленнее и с повторением таких терминов, как например, специфичность. Не сразу вспомнишь на лету, что означает термин, который изучался в предыдущем или еще более раннем видео. Еще нужны какие-то аналогии, напоминания. И еще раз про скорость: можно помедленнее. Не успеваешь схватывать и запоминать все сразу. Еще сложно понять материал, когда идет забегание вперед и упоминания терминов или селекторов, про которые не упоминалось до этого. Желательно сначала про них в двух словах, а потом КАК их применять. Потому что на практике сначала изучают ЧТО, а потом КАК.
Обнулятся нынче модно...
Хорошее видео, только непонятно для кого. Выстрелил, как из пушки. Поймёт только подготовленный верстальщик, а ему это видео уже бесполезно. Начинающим нужен простой понятный язык и наглядные примеры, не в коде. Покажите простое, сложное потом поймут сами. У Вас половина стилей в файле, для обучающих вёрстке, просто не нужны. Сделайте два урока, один простой второй более сложный. На мой взгляд так проще, главное понятней.
Снимите свои уроки, покажите как надо.
@@AleksanderLamkov Я не блогер, у меня профессия иная. А вот совет полезный дать могу.
Тогда прошу более конкретный совет.
Изначальный комментарий по диагонали читается как «видео хорошее, но плохое, все надо по-другому, не скажу как именно, но по-другому, не как у вас, у вас сложно, а надо просто».
Давайте дожмем критику, пожалуйста. Мне нужны аргументы.
1. Подготовленному верстальщику разве не будет полезно услышать о псевдоклассе where, медиазапросе prefers-reduced-motion и о том, что «не нужно сбрасывать отступы всем элементам подряд»? Не думаю, что все разработчики знают о таких тонкостях.
2. «Начинающим нужны примеры не в коде» - это как? Курс ведь про код. Про CSS-код. Как без кода обучать людей? Приведите пример.
3. Какая такая половина стилей лишняя? Приведите пример.
4. «Сделайте простой и сложный урок» - как вы себе это представляете? Курс для детсадовцев, где всё будет построено на аналогиях и ни в коем случае не показывать им код, а курс посложнее - тот, который есть у меня сейчас? Ну вот давайте раскроем и этот пункт вашей критики.
@@AleksanderLamkov Давайте без дискуссий. Я критикой не занимаюсь. Тем более здесь моё мнение вообще не имеет никакого значения. Нет времени. Я имел ввиду, что конкретное видео не является удачным для обучения, это скажет любой более менее грамотный человек и только, все. Большая половина зрителей, которые ставят лайки, до конца не понимают, о чем Вы говорите. Понятно, контент скороговоркой, не больше 10 минут для RUclips и т.д., это хайп, ради просмотров, лайков и подписки. Признаю у Вас это очень хорошо получается, это нормально. Сам подписан. Да ещё, в браузере, примеры выглядят наглядней. Вы с этим тоже можете не соглашаться.
Ну, многовато сбросов, можно поменьше
В кастомном то сбросе? Ну, я добавил самый минимум… Разве что аннулирование анимаций может показаться лишним, но мне, как адепту цифровой доступности, это кажется очень важным моментом :)
@@AleksanderLamkov в частном порядке да, но в продакшне зачастую список гораздо короче
Это смотря какой проект. Разумеется, в лендинге за 3000₽ можно этим пренебречь. А если разрабатывается веб-приложение на миллионы или даже десятки миллионов, где каждый чих задокументирован в ТЗ, в таком случае приходится углубляться в нюансы.