Что именно представляет собой «внешняя геометрия» в методологии БЭМ? ⇐ CSS

[Anonymous]

Я изучаю методологию БЭМ и столкнулся с этим принципом в документации:

"Блок не должен влиять на его окружение, то есть вы не должны устанавливать внешнюю геометрию (поля) или позиционирование блока".

Мне нужно уточнить, какие свойства CSS окончательно считаются "внешней геометрией" и как решать практические проблемы макета.
Конкретные вопросы
1. Разъяснение определения
Какие свойства CSS окончательно считаются «внешней геометрией»?

• Ограничен ли список следующими параметрами: поля, положения, сверху/слева/справа/снизу, float, z-index?
• А как насчет ширины и высоты? Кажется, это зависит от контекста.

2. Проблемы практической реализации
Как справиться с внутренним макетом без внешней геометрии?

• Если блоки не могут иметь ширину, как предотвратить нарушение макета внутренними элементами с фиксированной/процентной шириной?

Код: Выделить всё

.card {
/* No width set - following BEM principle */
}
.card__image {
width: 100px; /* Could overflow if .card is too narrow */
}
.card__content {
width: 80%; /* Percentage of undefined container */
}

3. Противоречие в документации по BEM
Я обнаружил, что BEM предлагает использовать внутренние элементы-оболочки для позиционирования:

Код: Выделить всё

...
...

Код: Выделить всё

.page__inner {
width: 960px;        /* This is allowed */
margin: 0 auto;      /* This is allowed */
}

Это поднимает важные вопросы:

• Означает ли это, что ширина считается внешней геометрией?
• Если бы ширина была внутренней геометрией, она была бы установлена непосредственно на .page.
• Необходимость .page__inner подразумевает, что BEM считает размеры «внешними».
• Это создает архитектурный обходной путь для практических нужд

4. Архитектурные подходы
Какова практическая разница между этими подходами?

Код: Выделить всё

/* Approach A: Modifier on block */
.block--large { width: 500px; }

/* Approach B: Modifier on inner element */
.block__inner--large { width: 500px; }

Являются ли эти альтернативы приемлемыми?

• Использование минимальной ширины/

  Код: Выделить всё

  max-width

  вместо ширины
• Использование отображения: flex/grid на блоках
• Использование элементов-оболочек для управления макетом

5. Основной философский вопрос
Где на практике следует провести грань между «влиянием на окружающую среду» и «поддержанием внутренней структуры»?
Я понимаю философию многократно используемых компонентов, но на практике:

• Блокам нужны размерные границы для поддержания внутренней целостности макета.
• Подход с внутренней оболочкой, похоже, усложняет HTML.
• Прямые модификаторы блоков кажутся более простыми

Имеет ли различие между модификаторами блоков и модификаторами внутренних элементов значимое на практике или это просто теоретическое явление?
Дополнительный контекст
Я тщательно изучил документацию по БЭМ и понимаю принципы многократного использования компонентов. Однако у меня возникают трудности с практической реализацией, когда блокам требуется некоторый размерный контроль для поддержания внутренней целостности макета.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ethodology