модули в smacss

Sergey_Smirnov

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

BaNru

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

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

Sergey_Smirnov

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

Конечно никто не мешает сделать (думаю это и будет независимым) POPUP или ALERT какой-нибудь с абсолютным или фиксированным позиционированием, но в таком случае подразумевается,что данный модуль находится где-то в верхнем уровне (в body) вёрстки. Либо необходимо быть уверенным, что выше по иерархии нет элементов с position:relative.
А вот если есть у меня модуль .photo в l-s idebar с margin-top: 40px, а в l-content с другими значениями, как бы вы задали эти свойства? В БЭМ микс class="photo sidebar__photo", а в smacss как? Дайте пример, если можно
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 078
Я не знаю как должно быть по методологии SMACSS, я про неё ничего не знаю.
Если вам надо именно прям по методологии, то я не могу помочь. Я настолько не заморачиваюсь в этих методологиях.

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

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 078
Кстати, ещё вариант, для вёрстки всегда подходит, но, мне кажется, ни одна методология не одобрит (это тоже layout)
CSS:
l-content > * { margin-top: XXpx}
l-sidebar > * { margin-top: YYpx}
вместо звёздочки может быть div, если вы уверены что у вас все модули будут div, либо добавить наоборот исключения через :not() (я бы не рекомендовал not, считаю его стоит использовать в крайних случаях)
 

Sergey_Smirnov

New Member
Регистрация
25.10.2021
Сообщения
3
Кстати, ещё вариант, для вёрстки всегда подходит, но, мне кажется, ни одна методология не одобрит (это тоже layout)
CSS:
l-content > * { margin-top: XXpx}
l-sidebar > * { margin-top: YYpx}
вместо звёздочки может быть div, если вы уверены что у вас все модули будут div, либо добавить наоборот исключения через :not() (я бы не рекомендовал not, считаю его стоит использовать в крайних случаях)
Спасибо большое за помощь!
 
Верх Низ