Имена для фоновых изображений, каталоги

Во время создания макета через наши «фотошопы» проходит множество картинок, фоновых и не очень.

Чтобы долго не ломать голову, где какая картинка. Я называю их по имени объекта, фоновой картинкой, которого она является.

body.jpg(картинка для body), header.gif(#header), logo.gif(#logo), catalog-item.gif(.catalog-item)

Картинки складываю в директорию i, JavaScript лежит в директории js, рыбные картинки в temp_images, стили в папке css.

Вот и все премудрости. А, как у вас?

Этот пост затевался для того, чтобы определиться с этими 2-мя премудростями:

  1. Какие имена лучше всего давать фоновым картинкам?
  2. Какие имена для папок с ресурсами?
  • Я вообще не вижу смысла заморачиваться на именах картинок. Понимаю, структуру блоков обсуждать, но картинки...

    А структура папок у меня такая:

    - www
    -- media
    --- css
    --- img
    --- htc
    --- js
  • Фоновые изображения обзываю аналогично - для #header - header.gif. Если фон состоит из нескольких частей, то, например, так:
    header_bg.gif
    header_left.gif
    header_right.gif

    Структура папок:
    i/ - изображения
    css вместе с html-файлами
  • Фоновые всегда именую по классу (или айдишке), в котором они подключкены к странице:

    bg-header.png (для #header)

    Папки:

    i/
    css/
    js/
  • Фоновым картинкам -- префикс "bg-" (bg-header.gif, bg-menu.gif, etc.).

    Иконкам -- префикс "ico-".

    "i/" -- директория для картинок.
    "css/" -- для стилей.
    "js/" -- для скриптов.
  • Структура папок:
    /i/ - "i" как сокращение от images и от include
    /i/a/ - anonses. картинки для анонсов
    /i/b/ - banners
    /i/c/ - catalog. для картинок каталога
    /i/d/ - design
    /i/v/ - visuals. всевозможные визуалы
    /i/favicon.ico
    /i/print.css
    /i/screen.css
    /i/script.js

    /i/a/, /i/c/ и /i/v/ - от проекта к проекту.

    Фоновые картинки называю по принципу: bg.jpg, bg-header.jpg, bg-footer.jpg.
    Кнопочки: button-submit.gif, button-confirm.gif.
    Иконки: icon-home.gif, icon-sitemap.gif, icon-contact.gif.

    Главное преимущество: при сортировке по имени картинки сортируются по их назначению.
  • В последних проектах, особо богатых графикой, выделяю картинки не только по именам (имена - похоже, как и у вас), но и по типам. Все фоновые картинки имеют префикс bcg
    bcg-body
    bcg-top
    bcg-...
    все иконки - префикс ico-
    ico-settings
    ico-users
    ico-...
    Так мне проще ориентироваться в самой файловой системе с картинками (их подтипы сортируются по именам, эмулируя "группы"). Рубрики создаю с более полными названиями:
    css/
    js/
    Связано, скорее, с текучкой кадров в нашем офисе (особенно среди дотнетовских программеров), т.е. именовать всё вообще приходится более интуитивно понятно, не до сокращений.
    Пытаюсь найти оптимальную модель именования файлов-рубрик-идентификаторов и прочего, понятную всем моим разработчикам.
  • предпочитаю называть изображения по их предназначению с разделением слов с помощью дефиса. Например кнопку с текстом add to cart я назову add-to-cart.png, a общие элементы - к классу header у меня header-bg.png, а к тегу h2 - h2.png

    Папки создаю по такой схеме:
    design/images/
    design/css/
    design/js/
  • У меня консервативно:
    img/
    css/
    js/

    Картинки именую как header-bg, header-top
    str.gif всегда называю картинку которая растягивается на весь блок :) Для Faux Columns типа.
    В селекторах отдаю предпочтение дефису - "content-main"
  • Делаю сложно ./_resources/{styles,scripts,images,images/temp}.
    Просто в _resources лежат остальные куски оформления от «движка».
  • Папки:

    /img - для элементов оформления страницы
    /temp - сида скидываю картинки-рыбы
    /js - для скриптов
    /css - для стилей

    Названия для элементов оформления даю исходя из их положения, например: footer-bg, nav-glob-bg, sidebar-h2-bg, header-logo и т.п.
  • /images и добавляю подпапки
    /style
    /scripts или js

    Картинки тоже по имени обьекта называю, но добавляю определения, на пример body_bg или menu_border.
  • 1. каюсь, до недавнего времени у меня бэки были просто bg1.gif, bg2.gif и так далее... Сейчас постепенно перехожу на более понятные описания, исходя из названия контейнера (header.gif, logo.gif)

    2. i/(images/) js/ icons/ css/
  • Lynn
    css, js, i
    В i подкаталоги для больших кусков, но структура пока не устоялась.
  • css/
    img/
    js/

    а картинки схоже, только для фоновых добавляю постфикс bg
    header.png
    header-bg.png

    если есть класс - пишу, например h1-pointer-bg.png - это бэкграунд для h1.pointer
  • 4Ek
    Аналогично i и js для картинок и скриптов соответственно.
    Только в последнее время начал бить i на подпапки, названия которых образованы из популярных префиксов. Проще ориентироваться, когда много картинок.
  • Не знаю как лучше, сам использую:
    /с для CSS
    /d для Downloads
    /i для картинок
    /j для JavaScript
blog comments powered by Disqus