Задать вопрос
evgeniy8705
@evgeniy8705
Повелитель вселенной
html

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

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

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

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

Подскажите пожалуйста как в этом разобраться, либо поделитесь ссылкой где об этом можно почитать? А то я настолько не понимаю это, что даже запрос в гугл не знаю какой вбить....
  • Вопрос задан
  • 6582 просмотра
Комментировать
Подписаться 46 Оценить Комментировать
Решения вопроса 1
iscareal
@iscareal
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";


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

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Верстка сайта и натяжка на wordpress
25 апр. 2024, в 19:22
18000 руб./за проект
Создать телеграмм бот на Python
25 апр. 2024, в 19:21
10000 руб./за проект
Разработка дизайна для мобильного приложения
25 апр. 2024, в 18:47
2795100 руб./за проект
Ещё заказы