当前位置：文江博客话题详情

资产的命名约定（图像、CSS、JS）？

发布于 2024-08-18 04:03:23 字数 830 浏览 2 评论 0原文

我仍在努力为我的网络项目中使用的图像、js 和 css 文件等资源找到一个好的命名约定。

所以，我当前的内容是：

CSS: style-{name}.css
例如：style-main.css、style-no_flash.css、style-print.css等

JS： 脚本-{name}.js
示例：script-main.js、script-nav.js 等。

图像： {imageType}-{name}.{图像扩展}
{imageType} 是这些

图标中的任何一个（例如帮助内容的问号图标）
img（例如通过元素插入的标题图像）
按钮（例如图形提交按钮）
bg （图像在 css 中用作背景图像）
sprite （图像在 css 中用作背景图像并包含多个“版本”）

示例名称为： icon-help.gif< /code>、img-logo.gif、sprite-main_headlines.jpg、bg-gradient.gif 等。

那么，您觉得怎么样您的命名约定是什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜是你 2024-08-25 04:03:23

我注意到很多前端开发人员正在放弃 css 和 js 转而使用 styles 和 scripts因为其中通常还有其他内容，例如 .less、.styl 和 .sass，对于某些内容，还有 >.咖啡。事实上，在选择文件夹组织时使用特定的技术选择并不是一个好主意，即使每个人都这样做。我将继续使用我从这些备受尊敬的开发人员那里看到的标准：

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

以及它们的目标构建等效项，有时根据它们正在构建的内容以 dest 为前缀：

./< /code>
images
styles
styles/fonts
scripts

这允许那些想要将所有文件放在一起的人（而不是突破 src 目录）以保留该目录，并保持与那些确实突破的内容明确关联的内容。

我实际上更进一步，添加了

scripts/before
scripts/after

，它被分成两个 main-before.min.js 和 >main-after.min.js 脚本，一个用于标头（例如，必须尽早运行的 normalize 和 modernizr 的基本元素）和after 是正文中的最后一件事，因为 javascript 可以等待。这些不是供阅读的，就像谷歌的主页一样。

如果由于构建规则中考虑了特定的缓存管理方法，因此有必要缩小并保留链接的脚本和样式表。

如今，如果您不使用某种构建过程，例如 gulp 或 grunt，您可能没有达到您应该考虑的大多数以移动为中心的性能目标。

回复收藏 0 原文

饭团 2024-08-25 04:03:23

我将 CSS 文件放在 css 文件夹中，将 Javascript 放在 js 中，将图像放在 images 中，...根据需要添加子文件夹。单个文件级别不需要任何命名约定。

回复收藏 0 原文

暖树树初阳… 2024-08-25 04:03:23

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

是我见过的最好的结构，也是我最喜欢的结构。对于文件夹，您实际上不需要为 CSS 等添加描述性名称前缀。

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

Is the best structure I've seen and the one I prefer. With folders you don't really need to prefix your CSS etc. with descriptive names.

回复收藏 0 原文

喜爱纠缠 2024-08-25 04:03:23

对于 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

For large sites where css might define a lot of background images, a file naming convention for those assets comes in really handy for making changes later on.

For example:

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

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

We have also discussed adding in the element type, but im not sure how helpful that is and could possibly be misleading for future required changes:

[component].[element]-[function-description].[filetype]
footer.div-bkg-image.png
footer.p-copyright-gradient.png

回复收藏 0 原文

┊风居住的梦幻卍 2024-08-25 04:03:23

您可以这样命名：

/assets/css/ - 对于 CSS 文件

/assets/font/ - 对于字体文件。（大多数情况下，您可以访问 google fonts 来搜索可用的字体。）

/assets/images/ - 对于图像文件。

/assets/scripts/ 或 /assets/js/ - 对于 JavaScript 文件。

/assets/media/ - 用于视频和其他内容。文件。

您还可以将“资产”替换为“资源”或“文件”文件夹名称，并保留其子文件夹的名称。拥有这样的订单文件夹结构并不是很重要，唯一重要的是您只需按文件的格式排列文件即可。例如为 CSS 文件创建文件夹“/css/”或为图像文件创建“/images/”文件夹。

回复收藏 0 原文

何处潇湘 2024-08-25 04:03:23

这是一个老问题，但仍然有效。

我目前的建议是使用以下内容：

assets（或 asset-web 或 assets-www）；这适用于客户端（浏览器）使用的静态内容
- 数据；一些 xml 文件和其他东西
- 字体
- 图片
- 媒体
- 样式
- 脚本
- lib（或第 3 方）；这个适用于您不制作或修改的代码，以及您获得的库
- lib 修改（或第三方修改）；这个代码适用于您不希望修改但不得不修改的代码，例如在库提供程序发布它的同时应用解决方法/修复
inc（或资产服务器或资产本地） ;该内容适用于服务器端使用的内容，而不是由客户端使用，例如 PHP 或服务器脚本等语言中的库，例如 bash 文件
- 字体
- lib
- lib 修改

常用的我用粗体标出，其他的都不是常用的内容。

主要划分的原因是，出于安全原因，将来您可以决定从 CDN 提供 Web 资产的服务器或限制客户端对服务器资产的访问。

在 lib 目录中，我用来描述库，例如

lib
- jquery.com
  - jQuery
    - vX.YZ
- github
  - [路径]
    - [库/项目名称]
      - vX.YZ（版本）

，这样您就可以用新的库替换该库，而不会破坏代码，还允许未来的代码维护者（包括您自己）找到该库并更新它或获得支持。

另外，请随意根据其用途来组织内部内容，因此图像/徽标和图像/图标是某些项目中的预期目录。

附带说明一下，资产名称是有意义的，不仅意味着我们在那里拥有资源，而且意味着那里的资源必须对项目有价值，而不是自重。

回复收藏 0 原文

指尖凝香 2024-08-25 04:03:23

首先，我分为文件夹：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 个，并且很容易完全混合在一起并且命名混乱。

回复收藏 0 原文

柏林苍穹下 2024-08-25 04:03:23

我倾向于避免任何通用的内容，例如 smdrager 建议的内容。 “mysite.main.css”根本没有任何意义。

什么是“我的网站”？我正在做的这个？如果是这样，那么确实很明显，但它已经让我思考它可能是什么以及是否如此明显！

什么是“主”？除了编码人员对该 css 文件内容的了解之外，“Main”一词没有任何定义。

虽然在某些情况下可以，但也避免使用“top”或“left”之类的名称：“top-nav.css”或“top-main-logo.png”。
您可能最终想在其他地方使用相同的东西，并且将图像放在页脚或主页内容中称为“top-banner.png”非常令人困惑！

我不认为拥有大量样式表来允许适当的命名约定来描绘给定文件中的 css 内容没有任何问题。
有多少完全取决于站点的大小及其功能，以及站点上有多少个不同的块。

我认为你根本不需要在 css 文件名中声明“CSS”或“STYLE”，因为事实上它位于“css”或“styles”文件夹中，并且扩展名为 .css主要是因为这些文件仅在区域中调用，所以我非常清楚它们是什么。

也就是说，我使用库、JS 和配置（等）文件来执行此操作。例如 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 库文件，再到数据库表和列名称。

I tend to avoid anything generic, such as what smdrager suggested. "mysite.main.css" doesn't mean anything at all.

What is "mysite"?? This one I'm working on? If so then obvious really, but it already has me thinking what it might be and if it is this obvious!

What is "Main"? The word "Main" has no definition outside the coders knowledge of what is within that css file.

While ok in certain scenarios, avoid names like "top" or "left" too: "top-nav.css" or "top-main-logo.png".
You might end up wanting to use the same thing elsewhere, and putting an image in a footer or within the main page content called "top-banner.png" is very confusing!

I don't see any issue with having a good number of stylesheets to allow for a decent naming convention to portray what css is within the given file.
How many depends entirely on the size of the site and what it's function(s) are, and how many different blocks are on the site.

I don't think you need to state "CSS" or "STYLE" in the css filenames at all, as the fact it's in "css" or "styles" folder and has an extension of .css and mainly as these files are only ever called in the <head> area, I know pretty clearly what they are.

That said, I do this with library, JS and config (etc) files. eg libSomeLibrary.php, or JSSomeScript.php. As PHP and JS files are included or used in various areas within other files, and having info of what the file's main purpose is within the name is useful.

eg: Seeing the filename require('libContactFormValidation.php'); is useful. I know it's a library file (lib) and from the name what it does.

For image folders, I usually have images/content-images/ and images/style-images/. I don't think there needs to be any further separation, but again it depends on the project.

Then each image will be named accordingly to what it is, and again I don't think there's any need for defining the file is an image within the file name. Sizes can be useful, especially for when images have different sizes.

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

A good rule to follow is: if a new developer came to the files, would they sit scratching their head for hours, or would they likely understand what things do and only need a little time researching (which is unavoidable)?

As anything like this, however, one of the most important rules to follow is simply constancy!
Make sure you follow the same logic and patterns thoughout all your naming conventions!
From simple css file names, to PHP library files to database table and column names.

回复收藏 0 原文