Организация папок JS и CSS в проекте: лучшие практики

Быстрый ответ

src/
|-- js/
|   |-- vendor/  // Здесь находится jQuery в уютном JavaScript Café ☕
|   |   `-- jquery.js
|   `-- app.js  // Здесь наше главное внимание: app.js 🦸‍♂️
`-- css/
    |-- vendor/  // Это центр стилей Bootstrap 👗
    |   `-- bootstrap.css
    `-- main.css  // Ваш персональный CSS-полет 🛫

Организуйте ваши ресурсы по модульному принципу. Поместите внешние библиотеки, такие как jQuery или Bootstrap, в папку vendor, а выделите свои файлы (app.js, main.css) в корневые директории. Это облегчит обновление и сделает структуру проекта интуитивно понятной.

Управление типами ресурсов: Индивидуальный 'Дом' для каждого ресурса

Для облегчения работы над проектом, создайте в папке assets отдельные директории для различных типов ресурсов, таких как js, css, images и т.д. Такое разделение поможет поддерживать порядок и ускорит процедуры, такие как минификация или объединение файлов.

Иерархия и соглашения об именовании файлов: Для удобства работы

Обеспечьте логичное именование файла и четкую иерархию, чтобы облегчить навигацию и понимание проекта. В именах файлов отразите их версию или использование (jquery-3.5.1.min.js, bootstrap-grid.css). Размещение файлов в соответствующих директориях (css, js, images и др.) сделает структуру проекта более понятной и облегчит его масштабирование.

Визуализация

Понятная иерархия напоминает нам карту файлов. Как на городском плане, здесь всегда видно, где что находится:

# Структура папок как городской план
## 🏙 Бульвар библиотек и стилей
### 🚇 /js/libs/ – Метролитен для сторонних библиотек
### 🚋 /js/modules/ – Трамвайные маршруты для модулей
### 🚍 /css/vendor/ – Автобусные маршруты для внешних стилей
### 🚴 /css/main/ – Велодорожки для вашего стиля

## 🏞 Парк медиа-ресурсов
### 🖼️ /assets/images/ – Галерея изображений
### 🎞️ /assets/videos/ – Киностудия

Погружение в модульность

Считайте папки JS и CSS важными артериями. В крупных проектах разделение функциональных областей, как папок /js/ui/ или /css/components/, упростит процесс разработки, позволив разным разработчикам одновременно работать над различными частями без конфликтов при слиянии.

Сопряжение JS и CSS: Управление коррелированными ресурсами

Если в вашем проекте используются плагины JavaScript, создайте рядом с файлами .js папку lib для соответствующих CSS файлов. Это помогает организовать связанные файлы, особенно при работе с UI-библиотеками или виджетами, в которых используется и JavaScript, и CSS.

Принятие эволюции проекта

С расширением проекта его структура может потребовать изменений. Рефакторинг становится неизбежным для поддержания порядка в кодовой базе. Будьте открыты для изменений и готовы провести реструктуризацию при необходимости.

Полезные материалы

1. web.dev — Лучшие практики веб-разработки от Google.
2. Home – Scalable and Modular Architecture for CSS (SMACSS) — Разработка масштабируемого и модульного CSS по методологии SMACSS.
3. CSS Guidelines (2.2.5) — Руководство по созданию понятного, масштабируемого CSS.
4. GitHub – airbnb/javascript: JavaScript Style Guide — Доверенное руководство по стилю JavaScript от Airbnb.
5. Learn web development | MDN — Обширный ресурс для изучения веб-разработки от Mozilla.
6. Sass Guidelines — Рекомендации по стилю и руководство по масштабируемому и модульному Sass.
7. Understanding ES6 Modules — SitePoint — Доступное введение в модули JS.