Никогда не пиши margin, padding и border в CSS

Подписаться 102 тыс.

Просмотров 64 тыс.

50% 1

✅ Переходите на firstvds.ru/s/rydoj и участвуйте в розыгрыше от FirstVDS и в поисках Джона.
⚡️ Не забудьте зарегистрироваться на розыгрыш призов заранее! Он пройдет 14 декабря.
Среди призов:
🔸 Мощный игровой ПК
🔸 34 дюймовый OLED-монитор
🔸 Очки дополненной реальности
🔸 Портативные аудиосистемы JBL.
🔸 Экшн-камера GoPro HERO 11.
И другие крутые призы от FirstVDS и их партнёров!
Таймкоды:
00:00 Коротко о свойствах
00:28 Розыгрыш от FirstVDS
01:27 Теория
02:01 Разбор примера №1
02:38 Разбор примера №2
04:36 Разбор примера №3
06:28 Разбор примера №4
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com

Развлечения

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 109

@krakanosh 6 месяцев назад

Слишком сложно, проще использовать обычные margin'ы и padding'и...да и с ios наверняка что-то да не дружит. Но для общей практики и развития знать про них не помешает. Спасибо за видос)👍

@sashair 6 месяцев назад

В ios все надо дополнительно тестировать, там элементарные стили становятся нелогичными

@user-gy9ci9sx7y 4 месяца назад

До тех пор пока вы не начнете локализировать ваш сайт для арабского или иврита. Вот там вы намаетесь с right/left. А start/end сам знает откуда у вас начинается текст.

@xelth 2 месяца назад

не знаю как мак но айфон не переворачиват текст воооообще ...

@Ekaterinn 6 месяцев назад

Спасибо! Давно уже про эти свойства знаю, но как-то руки не доходили с ними разобраться, а тут ваше видео

@user-olena_shatun 6 месяцев назад

Анна, спасибо большое за вашу работу и за помощь людям

@AOFTG 6 месяцев назад

Всё понятно, но за мою практику, если вспомнить всё проекты, проще использовать обычные свойства. Показанные свойства имеет смысл использовать в проектах, где много контента с изменённым направлением, или где можно переключить направление. А в обычных проектах, даже там где единожды или дважды, необходимо изменить направление, то всё равно проще по старинке забацать. Но знать, что такое есть - полезно. П. С Кликбейт детектед 🙃

@annblok_webdev 6 месяцев назад

Один из вариантов написала в тг - t.me/frontendblok

@michaelkamko 6 месяцев назад

Но для общего развития, и чтобы не отставать, делая все по-старинке - супер! А так согласен.

@farmlingarchontas2216 6 месяцев назад

Хорошие примеры. Мне очень понравилось. Достаточно подробно, но не слишком затянуто. Лайк!

@LostInspector 6 месяцев назад

Спасибо! Уроки стали еще интереснее, так как теперь вообще каждый шаг и значение объясняете!

@andreylagno2372 6 месяцев назад

уроки никогда лишними не бывают даже если они кому то не нравятся

@nickz2586 6 месяцев назад

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

@nadhit87 5 месяцев назад

Отличные свойства! Буду использовать! Аня, спасибо за информацию! 😊

@tolasnisar2494 6 месяцев назад

Спасибо за подробный обзор, может в будущим и понадобиться эта информация.

@sergeymickolaenko1161 6 месяцев назад

Очень полезные и важные советы, спасибо вам большое👍

@lovedota2857 6 месяцев назад

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

@fedordostoevskiy4209 6 месяцев назад

С примерами очень полезно.👍

@meowmeowmeowmeow000 4 месяца назад

Это все конечно реально круто, но хотелось бы увидеть как на реальном проекте или хотя бы на реальной верстке лендинговой страницы применялись свойства которые просто бы должны были переворачивать контент. Да это прикольно когда делаешь адаптив для мобилок и надо все сделать в одну линию но проще уже использовать либо гриды, либо row-gap которые подойдут как для флексов так и для гридов. Справедливости ради хочу отметить что margin-inline и padding-inline которые позволяют задавать по горизонтали отступы, а также margin-block и padding-block которые позволяют задавать по вертикали отступы это прикольно но как будто бы это не понятно зачем и вообще нужно, прикольно что есть, а зачем это, не понятно если честно

@marinagor 6 месяцев назад

интересная информация, спасибо за видео, ждем еще)

@beautifulnature8259 6 месяцев назад

Мм, интересная инфа. Не знал. Спасибо. С вами разобраться гораздо проще😊

@user-gq9bh3si4y 6 месяцев назад

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

@SeniorHuguenot 6 месяцев назад

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

@HG-wu6eb 5 месяцев назад

Благодарю! Интересно! Возможно однажды пригодится.

@JRs_Owners 6 месяцев назад

Большое спасибо за такое информативное видео. Возьму себе на заметку

@user-re1zz4oz2b Месяц назад

Для адаптации удобно будет. Спасибо, хороший контент!

@1Aloyd1 6 месяцев назад

Надо ещё раз посмотреть. Всё доходит только со второго раза)

@KlinovAS 5 месяцев назад

Этот урок больше расказывает о direction чем о margin/padding))) В целом я использую блок или инлайн в тех случаях, когда не хочу писать два правила (левый+правый или верх+низ) при этом не желаю использовать упрощенный вариант типа padding: 10px 0; когда ранее были установленны другие свойства, которые могут быть перебиты сразу 10px 0; Старт, Енд еще нигде не использовал. Слишком длинные названия, когда есть упрощенные

@user-konan1984 5 месяцев назад

У меня такая же фигня )

@user-lt7ov6us6f 6 месяцев назад

Интересные советы, будем учитывать это

@gonqii 6 месяцев назад

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

@alexles5003 3 месяца назад

Очень хороший ролик. Интересно было бы поверстать како-то макет, где это все имело бы решающее значение.

@asiafruite26 5 месяцев назад

Буду пробовать на своих проектах спасибо сестра 😊

@user-nh8um2dn9s 2 месяца назад

Спасибо за информацию. Пока не придумал как бы можно было использовать новые свойства. Если только для упрощения неких визуальных эффектов...

@sabitahmedrana9185 6 месяцев назад

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

@akhmad_goytinski 6 месяцев назад

Спасибо Анна! Очень полезная информация! С уважением к Вам Ахмад

@EvgenOl 3 месяца назад

"Если появится задача". Самая ключевая фраза. Все подобные авторы видео забывают упомянуть, что в реальной практике вы можете годами верстать и не наткнуться на эту задачу, где бы нужно было это применить. Я уже лет 15 верстаю и только однажды это применил на сайте с арабским текстом.

@MariannaMarianna177 6 месяцев назад

Хорошое видео.Очень било интересно.Мне понравилось 💯❤️👍

@user-ji5qf5no1i 6 месяцев назад

Я и не знала, теперь никогда не буду писать такое

@elcho911 6 месяцев назад

Спасибо большое!

@mystreetlifting76 6 месяцев назад

Теперь все будут искать этого космонавта))

@user-sh2kg8mh9i 6 месяцев назад

Интересные моменты. Вот бы ещё селекты, чекбосы и радио нормально подружили с css

@oldborodach 4 месяца назад

У вас есть курсы, а вот изменения или какие новшества в них добавляются? Я то понимаю что курсы были созданы достаточно давно!

@annblok_webdev 4 месяца назад

Вносятся. В ближайшем потоке добавится ещё больше информации о новых свойствах CSS.

@yunusgaziev3514 6 месяцев назад

Давно использую, особенно помогает для LTR/RTL. Никаких доп. стилей не понадобится.

@sashair 6 месяцев назад

Обязательно не буду писать, мне же нечем заняться

@meekes 6 месяцев назад

все понятно, но не понятно зачем? В реальных проектах я пока не вижу смыла использовать. Было бы хорошо если был реальный пример, вот на старых стилях было 10 срок кода, с новыми стало 3 строки

@annblok_webdev 6 месяцев назад

Один из вариантов написала в тг - t.me/frontendblok

@rodigy 5 месяцев назад

@@annblok_webdev можно прямую ссылку на пример что ли, нет там, смотрел больше чем за неделю назад

@via754 5 месяцев назад

@@annblok_webdevпочему бы в ролике это не озвучить? Обязательно заставлять пользователя прыгать из одного приложения в другое, а там наверное еще ссылка на ВК, откуда надо перейти на бусти и вот тааам будет пример, высосанный из пальца 😂 Вопрос риторический

@serghiokomolov2339 6 месяцев назад

В одном из проектов делал вертикальное расположение текста

@michaelkamko 6 месяцев назад

Спасибо!

@chorny33 5 месяцев назад

Сделай, пожалуйста, урок, как при помощи CSS сделать закреплённый header и закреплённые один-два столбца в таблице при скроле. Может при помощи grid или flex.

@ruden6623 5 месяцев назад

Header - possition: stiky. Либо absolute и добавить основному контенту padding-top: \*header height\*, чтобы контент не залазил под header. Со столбцами то же самое, наверное, можно

@DmitryEverise 6 месяцев назад

Зачем? Гораздо нагляднее margin-top: 16px; margin-bottom: 32px; чем margin-block: 16px 32px; Что касается направлений: это сверх редкий кейс использования. Выравнивание гораздо удобнее делать флексами или гридом чем инвертированием направлений

@user-ix5hu3yk7o 6 месяцев назад

Очень-очень интересно, но ни фига не понятно...

@annblok_webdev 6 месяцев назад

Практический смысл описала в тг - t.me/frontendblok

@marselforester7317 6 месяцев назад

Это линзы, фильтр или свои глаза такие?

@cooperanderson8651 6 месяцев назад

Столько всяких правил. Прям сходу и не запомнить их все. Нужно тренироваться.

@alexandershestakov2914 6 месяцев назад

Кто нибудь проверял влияние на производительность? Иначе смысл? Сократить объём css? Ну там минимальное сокращение. Спасибо

@annblok_webdev 6 месяцев назад

Это наверняка скажется на производительности крупных мультиязычных сайтов

@user-dp6yt7yc9l 6 месяцев назад

Сделай еженедельные новости для фронтов: драфты, эвенты, релизы, конференции... Может если есть такое, киньте ссылку pls.

@Prestapro 5 месяцев назад

Сложность верстки сильно возрастает, да для высоко скилованных верстальщиков, это ок, а программисты, которые редко погружаются в верстку? Они от таких кренделей с ума сойдут) При 95%+ по Can I use можно применять, пока рано.

@iwmatt 6 месяцев назад

у меня были кейсы когда padding-inline не работал на некоторых IOS устройствах

@annblok_webdev 6 месяцев назад

в каком году это было?

@dimaburichin7726 6 месяцев назад

Тоже с таким сталкивался вообще ios походу это новый ишак туда поддержку завозят ну очень долго))

@annblok_webdev 6 месяцев назад

@@dimaburichin7726 На CanIuse сказано, что поддержка начинается от 14.5 до 17 версии моб.Safari, что составляет 10% от всего числа пользователей различных типов браузеров. Какие у вас версии были?

@dimaburichin7726 6 месяцев назад

Если пишут что поддержка есть(в Сафари его с 14.1 начали поддерживать) это не факт что будет работать как надо и проблема почему то плавающая была на 14 версии он выходит сырой, но 15-16 плавают. 17 пока не было проблем. @@annblok_webdev

@iwmatt 6 месяцев назад

@@annblok_webdev это было 1 месяц назад, устройство iphone 11 или 12

@LiazzSmirnoF 6 месяцев назад

не просто создать свой сайт я уже в этом убедился)

@ez2387 Месяц назад

Подписался🔥👉 и поставил лайк

@romartynromashka 5 месяцев назад

Если я начну учить арабский язык, то и эти штуки будут полезны )))

@kulikoffAS 4 месяца назад

никогда не используйте фронтенд, используйте только бекэнд

@user-pb9cb9vg8s 5 месяцев назад

Ща на собесах будут козырить собесудющего, типа: А чем отличается writing-mod и direction или же как по другому записать margin?

@Lanvisor 6 месяцев назад

когда надо будет про них и не вспомнишь

@vvkbees6473 6 месяцев назад

😻

@dondragon6949 6 месяцев назад

будем со временем юзать) но зачем такие сложности!? головушка и так пухнет от элементарных весчей!

@yurok1991 6 месяцев назад

А что в элементарных сложного?

@user-wq7ei8yl4x 6 месяцев назад

А как Андрюша поживает?

@donkdonk2669 5 месяцев назад

ждем на онлике

@green1278dramost5 6 месяцев назад

Какая же Анна красивая ❤

@user-we9zj3nc7n 6 месяцев назад

Думаю это не единственный плюс данного видео))

@falantogan92 5 месяцев назад

Хорошо, не буду.😊

@oleggrunov5806 4 месяца назад

Бедные верстальщики 😢

@KolkamAli 6 месяцев назад

Отличный совет: избегай избыточного кода! Никогда не пиши margin, padding и border в CSS, используй компактные стили. Это улучшит читаемость и поддерживаемость кода. Продолжайте делиться лучшими практиками

@Ekaterinn 6 месяцев назад

Что такое компактные стили?

@vladk3201 5 месяцев назад

в смысле не использовать маргин и паддинг?

@DocVampir 5 месяцев назад

так, и что? окей, новые свойства. Показала как они работают, а зачем и где они нужны, и почему обязательно нужно их использовать вместо обычных не объяснила.

@johnspireng1960 4 месяца назад

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

@ylsv 6 месяцев назад

Ох уж эти кликбейты😐

@yurok1991 6 месяцев назад

Я уже давно margin, padding и border не использую

@ylsv 6 месяцев назад

@@yurok1991 на бэк перешёл?)

@yurok1991 6 месяцев назад

@@ylsv работаю в компании, где юзают современные стандарты

@SaintHeiser 6 месяцев назад

Сразу видно, когда блогер не работал в верстке толком. Нужно учитывать совместимость со старыми версиями браузеров. Внезапно, такие встречаются не так редко. Чаще чем последние версии айфонов. Поэтому в любом случае придется делать fallback на классические свойства, поддерживаемые везде. Никуда от них не денешься. Хорошим тоном было бы показыавать и разбирать совместимость этих свойств на can i use. А так получается, вы говорите чтобы их не использовали, а на деле их применение ограничено. А потом мы, настоящие верстальщики переделываем за вами вот это всё, чтобы работало у всех.

@zxcq 5 месяцев назад

margin и padding используйте. Broder не используйте потому что он двигает верстку и неудобно будет делать подчеркивания и выделения. Вместо border используйте box-shadow.