Как верстать «модульно»?

Question

[Андрей Бережной]

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

Допустим есть Landing, с несколькими блоками, и хотелось бы, при необходимости, с минимальными трудозатратами, переносить эти блоки на другой лендинг.

Как этого можно добиться?

Answer 1

[Котик Антон]

https://ru.bem.info/

Answer 2

[Владимир Ио]

Если вам постоянно нужна переносимость множества блоков, то просто задайтесь целью и сделайте стандартный набор собственных компонентов, для каждого из которых будет свой css/images/html/js код.
А в новый проект вставляйте как в БЭМ, то есть у каждого компонента своя папка, в которой лежит все к нему относящееся.
В итоге: простая навигация, хорошая модульность, а минификаторы типа grung/gulp объединят это все при сборке и производительность не пострадает.

Answer 3

[Андрей Б.]

Если без всяких бэмов, то все просто.
Есть блок со своим уникальным классом и подклассами, создаете под него файлик стилей, пишите туда стили конкретно для этого блока и его внутренних элементов и все.
С использованием препроцессоров это вдвойне удобней.
Главное не смешивать стили нескольких компонентов, если возникает необходимость засунуть один компонент в другой, то соответственно стили должны быть разные.

Comments

[Андрей Бережной]

BEM Class Naming?

Просто не очень хочется сейчас вникать в BEM Full Stack, но рассматриваю как вариант.

[Андрей Б.]

Ну можете да, по BEM Class Naming, можно посмотреть в сторону других методологий, например MCSS

[Андрей Б.]

Если используете препроцессор, гляньте пример архитектуры sass-guidelin.es/ru/#section-49

Answer 4

[Alexey Sosnovsky]

как вариант делать всё с препроцессором, например JADE+Stylus(less+SASS)
там есть импорты, ну и да, как именование конечно BEM