Как вы организуете папку 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-плагины? Или еще где-нибудь?
Я знаю, что это личные предпочтения, но я просто хочу знать, как вы, ребята, организовываете папку своего проекта.
Заранее спасибо :)
buildпапка иsrcпапка.Ответы:
Я обрисую рекомендуемую структуру для организации файлов в вашем приложении HTML5. Это не попытка создать какой-либо стандарт. Вместо этого я сделаю предложения о том, как сгруппировать и назвать файлы удобным логическим способом.
Ваш проект
Предположим, вы создаете приложение HTML5. В некоторых случаях вы можете использовать корень вашего сервера в качестве основного контейнера, но для целей этой статьи я предполагаю, что ваше приложение HTML5 содержится в папке. Внутри этой папки вы должны создать индексный файл приложения или основную точку входа.
Как правило, ваше приложение состоит из файлов HTML, CSS, изображений и Javascript. Некоторые из этих файлов будут специфичными для вашего приложения, а некоторые другие могут использоваться в нескольких приложениях. Это очень важное различие. Чтобы сделать эффективную группировку ваших файлов, вы должны начать с отделения файлов общего назначения от ресурсов конкретного приложения.
Это простое разделение значительно упрощает навигацию по файлам. После того, как вы разместите библиотеки и файлы общего назначения внутри поставщиков папки, ясно , что файлы , которые вы будете редактировать будет находиться в ресурсах папке.
Помимо вашего HTML-кода, остальные файлы в вашем приложении в основном состоят из CSS, Javascript и изображений. Скорее всего, вы уже группируете файлы своего приложения внутри папок, которые соответствуют этим типам ресурсов.
JS папка будет держать ваш код Javascript. Точно так же папка изображений - это место, куда вы должны добавлять изображения, которые используются непосредственно из index.html или любой другой страницы вашего приложения. Эта папка изображений не должна использоваться для размещения файлов, связанных с таблицами стилей. Ваш код CSS и связанные изображения должны находиться внутри папки css . Поступая так, вы можете создавать страницы, которые могут легко использовать разные темы, и сделать ваше приложение более портативным.
В предыдущем примере показано содержимое папки 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
источник
Вот как я организовал статические ресурсы своего приложения.
источник