При использовании smacss рекомендуется, чтобы модули никогда не устанавливали поля, но позволяют ли это обрабатываться макетом / контейнерами?
Я перечитываю smacss (масштабируемую и модульную архитектуру для CSS) [ https://smacss.com/] и большинство вещей имеет для меня смысл.
Одной из основных вещей является то, что модулю не нужно ничего знать о его контексте / окружении. То есть: он просто отображает содержимое, но ему все равно, содержится ли оно в боковой панели или в основной области содержимого. Все идет нормально.
Будет ли это распространяться на общее правило, согласно которому Модули никогда не должны определять поля сами, а всегда позволять своим родителям (что было бы layouts на языке smacss) решить, если / как их установить?
2 ответа
Я согласен с Евгением в том, что иногда поля будут специфичны для модуля, если они являются обязательными для правильного представления стиля тени модуля, например.
Но я бы предложил дружеское несогласие в большинстве других случаев и сказал бы, что поле - по существу расстояние между модулями или краями макета - должно находиться исключительно в макетах.
Суть в SMACSS заключается в том, что модули должны иметь возможность вставляться в любой контейнер макета и потенциально заполнять все пространство этого макета (без правил ширины / высоты для модуля) и без какого-либо неожиданного расстояния между краями макета. Другими словами, макет определяет размеры и расположение дочернего модуля.
Это зависит от конкретной рассматриваемой проблемы, но если, например, у вас есть несколько модулей, которые должны находиться внутри макета, и существует необходимость в интервале между ними, то в div/sub-divs макета необходимо указать эти подстолбцы макета. например, чтобы независимо от того, какие модули вставлены в столбцы, все они принимают требуемый макет между промежутками.
Наконец, я боюсь, что я не согласился бы с предложением субмодуля, например, "module-name-top-gap". Это будет анти-SMACSS, потому что вы будете двигаться в направлении, в котором вы называете модули, основанные на определенных индивидуальных стилях (например, базовый модуль, кроме с margin-top: 20px), который не далеко от встроенных стилей. Идея состоит в том, чтобы отойти от этих отношений и назвать модули и подмодули, основываясь только на их внутренней структуре и назначении, и позволить макетам решать все остальное.
Я бы порекомендовал новый курс Джонатана Снука по SMACSS, доступный на Front-end Masters: https://frontendmasters.com/courses/smacss. Я наблюдал за всем этим, и в нем гораздо больше деталей, чем в оригинальной книге, что очень помогает при таких колебаниях, которые я тоже помню.
Если вашему модулю нужны поля во всех случаях (например, если у вас есть какой-то div с рамкой и тенью, и вы должны установить поля), вы можете установить его в модуле.
Если поля модуля являются необязательными (это может быть список ссылок в верхнем или нижнем колонтитуле, который должен иметь верхнее или нижнее поле), вы должны использовать подкласс, например <div class="my-module my-module-top-gap"> some </div>, Таким образом, вы можете сохранить независимость модуля от контекста и изменить его внешний вид.