Sass-архітектура вашого проекту

Існують різні підходи для організації sass-архітектури, яку б ви не вибрали, головне, щоб вона була.

Я ставлюся до організації sass, як до інструменту, в першу чергу, він не повинен заважати і гальмувати хід думок. Тому починаючи проект, я не знаю який вийде архітектура, вона устаканюється по ходу роботи і приймає форму придатну для вимог проекту.

Bem, Smacss, Oocss, Organic-css повинні давати вам гнучкість думки, щоб побудувати свій проект.

Я завжди починаю проект зі стандартною для себе файлової організації:
image

Все що я знаю на 100%, що мені знадобиться татко core, де будуть лежать налаштування проекту, загальні правила, помічники, пройдемося по основним:

core/_core.sass
image
Служить для підключення всіх файлів з папки core, ви можете підключити сюди compass, якщо він використовується на проекті.

core/_mixins.sass
image
Я намагаюся не тягати із собою купу миксинов з проекту в проект, цей файл обрастается ними по мірі необхідності, але за замовчуванням у мене використовуються пару миксинов: em, cp, reset-btn.

core/_reset.sass
image
Нормалайз у мене не прижився, я використовую reset у своїх проектах, щоб вирівняти стилі в браузерах.

core/_settings.sass
image
У цьому файлі збираються налаштування для всього проекту: розміри шрифтів, кольору, максимальна ширина і т. д.

core/_base.sass
image
Служить для загальних правил на проекті, body я роблю font-size рівної заданої змінної, щоб надалі зручно вираховувати em з допомогою однойменного міксина, раніше я робив цей font-size рівному 62.5%, щоб 1em дорівнював 10 пикселів.

Після цього я намагаюся просто верстати не приділяючи особливої уваги архітектурі, іноді навіть в одному файлі. Але за весь час проекту наступають точки, коли майбутня архітектура починає прорисоваться і тоді, я розкладаю все по поличках, як це вимагає проект, не вигадуючи завчасно собі обмежень, з цього виходять абсолютно різні форми організації:

image
Наприклад, сайт мого невеликого проекту не вимагав особливої організації, доречі, вихідний код можна подивитися на гитхбе: github.com/omelniz/block-flute

image
Односторінковий сайт, розбитий на блоки, smgomsk.uk

image
Паблік спіч вже сайт побільше і зажадав від себе більш гнучкої архітектури. theps.uk

Великі проекти, повинні мати більш суворі правила, хоча і почати свій шлях можуть також. Правила повинен хтось підтримувати інакше проект перетвориться на гарбуз, можливо, вже через пару місяців.

Це мій особистий досвід в організації sass-архітектури проектів, мені цікаво подумати головою, а не сліпо використовувати наявні методології, хоча іноді саме це і потрібно.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.