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

Question

Я все еще пытаюсь найти хорошее соглашение об именах для таких ресурсов, как изображения, файлы 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)
• sprite (изображение используется как фоновое изображение в css и содержит несколько "версий")

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

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

Answer 1

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

Answer 2

Я заметил, что многие разработчики веб-интерфейсов уходят от 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

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

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

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

Answer 3

/ Активы /
  /Css
  /Изображений
  /Javascript (или скрипт)
    / Минимизированный
    /Источник

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

Answer 4

Для больших сайтов, где 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

Answer 5

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

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

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

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

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

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

Вы также можете заменить "assets" именем папки "resource" или "files" и сохранить имя ее подпапок. Хорошо, если у вас есть такая структура папок для заказов, это не очень важно, единственное, что вам нужно, это просто упорядочить файлы по формату. как создание папки "/ css /" для файлов CSS или "/ images /" для файлов изображений.

Answer 6

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

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

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

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

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

В каталогах lib я использую, чтобы описать библиотеки, например

• Lib
  • jquery.com
    • JQuery
      • vX.YZ
  • GitHub
    • [дорожка]
      • [библиотека / название проекта]
        • vX.YZ (версия)

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

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

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

Answer 7

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

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

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

Хотя это нормально в определенных сценариях, избегайте названий, таких как "top" или "left": "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/, Я не думаю, что должно быть дальнейшее разделение, но опять же, это зависит от проекта.

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

Сайт-логотип-150x150.png
Сайт-логотип-35x35.png
магазин-контроль кнопка-40x40.png
магазин-Remove-Item-20x20.png
так далее

---

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

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

Answer 8

Сначала я делю на папки: css, js, img,

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

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

Другие файлы могут быть как

js/jquery-1.6.1.jsjs/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, и они могут быть полностью смешаны и смешно названы.

Answer 9

У Би-би-си есть тонны стандартов, касающихся веб-разработки.

Их стандарт довольно прост для CSS-файлов:

http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml

Вы можете найти что-то полезное на их главном сайте:

http://www.bbc.co.uk/guidelines/futuremedia/