Я запрещаю вам margin

[strokoff]

Пару вопросов. Gap не позволяет задавать внешние отступы у контейнера - как вы предлагаете это решать?
Еще вопрос - не могли бы вы раскрыть все принципы SOLID в CSS? Я просто знаю только border: 1px solid.
И последний вас не смущает увеличение размера и глубины DOM а также вес самой разметки - только ради избегания margin? Напоминает боязнь у некоторых людей наступать на швы плитки

[protonselijah]

1) В этом и суть подхода - без внешних отступов. Все позиционирование дочерних узлов идет через родителя. Если у узла должен быть внешний отступ (например 1.5rem по бокам), то его должен реализовать родительский узел через свой внутренний отступ, через padding

А в случаях между дочерними узлами, вместо использования margin, создавать доп узел (например div) выделяя тем самым сущность и уже работать с gap

Это по большей степени сильно роляет, когда реализуешь base компонент (Например Div, Block и тд), и реализация под капотом этого base влияет на весь дальнейший проект

На местах может и не так критично, когда ты раз за разом пишешь заново стили. Но если ты "автоматизируешь" верстку за счет грамотно написанных базовых компонентов, то кейс с margin может сыграть злую шутку и в дальнейшем придется уже пользоваться знанием весов)))

2) Это слишком громоздкий вопрос, можешь в любую сетку вбить "Принципы SOLID в CSS"

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

[Maliglood]

Зачем вам внешние отступы у контейнера?

[karrakoliko]

`.specific-block + .very-specific-block { margin-top: 1em;}`

[dom1n1k]

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

Совсем запрещать марджин это всё же перебор, но по возможности минимизировать - да.

[Alinaki]

Вы когда статьи пишете через гпт, вы хоть картинки отрисовывайте чтоль

[frostsumonner]

Если у меня 5 элементов с отступами 1, 2, 3 и 4 rem - сколько доп элементов мне надо создать?

[Maliglood]

Вы имеете в виду отступы лесенкой?

[K1nGsmaN]

класс, ещё одна «ai-powered» статья.. чатгпт что угодно оправдает, если его попросить.

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

надо комбинировать подходы и смотреть по ситуации, а не создавать догматы, как «дядя Боб»

[dabrahabra]

БЭМ же!

[Wintz]

Марджины каждого элемента для того чтобы сделать отступ конкретно для данного элемента, а позиционирование элементов - через родителя. Если вы их неправильно используете - не значит что их придумал дьявол

[MyraJKee]

Опа, solid уже и до css дотянулся

[bozzhik]

Тут все зависит от того, как использовать. В tailwindcss отлично применяется margin через space-x-* и space-y-*

[gun_dose]

Для типографских элементов margin незаменим. Ну или при использовании флекса, к примеру margin-left: auto, чтобы загнать элемент в конец, очень полезная штука.

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

[davidaganov]

во-первых, фронт на то и фронт, нередки случаи когда между 1 и 2 блоком отступ в 20пх, между 2 и 3 - 40пх, а от футера до блока над ним - 150пх. как решать такое гэпами, рушить семантику кучей дивов которые будут просто давать разного размера отступы?

во-вторых, не знаю, не идеальный метод возможно, но для себя в своих проектах я просто решил, что отступы у блока могут быть только сверху, а не снизу, поэтому каждый блок/секция на сайте имеет margin-top, и сколь угодно перемещай эти блоки, удаляй и переиспользуй - они не слипнутся из-за отступа сверху. единственный минус это когда блок на странице А имеет отступ от верхнего блока 100пх, а на странице Б он стоит первый и слишком большое пространство получается между хедером и ним, но и такое решается во фреймвлрках тем, что отступы задаются не внутри компонента-секции, а снаружи, в пэйдже, например

<main>
  <Block class="mt-10" />
  <Block class="mt-20" />
</main>

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

[kovaldos]

Заголовок в стиле ленты новостей)

Интересное мнение. Однако противоречивое как по мне. Лишние обертки ради отступов… ну такое… Одно дело, когда тебе нужен родитель. Тут конечно согласен. При этом всегда можно помнить о принципах однонаправленности верстки. Т.е. не использовать margin-bottom и margin-top одновременно. Ну и всегда можно установить, как я думаю, довольно распространенное в командах правило - не использовать внешние отступы для БЭМ-блоков, ну или для родительских блоков, кому БЭМ не по душе.

Флекс-гап к тому же все еще не до конца поддерживается на старых сафари для IOS.

Так что мнение автора вполне имеет место быть, однако как всегда, есть нюансы)

Спасибо за статью

[Pavel_20]

Есть ещё хороший селектор >*:not(:last-child) для добавления марджинов (например на текстовых контентных страницах, где могу идти разные теги без классов)

[proll4588]

Участвую в разработке маркетплейса и столкнулись с такой проблемой, gap поддерживается не на всех версиях iOS. Да, таких устройств среди пользователей очень мало, но они есть и их надо поддерживать. И тут либо использовать margin (в списках, которые подразделяют перенос контента, использовать не получится), либо гриды. Но тут уже дело поддержки устройств. А так да, gap маст хэв.

[zmiuko]

Псевдоинженерия от gpt