evgeniy8705
@evgeniy8705
Повелитель вселенной

Как организовать «архитектуру» верстки проекта (верстать модульно)?

Не так давно заметил что многие кто использует препроцессоры, разбивают всю верстку на подпапки и файлы, верстают все отдельно, а потом собирают. Типо сетка, типографика, header, footer, и остальные блоки, все отдельно, потом все импортируютв главные файлы и компилируют в один html, и в один css.

Может и глупый вопрос, но у меня в голове не укладывается, как все это организовать. Не пойму как все это отдельно верстать.
Как вот например сетку для сайта сделать отдельно, как типографику стилизовать отдельно и т.д.? На какие файлы делить проект, как организовать структуру?

Вот как на скрине, все так организовано, хз как это все понять.
c19a26f0c67249e19ccf1fe6eeee622b.png

Подскажите пожалуйста как в этом разобраться, либо поделитесь ссылкой где об этом можно почитать? А то я настолько не понимаю это, что даже запрос в гугл не знаю какой вбить....
  • Вопрос задан
  • 5150 просмотров
Решения вопроса 1
inferusvv
@inferusvv
Front-End Developer
У меня структура выглядит вот так:
e73c40d360ae47538ed55bc57f684c85.pngstyles.scss
// Тут подключение всех бутстрап компонентов, если используется этот фреймворк.

// Helpers
@import "helpers/variables";
@import "helpers/mixins";

// Vendor (Вендорные стили. Например от плагинов)
@import "../../node_modules/slick-carousel/slick/slick.scss";

// Common (основные стили.)
@import "common/base";
@import "common/typograpy";

// Components (мелкие визуальные элементы)
@import "components/buttons";
@import "components/forms";
@import "components/loader";
@import "components/table";

// Modules (большие куски. Шапка, футер, продукт)
@import "modules/footer";
@import "modules/header";
@import "modules/main-slider";
@import "modules/navbar";
@import "modules/section";
@import "modules/services";

// Pages (стили, котрые нужно применить для конкретной страницы)
@import "pages/index";


Такая структура позволяет подключать компоненты, модули и стили страниц в алфавитном порядке, что делает удобным поиск подключения того или иного файла
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
HamSter007
@HamSter007
HTML/CSS верстальщик
бэм
бэм
css
uwebdesign рулит
и вот тут еще понравился ответ Павла
+ loftschool отлично показывают и рассказывают

*это как по мне
Ответ написан
@merss
Вот шаблон в котором реализован компонентный подход:
https://github.com/CSSSR/csssr-project-template
Ответ написан
@sgnatyuk
Web Developer
Прежде чем использовать какую-либо «архитектуру» проекта, нужно задаться вопросами: зачем мне это надо? какие проблемы этим я смогу решить?
Поучаствовав в работе над несколькими проектами можно прийти к общему пониманию оптимальной структуры нужной вам.
На этом этапе нужно понимать, что не бывает идеальной архитектуры, все зависит от ваших предпочтений, инструментов, которые вы используете, команды в которой вы работаете и вашего текущего уровня знаний.
Если нет понимания зачем это нужно, не стоит так усложнять архитектуру проекта, конечно можно использовать пресловутый БЭМ, который как бы уже является для многих стандартом (либо SMACSS, либо еще что-то), но опять же, не все может быть там полезно. В том же БЭМе много условностей актуальных только для очень крупных проектов.
Поэтому решением вашей проблемы будет искать и строить архитектуру проекта конкретно под себя, тогда вопрос о непонимании уйдет сам собой.
Конечно если вы работаете в команде у вас может и не быть таких возможностей, ну и тогда архитектура проекта будет строиться уже относительно интересов команды.
Ответ написан
Zoxon
@Zoxon
Веб-разработчик
Мой шаблон для верстки в котором реализован модульный подход
https://github.com/zoxon/gulp-front
Если не понятно как это работает, можете написать мне в gitter или телеграмм
Ответ написан
lukoie
@lukoie
я как то чисто интуитивно к такому пришел при работе с шаблонами для getsimple cms
Ответ написан
LucasKane
@LucasKane
Front-end Developer
Можно использовать методологию SMACSS + SCSS.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы