модули в smacss

[Sergey_Smirnov]

Пытаюсь внедрить методологию SMACSS в свою верстку и у меня возникли сложности! Скажите, как задавать свойства margin, float и position для независимых модулей?

 

[BaNru]

По данной методологии эти вещи необходимо задавать в Layout rules.
С помощью modules rules подразумеваетс создание дизайна модуля а не расположение.

Конечно никто не мешает сделать (думаю это и будет независимым) POPUP или ALERT какой-нибудь с абсолютным или фиксированным позиционированием, но в таком случае подразумевается,что данный модуль находится где-то в верхнем уровне (в body) вёрстки. Либо необходимо быть уверенным, что выше по иерархии нет элементов с position:relative.

 

[Sergey_Smirnov]

По данной методологии эти вещи необходимо задавать в Layout rules.
С помощью modules rules подразумеваетс создание дизайна модуля а не расположение.

Конечно никто не мешает сделать (думаю это и будет независимым) POPUP или ALERT какой-нибудь с абсолютным или фиксированным позиционированием, но в таком случае подразумевается,что данный модуль находится где-то в верхнем уровне (в body) вёрстки. Либо необходимо быть уверенным, что выше по иерархии нет элементов с position:relative.

А вот если есть у меня модуль .photo в l-s idebar с margin-top: 40px, а в l-content с другими значениями, как бы вы задали эти свойства? В БЭМ микс class="photo sidebar__photo", а в smacss как? Дайте пример, если можно

 

[BaNru]

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

Я бы действовал от логике:
- если это было бы индивидуально для сайдбара и этого модуля, то действовал бы как вы написал по БЭМ
- если бы это зависело именно от модуля, то есть везде этот margin, то модификатор вешал бы на модуль
- если этот модификатор будет у многих элементов сайдбара, контента или модулей, но НЕ ВСЕГДА, то можно сделать класс в layout, типа mt-40
- также может быть такое, что это всё таки layout: например первый элемент должен быть mt 20px, а последующие mt-40, соответственно тут надо будет делать через псевдоклассы :first-child, :nth-*
Мне кажется тут надо вдаваться не в методологию. а в логику. Что первично в данном случае, туда и вешаем модификатор. У вас же, похоже, это всё таки layout для sidebar и content, данный margin по идее должен применяться к ЛЮБОМУ модулю, помещённому внутрь, независимо photo, banner или slider вы поставите в данном месте, то есть, как я понимаю - это именно сетка. Вам надо не к модулю привязывать это, а

l-content { margin-top: XXpx}
l-sidebar { margin-top: YYpx}

(ну или padding логичнее)

 

[BaNru]

Кстати, ещё вариант, для вёрстки всегда подходит, но, мне кажется, ни одна методология не одобрит (это тоже layout)

l-content > * { margin-top: XXpx}
l-sidebar > * { margin-top: YYpx}

вместо звёздочки может быть div, если вы уверены что у вас все модули будут div, либо добавить наоборот исключения через :not() (я бы не рекомендовал not, считаю его стоит использовать в крайних случаях)

 

[Sergey_Smirnov]

Кстати, ещё вариант, для вёрстки всегда подходит, но, мне кажется, ни одна методология не одобрит (это тоже layout)

l-content > * { margin-top: XXpx}
l-sidebar > * { margin-top: YYpx}

вместо звёздочки может быть div, если вы уверены что у вас все модули будут div, либо добавить наоборот исключения через :not() (я бы не рекомендовал not, считаю его стоит использовать в крайних случаях)

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