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

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

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

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

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

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

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

Для крупных сайтов, где 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

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

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

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

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

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

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

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

Во- первых, я делю в папки: 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. "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 и имен таблиц и столбцов базы данных.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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