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

Question

[gleendo]

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

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

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


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

Answer 1

[Владислав Безенсон]

У меня структура выглядит вот так:
styles.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";

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

Comments

[gleendo]

Владислав Безенсон А где и в каком файле прописывать сетку для страниц? И вот примерно с такой структурой, пробовал сверстать макет, начал, и что то кпц как неудобно, бегать туда сюда по файлам, каждые 5сек то там стиль прописать, то там добавить переменную, то миксин какой нибудь и т.д. И вообще хз, нужно ли писать переменную или миксин в конкретном случае, или все таки это лишние действия...В общем по самой файловой организации мне понятно более менее, спасибо за ответ, только вот с сеткой пока не понял. И вот теперь как организовать рабочий процесс*?? Как вот начинать? сначала посмотреть на макет и описать всю типографику и переменные для нее? потом описать базовые стили и переменные для них, потом крупные блоки и переменные для них, потом мелкие элементы и переменные для них, ну а потом написать сетку для всего и расставить блоки в сетке? так вот? Или как то по другому? И какую вы используете нотацию именования? И да, где прописывать стили для адаптивности? в отдельном файле? куда его поместить потом?

[Владислав Безенсон]

evg_: Ну насчет беганья по файлам, не так уж и много приходится. Вы же поэтапно все делаете. Максимум - между миксинами, переменными и файлом модуля/компонента. Просто расставляете все по полочкам. Куда писать гриды? Я обычно создаю _grid.scss внутри папки компонентов. В каком порядке верстать? Опять же в привычном. Архитектура никак не влияет на процесс разработки. Сначала делаете каркас (блок под левую колонку, контент, начинаете делать шапку, элементы новостей и т.п.). По именованию - что то вроде SMACCS. Обычно имя класса в модуле совпадает с названием файла. Например _product.scss ив нем стили .product; .product-title; .product-price. А адаптивность прямо внутри селектора: https://jsfiddle.net/7jjj4px4/1/

Answer 2

[HamSter]

бэм
бэм
css
uwebdesign рулит
и вот тут еще понравился ответ Павла
+ loftschool отлично показывают и рассказывают

*это как по мне

Answer 3

[merss]

Вот шаблон в котором реализован компонентный подход:
https://github.com/CSSSR/csssr-project-template

Comments

[gleendo]

merss спасибо за ответ. И еще у меня проблема одна вышла. не подскажите если знаете? Почему не находит файл импорта в препроцессоре?

Answer 4

[Сергей Гнатюк]

Прежде чем использовать какую-либо «архитектуру» проекта, нужно задаться вопросами: зачем мне это надо? какие проблемы этим я смогу решить?
Поучаствовав в работе над несколькими проектами можно прийти к общему пониманию оптимальной структуры нужной вам.
На этом этапе нужно понимать, что не бывает идеальной архитектуры, все зависит от ваших предпочтений, инструментов, которые вы используете, команды в которой вы работаете и вашего текущего уровня знаний.
Если нет понимания зачем это нужно, не стоит так усложнять архитектуру проекта, конечно можно использовать пресловутый БЭМ, который как бы уже является для многих стандартом (либо SMACSS, либо еще что-то), но опять же, не все может быть там полезно. В том же БЭМе много условностей актуальных только для очень крупных проектов.
Поэтому решением вашей проблемы будет искать и строить архитектуру проекта конкретно под себя, тогда вопрос о непонимании уйдет сам собой.
Конечно если вы работаете в команде у вас может и не быть таких возможностей, ну и тогда архитектура проекта будет строиться уже относительно интересов команды.

Answer 5

[Константин Величко]

Мой шаблон для верстки в котором реализован модульный подход
https://github.com/zoxon/gulp-front
Если не понятно как это работает, можете написать мне в gitter или телеграмм

Answer 6

[lukoie]

я как то чисто интуитивно к такому пришел при работе с шаблонами для getsimple cms

Answer 7

[deeppines]

Можно использовать методологию SMACSS + SCSS.