Рекомендации по организации библиотеки 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 содержится в папке. Внутри этой папки вы должны создать индексный файл приложения или основную точку входа.

• аппкрополис-проект
• мой-index.html

Как правило, ваше приложение состоит из файлов HTML, CSS, изображений и Javascript. Некоторые из этих файлов будут специфичными для вашего приложения, а некоторые другие могут использоваться в нескольких приложениях. Это очень важное различие. Чтобы сделать эффективную группировку ваших файлов, вы должны начать с отделения файлов общего назначения от ресурсов конкретного приложения.

• аппкрополис-проект
• Ресурсы
• продавцы
• мой-index.html

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

Помимо вашего HTML-кода, остальные файлы в вашем приложении в основном состоят из CSS, Javascript и изображений. Скорее всего, вы уже группируете файлы своего приложения внутри папок, которые соответствуют этим типам ресурсов.

• аппкрополис-проект
• Ресурсы
• css
• JS
• изображений
• данные
• продавцы
• мой-index.html

JS папка будет держать ваш код Javascript. Точно так же папка изображений - это место, куда вы должны добавлять изображения, которые используются непосредственно из index.html или любой другой страницы вашего приложения. Эта папка изображений не должна использоваться для размещения файлов, связанных с таблицами стилей. Ваш код CSS и связанные изображения должны находиться внутри папки css . Поступая так, вы можете создавать страницы, которые могут легко использовать разные темы, и сделать ваше приложение более портативным.

• аппкрополис-проект
• Ресурсы
• css
• сине-тема
• background.png
• изображений
• background.png
• blue-theme.css
• мой-index.css
• JS
• мой-index.js
• мой-contact-info.js
• изображений
• товары
• computer.jpg
• cellphone.png
• printer.jpg
• my-company-logo-small.png
• my-company-logo-large.png
• данные
• некоторые-данные.json
• more-data.xml
• таблица-данные.csv
• extra-data.txt
• продавцы
• JQuery
• изображений
• Ajax-loader.gif
• icons-18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• некоторая CSS-библиотека
• some-plugin.jquery
• мой-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

Вот как я организовал статические ресурсы своего приложения.