DEV Community

Rafael
Rafael

Posted on

web сайт и структура (источники)

🎯 — собрать предварительную информацию систематизирующию по теме, вообще не нашел ни одной статьи
Первые выводы о файловой структуре и ее связях с прагматикой,логикой и семантикой сайта

  • количественная сложность — определяет структуру, малый проект позволяет все реализовать в самых простых структурах(плоских)
  • логическая сложность - определяет структуру, При равном обьем сайта, логически более сложный сайт быстрее от кажется от плоской структуры файлов. Поэтому важно хотя бы ввиде блок структур накидать логику сайта.
  • прагматическая сложность — определяет структуру.Если предполагаем рост, изменение, модификацию, сопровождение сайта, 100% предполагает применение более сложной структуры сайта чем “сейчас“ нужно.
  • семантическая сложность — определяет сьруктуру. Если материал сайта не купи продай, а большая база знаний, и взаимодействия с агентом и/или пользователем,и результат не только чтение сайта, но генерация нового документа, это совершенно другой уровень файловой структуры сайта.
  • Итого, файловая структура как минимум не должна мешать разработке, а желательно чтобы она также могла на себе нести хотя бы часть логики-прагматики пример БЭМ.

Типы методов

  • 1) Технический подход (По типу файлов / Layer-based)
    • Плюсы: Самый простой вариант. Подходит для небольших сайтов (HTML + CSS + JS).Минусы:
    • Плохо масштабируется. Если на сайте 50 страниц, файлы style.css и main.js станут огромными и нечитаемыми.
  • 2) БЭМ (Блок, Элемент, Модификатор) — Файловая структура
    • Плюсы: Идеальная модульность. Блок можно легко перенести в другой проект целиком.
    • Минусы: Очень много мелких файлов и глубокая вложенность, сложно ориентироваться новичкам.
  • 3) Компонентный подход (Component-Driven / Фреймворковый)
    • Популярен в React, Vue, Angular, но применяется и в обычном HTML/JS. Сайт бьется на логические интерфейсные кирпичики (компоненты). В корне создается папка components/, а внутри — папка под каждый элемент.
  • 4 ) Feature-driven (По фичам / По функционалу)Файлы группируются не по типу (картинка/скрипт) и не по кнопкам, а по бизнес-логике или разделам сайта.
    • Например: «Авторизация», «Корзина», «Каталог товаров».
  • 5 ) Архитектура FSD (Feature-Sliced Design)Самый современный и строгий стандарт (появился в 2020-х годах) для больших проектов.
    • Он делит всё приложение на фиксированные слои (Layers), а слои — на слайсы (Slices).
  • Для обычной выгрузки HTML+CSS+JS сайта на сервер чаще всего выбирают либо Технический подход (если сайт до 5-7 страниц).
    • либо упрощенный БЭМ/Компонентный (если страницы сложные и элементы часто повторяются).

Ресурсы

Структура папок для современных веб-приложений - DEV Community

Структура папок для современных веб-приложений

Организация файловой структуры по методологии БЭМ

БЭМ-методология: упорядоченная структура CSS для разработчиков

Преимущества БЭМ и типичные ошибки разработчиков

Методология БЭМ, несмотря на кажущуюся простоту, способна радикально улучшить процесс разработки. Однако, как и любой инструмент, она требует правильного применения. Рассмотрим основные преимущества и распространенные ошибки при работе с БЭМ. 🔍

Ключевые преимущества методологии БЭМ:

  • Повторное использование кода — независимые блоки можно переносить между проектами без изменений
  • Модульность — интерфейс разделен на логические блоки, что упрощает разработку и поддержку
  • Снижение специфичности селекторов — отсутствие глубокой вложенности CSS-правил предотвращает конфликты стилей
  • Улучшение читаемости кода — по классу элемента можно определить его принадлежность к блоку
  • Упрощение командной работы — единая структура и терминология улучшают коммуникацию
  • Масштабируемость — методология эффективна как для небольших сайтов, так и для крупных приложений

Рассмотрим практические преимущества БЭМ на примере показателей производительности:

Ключевые преимущества методологии БЭМ

Имена файлов и структура в вашем проекте

HTML Course | Starting the Project - Creating Directories - GeeksforGeeks

HTML Курс | Запуск проекта - Создание каталогов - GeeksforGeeks

Creating Directories

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке.

Быстрый старт / Методология / БЭМ

Блок, Элемент, Модификатор

Методология БЭМ в примерах — Учимся создавать сайты — персональный блог верстальщика Заура Магомедова

Особенности:

  • одному блоку соответствует одна директория;
  • имя блока и имя директории совпадают, например, блок header — директория header/ или блок меню — директория menu/;
  • имена директорий элементов начинаются с двойного нижнего подчеркивания (), например, header/logo/ или header/__form;
  • имена директорий модификаторов начинаются с одинарного нижнего подчеркивания (), например, header/_form_bg;
  • реализация элементов и модификаторов происходит в отдельных файлах и называются примерно так: form__input.js, form_bg_blue.sass.

Пример

Для примера возьмем блок с формой, структура папок и файлов будет следующая:

search-form/
    __input/
        search-form__input.sass
        search-form__input.js
    __button
        search-form__button.sass
        search-form__button.js
    _theme
        search-form_theme_dark.sass
        search-form_theme_white.sass
    search-form.sass
    search-form.js
Enter fullscreen mode Exit fullscreen mode

Лично мне такой подход к разработке очень нравится. В дальнейшем хочу перейти именно на подобную структуру файлов. Естественно все файлы css и js на выходе будут объединены в общие файлы. Делается это с помощью сборщиков, например таких, как Webpack, Gulp, GruntJs и др.

Top comments (0)