Сбрасывать стили в общем файле или в отдельном блоке?

Question

[htmlclassic]

Стили нужно сбрасывать на уровне блока (я про бэм) или просто в общем main.css?

Я читал, что бемовский блок можно вставить куда угодно. Куда угодно в пределах сайта? Или вообще?
Если я сбрасываю стили на уровне сайта в общем файле, то мои блоки вряд ли норм будут отображаться на других сайтах. Значит ли это, что нужно сбрасывать стили в каждом блоке? Как делают?)

Comments

[Сергей delphinpro]

с какого перепуга ваши блоки окажутся на других сайтах? =)

[Сергей delphinpro]

Если прямо по канонам бЭМ - то да, сброс в каждом блоке. Но практически можно так делать только вкупе со свойством https://caniuse.com/css-all Хотя можно и упороться..

[htmlclassic]

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

[petrovaHack]

Сергей delphinpro,

с какого перепуга ваши блоки окажутся на других сайтах? =)

интересно, и что же помешает вставить хорошо оформленный блок на другой сайт?
Вообще-то цель модульности и есть - переиспользование.
Всевозможные UI-kit'ы - это они и есть - наборы готовых блоков/модулей.

htmlclassic,

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

Так и есть.

[Сергей delphinpro]

petrovaHack,

интересно, и что же помешает вставить хорошо оформленный блок на другой сайт?

дизайн.
давайте возьмём три-четыре блока с разных сайтов и воткнем себе. Что это за хрень получится?
Не путайте теплое с мягким. Когда говорят о переиспользовании, то это про один сайт, или группу сайтов (как в яндексе). Но уж точно не про произвольные разнородные проекты.
Что касается UI-kit, то их внедряют на этапе первичного проектирования, стилизуя под себя, а не в любой, уже давно функционирующий проект.

[petrovaHack]

Сергей delphinpro, глупости. а почему надо с разных-то сайтов брать? Возьмите с одного, но другого. Нет - нельзя? А что запретит? Религия? Ну, возьмите с нескольких, даже с тех же 3х-4х, если вам нравится их дизайн и он подходит. ui-kit - это те же блоки, ТОЧНО такие же, просто их много.
И у разных ui-kit тоже разный дизайн. Подбираете тот, который соответствует вашим вкусам. Вообще никаких проблем.
Почти все ui-kit так и появляются, кто-то делает эти блоки сначала для себя, для своего сайта, а потом, когда их становится много, оформляет все это на одной странице под заголовком ui-kit. Так же, как и автор вопроса может пилить сначала эти блоки для себя и вставлять в свои другие сайты, а потом увидит, что вроде как неплохой набор уже, оформит всё это в ui-kit, состряпает под него сайт и повесит ценник.

Это где вы увидели такое, что принцип переиспользования - это про один сайт или сайты только одной компании?

Принцип переиспользования в программировании вообще повсюду. Возьмите любой фреймворк, состоящий из классов. Тоже чтоли только для одного сайта? Нет, для любого. И появляются в основном точно так же. Кто-то пилит классы для себя, максимально в ООП чтобы инкапсуляция и все дела, а потом, когда классов становится много, оборачивается всё это во фреймворк, который уже юзается всеми, или его отдельные части выкачиваются через npm/composer/...

Не могу понять, почему весь мир делает нормальные переиспользуемые блоки, из которых потом получаются неплохие ui-kit, а вот автор этого вопроса по вашему совету должен делать как-то по-другому, как-то так, чтобы его блоки были настолько ущербными, чтобы из них нельзя было состряпать ui-kit и показать всем свою работу. Автор провинился чтоли?

[Сергей delphinpro]

petrovaHack,

Принцип переиспользования в программировании вообще повсюду. Возьмите любой фреймворк, состоящий из классов.

не-не-не. программирование не трогаем. речь о css.

И у разных ui-kit тоже разный дизайн. Подбираете тот, который соответствует вашим вкусам.

ни разу не подбирал набор, ориентируясь на его дизайн. Нахрена он мне, если от моего дизайнера пришел вполне конкретный макет? Я выбираю кит, исходя из его функциональности, достаточного количества компонентов и т.п. критериев. То есть основная ценность - это набор функциональных компонентов. Дизайн всё равно меняется под мой макет.
Кстати, большинство знакомых мне наборов использую normalize/reset или что-то свое для общего сброса.
В общем не очень понятно, каким боком ui-kit относятся к обсуждаемой теме независимых блоков.

Ну, возьмите с нескольких, даже с тех же 3х-4х, если вам нравится их дизайн и он подходит.

как 4 блока с разным дизайном могут ужиться вместе? получится какой-то франкенштейн… по типу сайтов из 90..00-х, когда на них в кучу пихали любые найденные свистопеределки.
Отсюда вывод – сторонний блок взять можно, но ты его всё равно будет перестилизовывать под свой дизайн.

[petrovaHack]

Сергей delphinpro, Сами себе противоречите. Говорите, что помешает использовать дизайн, а потом оказывается:

ни разу не подбирал набор, ориентируясь на его дизайн... Дизайн всё равно меняется под мой макет.

Тогда тем более что вам мешает использовать блок с другого ресурса?

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

А вот как раз этим самым боком. Ведь независимые блоки - это как раз те самые функциональные компоненты. Они даже складируются частенько в папку под названием components))

большинство знакомых мне наборов использую normalize/reset или что-то свое для общего сброса.

Всё, что не запрещено - разрешено) Кто как хочет, так и делает. БЭМовцы не рекомендуют, причина, какой её вижу я - описала в ответе. Но никто не запрещает иметь другое мнение на этот счёт.

как 4 блока с разным дизайном могут ужиться вместе?

Сами же говорили, что подгоняете дизайн под макет.

получится какой-то франкенштейн

Ну, это уже от ваших навыков вёрстки будет зависеть)

Отсюда вывод – сторонний блок взять можно,

О чём и толкую...

но ты его всё равно будет перестилизовывать под свой дизайн.

Да, что вы в любом случае делаете, как сами писали, даже беря готовый ui-kit.
А если подойдёт по дизайну, то и переделывать не придётся.
Переиспользование - это хорошо. И в CSS тоже.

Answer 1

[petrovaHack]

бемовский блок можно вставить куда угодно. Куда угодно в пределах сайта? Или вообще?

Вообще, ведь бэмовский блок по БЭМ не зависит от внешних блоков. А раз не зависит, то и вставлять можно куда угодно. А как сделать его независимым? А значит не полагаться на какой-то внешний normalize/reset, а задавать все требуемые свойства самому блоку. А раз мы будем задавать margin, padding и т.д., то какой смысл в normalize? Он будет просто дублировать внутренние свойства блоков. Более того, создает путаницу при вёрстке. Забыли где-то прописать в блоке margin, блок подхватил это из normalize, и вы думаете, что блок в порядке, рабочий, а по факту в другом проекте без нормалайз его поведение будет не таким... Т.е. с normalize вы только увеличите шансы на ошибки.
Вот почему по БЭМ (да и не только, а всегда, когда стараетесь строить модульно) не стоит включать сбросы стилей.