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

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

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

ОТВЕТЫ

Ответ 1

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

Ответ 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

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

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

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

Ответ 3

/Assets/
  /Css
  /Images
  /Javascript (or Script)
    /Minified
    /Source

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

Ответ 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

Ответ 5

Сначала я делясь на папки: 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, и их можно легко смешивать вместе и смутно назвать.

Ответ 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 (etc). например, libSomeLibrary.php или JSSomeScript.php. Поскольку файлы PHP и JS включены или используются в разных областях в других файлах, и информация о том, что основная цель файла находится внутри имени, полезна.

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

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

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

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

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

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

Ответ 8

Вы можете назвать это следующим образом:

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

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

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

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

/assets/media/- Для видео и разного типа. файлы.

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