Соглашение об именах для активов (изображения, CSS, js)?

89

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

Итак, мой текущий будет:

CSS: style-{name}.css
примеры: style-main.css, style-no_flash.css, и style-print.cssт.д.

JS: script-{name}.js
примеры: script-main.jsи script-nav.jsт. Д.

Изображения: {imageType}-{name}.{imageExtension}
{imageType} любое из этих

  • значок (например, значок вопросительного знака для справки)
  • img (например, изображение заголовка, вставленное через <img />элемент)
  • кнопка (например, графическая кнопка отправки)
  • bg (изображение используется в качестве фонового изображения в css)
  • спрайт (изображение используется в качестве фонового изображения в css и содержит несколько «версий»)

Пример наименования будут: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, и bg-gradient.gifт.д.

Итак, что вы думаете и каково ваше соглашение об именах ?

naming-conventions 
— Максимум
источник
Javascript File Naming Conventionsтолько в отношении , читайте (намного) больше на stackoverflow.com/questions/7273316/…
— Адриан Бе

Ответы:

28

Я помещаю файлы CSS в папку css, Javascript в js, изображения в images... Добавляю вложенные папки по своему усмотрению. Нет необходимости в каких-либо соглашениях об именах на уровне отдельных файлов.

— лутц
источник
16
Я не согласен. Учтите тот факт, что многие известные проекты имеют соглашения об именах. см. jQuery, который он использует <product-name>.<plugin>-<ver.sion>.<filetype>.js, например jquery-1.4.2.min.js, или jquery.plugin-0.1.js.
— Adrien Be
56

Я заметил, что многие разработчики внешнего интерфейса отходят от cssи jsв пользу stylesи scriptsпотому , что , как правило , другие вещи там, такие как .less, .styl, и .sass, а также, для некоторых .coffee. Дело в том, что использование определенных технологий при выборе организации папок - плохая идея, даже если это делают все. Я буду продолжать использовать стандарт, который предлагают эти уважаемые разработчики:

  • src/html
  • src/images
  • src/styles
  • src/styles/fonts
  • src/scripts

И их эквиваленты сборки назначения, которые иногда имеют префикс, в destзависимости от того, что они создают :

  • ./
  • images
  • styles
  • styles/fonts
  • scripts

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

Я на самом деле иду немного дальше и добавляю

  • scripts/before
  • scripts/after

Которые получают smooshed в два main-before.min.jsи main-after.min.jsскрипты, один для заголовка (с реквизитами normalizeи modernizrкоторые должны работать рано, например) и afterза последнюю вещь в теле , так что Javascript может ждать. Они не предназначены для чтения, как и главная страница Google.

Если есть сценарии и таблицы стилей, которые имеет смысл минимизировать и оставить в покое связанными из-за особого подхода к управлению кешем, о котором позаботились в правилах сборки.

В наши дни, если вы не используете какой-либо процесс сборки, например gulp или grunt , вы, вероятно, не достигнете большинства целей производительности, ориентированных на мобильные устройства, о которых вам, вероятно, следует подумать.

— оборота robmuh
источник
Находятся ли файлы шрифтов (.ttf, .eot и т. Д.) В стилях / шрифтах?
— Андрей Саветчук 02
Вполне разумная идея. Спасибо!
— zhibirc
Я думаю, что файлы шрифтов должны находиться вне папок стилей, они связаны между собой, но я думаю, что снаружи это кажется более ясным.
— Пабло-Но,
13 
/Активы/
  / Css
  /Изображений
  / Javascript (или скрипт)
    / Минифицированный
    /Источник

Это лучшая структура, которую я видел, и та, которую я предпочитаю. С папками вам действительно не нужно добавлять к CSS и т. Д. Описательные имена.

— Крис С
источник
Мне это нравится, но я думаю, что более распространенной корневой папкой является «общедоступная» или «содержимое».
— Брайан Боутрайт,
Впервые я увидел эту файловую структуру для «Assets», когда углубился в одностраничные приложения Angular. Он используется во многих руководствах по одностраничным приложениям Angular - мне это нравится.
— Кайл Васселла
11

Для крупных сайтов, где css может определять много фоновых изображений, соглашение об именах файлов для этих ресурсов очень удобно для внесения изменений в дальнейшем.

Например:

[component].[function-description].[filetype]

footer.bkg-image.png
footer.copyright-gradient.png

Мы также обсудили добавление в тип элемента, но я не уверен, насколько это полезно и может ввести в заблуждение для будущих необходимых изменений:

[component].[element]-[function-description].[filetype]
footer.div-bkg-image.png
footer.p-copyright-gradient.png
— Брайан Виггинтон
источник
8

Вы можете назвать это так:

/ assets / css / - для файлов CSS

/ assets / font / - для файлов шрифтов. (В большинстве случаев вы можете просто зайти в Google fonts для поиска подходящих шрифтов.)

/ assets / images / - для файлов изображений.

/ assets / scripts / или / assets / js / - для файлов JavaScript.

/ assets / media / - для видео и прочего. файлы.

Вы также можете заменить «активы» на имя папки «ресурс» или «файлы» и сохранить имя вложенных папок. Что ж, наличие такой структуры папок порядка не очень важно, важно только то, что вам просто нужно упорядочить файлы по их формату. например, создание папки «/ css /» для файлов CSS или «/ images /» для файлов изображений.

— Джастин
источник
6

Во- первых, я делю в папки: css, js, img.

Внутри css и js я добавляю к файлам префикс имени проекта, потому что ваш сайт может включать файлы js и css, которые являются компонентами, это дает понять, где файлы относятся к вашему сайту или относятся к плагинам.

css/mysite.main.css css/mysite.main.js

Другие файлы могут быть похожи на

js/jquery-1.6.1.js js/jquery.validate.js

Наконец, изображения разделяются по их использованию.

  • img/btn/submit.png кнопка
  • img/lgo/mysite-logo.png логотип
  • img/bkg/header.gif задний фон
  • img/dcl/top-left-widget.jpg элемент декали
  • img/con/portait-of-something.jpg изображение содержимого

Важно организовывать изображения, поскольку их может быть более 100, и они легко могут быть полностью смешаны друг с другом и иметь запутанные названия.

— smdrager
источник
1
img/con? Я предполагаю, что вы не храните какие-либо из этих файлов в системе на базе Windows? Оказывается, con - это зарезервированное имя драйвера устройства MS-DOS, которое нельзя использовать в качестве имени файла .
— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Мне нравится img как имя папки, потому что оно напоминает мне, что имя тега тоже img , а не image .
— user949300 02
6

Я стараюсь избегать ничего общего, например того, что предлагает smdrager. "mysite.main.css" вообще ничего не означает.

Что такое "мизите" ?? Я работаю над этим? Если так, то это действительно очевидно, но я уже думаю, что это может быть и так ли очевидно!

Что такое «Главное»? Слово «Main» не имеет определения, если кодеры не знают, что находится в этом файле css.

Хотя в определенных случаях это нормально, избегайте также таких имен, как «верхний» или «левый»: «top-nav.css» или «top-main-logo.png».
Возможно, вы захотите использовать то же самое в другом месте, и размещение изображения в нижнем колонтитуле или в содержимом главной страницы под названием «top-banner.png» очень сбивает с толку!

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

Я не думаю, что вам вообще нужно указывать «CSS» или «STYLE» в именах файлов css, поскольку тот факт, что он находится в папке «css» или «styles» и имеет расширение, .cssи в основном потому, что эти файлы только когда-либо вызываются в этом <head>районе я довольно четко знаю, что это такое.

Тем не менее, я делаю это с файлами библиотеки, JS и config (и т. Д.). например, libSomeLibrary.php или JSSomeScript.php. Поскольку файлы PHP и JS включены или используются в различных областях в других файлах, полезно иметь информацию о том, что является основным назначением файла в имени.

например: просмотр имени файла require('libContactFormValidation.php');полезен. Я знаю, что это файл библиотеки (lib) и по названию, что он делает.

Для папок изображений у меня обычно есть images/content-images/и images/style-images/. Я не думаю, что необходимо дальнейшее разделение, но, опять же, это зависит от проекта.

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

site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-20x20.png и
т. д.

Хорошее правило, которому следует следовать: если к файлам прийдет новый разработчик, будут ли они часами сидеть и чесать в затылке, или они, вероятно, поймут, что делают, и им потребуется лишь немного времени на изучение (что неизбежно)?

Однако, как и во всем подобном, одно из самых важных правил, которому нужно следовать - это просто постоянство !
Убедитесь, что вы следуете той же логике и шаблонам во всех своих соглашениях об именах!
От простых имен файлов css до файлов библиотеки PHP и имен таблиц и столбцов базы данных.

— Джеймс
источник
Для того, чтобы удалить двусмысленность для изображений размером Я обсуждающих между site-logo-150w-150h.png, site-logo-w150x150h.pngили site-logo-150w150h.png- мысли?
— Daniel Sokolowski
5

Это старый вопрос, но он все еще актуален.

Моя текущая рекомендация - использовать что-нибудь в следующих строках:

  • активы (или активы-сеть или активы-www); этот предназначен для статического контента, используемого клиентом (браузером)
    • данные; некоторые файлы xml и другие вещи
    • шрифты
    • изображений
    • средства массовой информации
    • стили
    • скрипты
    • lib (или сторонний); этот предназначен для кода, который вы не создаете и не изменяете, библиотеки по мере их получения
    • модифицированный библиотекой (или модифицированный сторонней организацией); этот предназначен для кода, который вы не ожидали изменять, но должны были, например, применить обходной путь / исправление тем временем, поставщик библиотеки выпускает его
  • inc (или assets-server, или assets-local); этот предназначен для контента, используемого на стороне сервера, а не для использования клиентом, например, библиотеки на языках, таких как PHP, или серверные скрипты, такие как файлы bash
    • шрифты
    • lib
    • модифицированный библиотекой

Обычные я выделил жирным шрифтом, остальные не обычного содержания.

Причина основного разделения заключается в том, что в будущем вы можете решить сервер веб-ресурсов из CDN или ограничить клиентский доступ к ресурсам сервера по соображениям безопасности.

Внутри каталогов библиотек я использую для описания библиотек, например

  • lib
    • jquery.com
      • jQuery
        • vX.YZ
    • github
      • [путь]
        • [название библиотеки / проекта]
          • vX.YZ (версия)

Таким образом, вы можете заменить библиотеку на новую, не нарушая код, а также позволяя будущим разработчикам кода, включая вас, найти библиотеку и обновить ее или получить поддержку.

Кроме того, не стесняйтесь организовывать содержимое внутри в соответствии с его использованием, поэтому изображения / логотипы и изображения / значки являются каталогами в некоторых проектах.

В качестве примечания: имя актива имеет смысл, не только означает, что у нас есть ресурсы, но и означает, что ресурсы должны иметь ценность для проекта, а не мертвый груз.

— кабачок
источник
Мне так нравится этот подход, особенно что он настраивается, например, внутри стилей вы можете разместить папку sass и css, однако в некоторых других ответах они называют папку стилей просто css.
— Пабло-Но
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.