Организация папок 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.
Принятие эволюции проекта
С расширением проекта его структура может потребовать изменений. Рефакторинг становится неизбежным для поддержания порядка в кодовой базе. Будьте открыты для изменений и готовы провести реструктуризацию при необходимости.
Полезные материалы
- web.dev — Лучшие практики веб-разработки от Google.
- Home – Scalable and Modular Architecture for CSS (SMACSS) — Разработка масштабируемого и модульного CSS по методологии SMACSS.
- CSS Guidelines (2.2.5) — Руководство по созданию понятного, масштабируемого CSS.
- GitHub – airbnb/javascript: JavaScript Style Guide — Доверенное руководство по стилю JavaScript от Airbnb.
- Learn web development | MDN — Обширный ресурс для изучения веб-разработки от Mozilla.
- Sass Guidelines — Рекомендации по стилю и руководство по масштабируемому и модульному Sass.
- Understanding ES6 Modules — SitePoint — Доступное введение в модули JS.