Найкраща практика організації бібліотеки Javascript і структури папок CSS [закрито]

Як організувати папку js & css у веб-програмі?

Моя поточна структура проекту така:

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

Але це складніше, коли я використовую багато бібліотеки javascript та модуль css. Плагін Javascript поставляється з власним .js-файлом, а іноді і власним .css-файлом.

Наприклад, коли я використовую JQuery з плагіном JQueryUI, я поміщаю jquery.js та jquery-ui.js у каталог js / lib. Але JQueryUI поставляється з власним файлом css. Де я повинен розмістити css з плагіну javascript для найкращої практики? Чи повинен я помістити їх у папку lib, щоб розрізнити свій плагін css та javascript css? Або десь ще?

Я знаю, що це особисті переваги, але я просто хочу знати, як ви, хлопці, організовуєте свою папку проекту.

Спасибі заздалегідь :)

Я викладу рекомендовану структуру для організації файлів у вашій програмі HTML5. Це не спроба створити якогось стандарту. Натомість я буду робити пропозиції щодо того, як групувати та називати файли логічно зручним способом.

Ваш проект

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

• appcropolis-проект
• my-index.html

Як правило, ваша програма буде складатися з файлів HTML, CSS, зображень та Javascript. Деякі з цих файлів будуть специфічними для вашої програми, а деякі інші можуть використовуватися в декількох програмах. Це дуже важлива відмінність. Для ефективного групування ваших файлів потрібно почати з відокремлення файлів загального призначення від конкретних програм.

• appcropolis-проект
• ресурси
• продавці
• my-index.html

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

Крім вашого HTML-коду, інші файли у вашій програмі - це переважно CSS, Javascript та зображення. Цілком ймовірно, що ви вже групуєте свої програми додатків у папках, які відповідають цим видам активів.

• appcropolis-проект
• ресурси
• css
• js
• образи
• дані
• продавці
• my-index.html

У папці js буде зберігатися Ваш код Javascript. Аналогічно, папка зображень - це місце, куди слід додавати зображення, які використовуються безпосередньо з index.html або будь-якої іншої сторінки у вашій програмі. Ця папка зображень не повинна використовуватися для розміщення файлів, пов’язаних із таблицею стилів. Ваш CSS-код та пов’язані з ними зображення повинні знаходитись у папці css . Роблячи це, ви можете створювати сторінки, які легко використовують різні теми, і ви дозволяєте вашій програмі бути більш портативною.

• appcropolis-проект
• ресурси
• css
• синя тема
• background.png
• образи
• background.png
• синій-topic.css
• my-index.css
• js
• my-index.js
• my-contact-info.js
• образи
• продуктів
• computer.jpg
• cellphone.png
• printer.jpg
• my-company-logo-small.png
• my-company-logo-large.png
• дані
• some-data.json
• more-data.xml
• table-data.csv
• extra-data.txt
• продавці
• jquery
• образи
• ajax-loader.gif
• іконки-18-білий.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• деяка бібліотека css
• some-plugin.jquery
• my-index.html
• my-contact-info.html
• my-products.html

Попередній приклад показує вміст папки css . Зауважте, що існує файл з назвою default.css, який слід використовувати як основний файл CSS. Зображення, використовувані за замовчуванням таблиці стилів, повинні розміщуватися всередині папки зображень . Якщо ви хочете створити альтернативні таблиці стилів або ви хочете замінити правила, визначені у вашому таблиці стилів за замовчуванням, ви можете створити додаткові файли CSS та папки-кореспонденти. Наприклад, ви можете створити таблицю стилів blue-theme.css і розмістити всі пов’язані зображення всередині синьої темипапку. Якщо у вас є CSS або Javascript-код, який використовується лише однією сторінкою (в даному випадку my-index.html), ви можете згрупувати певний код сторінки у файлах .css та .js з однаковою назвою сторінки (ei my-index .css та my-index.js). Ваш код CSS та Javascript повинен бути максимально загальним, але ви можете відслідковувати винятки, розміщуючи їх в окремих файлах.

Заключні рекомендації

Деякі остаточні рекомендації мають бути зроблені навколо назв папок та файлів. Як правило, переконайтеся, що ви використовуєте малі літери у всіх назвах папок та файлів. Якщо ви використовуєте кілька слів для імені файлу чи папки, розділіть їх дефісом (тобто, my-company-logo-small.png). Якщо ви будете дотримуватися порад у цій статті, ви повинні мати можливість поєднувати кілька сторінок, зберігаючи спільні ресурси разом, а спеціальний код - добре розділений.

Нарешті, навіть якщо ви не вирішите використовувати структуру, рекомендовану в цій статті, важливо дотримуватися конвенції. Це збільшить вашу продуктивність і ще важливіше зробить роботу, яку ви легко зрозумієте оточуючим.

Джерело Кредит: Як упорядкувати файли HTML, CSS та Javascript

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

Ось так я організував статичні ресурси свого додатка.