logo标签列表

资产（图片、CSS、JS）的命名规范是什么？

naming-conventions
99

我仍在努力寻找一种适用于Web项目中使用的图片、JS和CSS文件等资源的良好命名规范。

因此，我现在使用的命名方式如下：

CSS：style-{名称}.css
例如：style-main.css，style-no_flash.css，style-print.css 等。

JS： script-{名称}.js
例如：script-main.js，script-nav.js 等。

图片：{图片类型}-{名称}.{图片后缀}
其中{图片类型}可为以下任意一项：

  • icon（例如帮助内容中的问号图标）
  • img（例如通过 <img /> 元素插入的页眉图像）
  • button（例如图形提交按钮）
  • bg（将图像作为CSS中的背景图像使用）
  • sprite（将图像作为CSS中的背景图像使用，并包含多个“版本”）

示例名称包括：icon-help.gif，img-logo.gif，sprite-main_headlines.jpg，bg-gradient.gif 等。

那么，您认为这种命名方式如何，您的命名约定是什么？

仅就“Javascript文件命名规范”而言，请在https://dev59.com/zGw05IYBdhLWcg3wYw1s上阅读更多信息。 - Adriano
9个回答
67
我注意到许多前端开发人员正在放弃使用 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 等基本元素），而另一个用于 body 中最后的 javascript。这些代码不适合阅读，就像 Google 的主页一样。如果有脚本和样式表因为特定的缓存管理方法而适合进行缩小并保留链接，则可以在构建规则中处理。

现在，如果你没有使用类似于gulp或grunt的构建过程，那么你可能无法达到大多数移动端性能目标，这些目标应该是你需要考虑的。

字体文件（.ttf，.eot等）是否位于styles/fonts目录中？ - Andrew Savetchuk
这是一个非常合理的想法。谢谢！ - zhibirc
32

我将CSS文件放在一个名为css的文件夹中，Javascript文件放在js文件夹中，图片放在images文件夹中，... 根据需要添加子文件夹。不需要对单个文件进行任何命名约定。

17
我不同意。考虑到许多已知项目都有命名规范，例如jQuery使用<product-name>.<plugin>-<ver.sion>.<filetype>.js来命名文件，例如jquery-1.4.2.min.js或者jquery.plugin-0.1.js。请您自行理解以上内容。 - Adriano
14
/资产/
  /样式表
  /图片
  /JavaScript（或脚本）
    /已压缩
    /源代码

这是我见过的最好的结构，也是我喜欢的结构。使用文件夹，您无需在CSS等前面添加描述性名称。

我喜欢这个，但我认为更常见的根文件夹是“public”或“content”。 - Brian Boatright
我第一次看到这种“资产（Assets）”文件结构是当我深入研究Angular单页应用程序时。它被广泛地应用于许多Angular单页应用教程中 - 我很喜欢它。 - Kyle Vassella
12

对于大型网站，当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
8
您可以像这样命名它：
/assets/css/ - 用于CSS文件
/assets/font/ - 用于字体文件。（大多数情况下，您可以在谷歌字体中搜索可用的字体。）
/assets/images/ - 用于图像文件。
/assets/scripts/ 或 /assets/js/ - 用于JavaScript文件。
/assets/media/ - 用于视频和杂项文件。
您还可以将“资产”替换为“资源”或“文件”文件夹名称，并保留其子文件夹的名称。拥有这样一个有序的文件结构并不是很重要，唯一重要的是您必须按其格式排列文件，例如创建一个“/css/”文件夹用于CSS文件或“/images/”用于图像文件。
6

首先，我会按文件夹分类：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个图像，并且很容易被混淆和命名混乱。

2
img/con？我猜你没有将这些文件存储在基于Windows的系统上？事实证明，_con_是保留的MS-DOS设备驱动程序名称，不能用作文件名。 - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
我喜欢将文件夹命名为img，因为它提醒我标签名称也是“img”，而不是“image”。 - user949300
6
这是一个老问题，但仍然有效。
我的建议是按照以下方式进行：
- assets（或assets-web或assets-www）：这个目录用于存放客户端（浏览器）使用的静态内容 - data：一些XML文件和其他内容 - fonts - images - media - styles - scripts - lib（或3rd-party）：这个目录用于存放你没有制作或修改的代码库 - lib-modded（或3rd-party-modified）：这个目录用于存放你不打算修改但必须修改的代码，例如在库提供商发布之前应用的解决方法/修复方法
- inc（或assets-server或assets-local）：这个目录用于存放服务器端使用的内容，不可由客户端使用，例如PHP等语言中的库或服务器脚本，例如bash文件 - fonts - lib - lib-modded
我用粗体标记了通常的目录，其他目录不太常见。
主要划分的原因是，将来您可以决定从CDN提供Web资源或限制客户端访问服务器资源，出于安全考虑。
在lib目录内，我会对库进行描述，例如：
- lib - jquery.com - jQuery - vX.Y.Z - github - [path] - [library/project name] - vX.Y.Z（版本）
这样，您可以替换库而不会破坏代码，还可以让未来的代码维护者（包括您自己）找到库并更新它或获得支持。
此外，根据其用途随意组织内容，因此在某些项目中，图像/徽标和图像/图标是预期目录。
顺便说一下，assets名称具有意义，不仅表示我们在其中拥有资源，而且表示其中的资源必须对项目有价值，而不是无用的负担。
我非常喜欢这种方法，特别是它是可定制的。例如，在样式中，您可以放置一个sass和一个css文件夹，但在其他答案中，他们只称样式文件夹为css。 - Pablo-No
6
我倾向于避免使用任何通用的东西，比如smdrager建议的。 "mysite.main.css" 根本没有意义。
“mysite”是什么？这个我正在工作的网站吗？如果是这样，那显然很明显，但它已经让我想到了它可能是什么，以及它是否如此明显！
“Main”是什么？除了编码人员对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/。我认为没有必要进行进一步的分离，但这又取决于项目。
然后每个图像将根据其名称进行命名，同样，我认为没有必要在文件名中定义文件是图像。大小可能很有用，特别是当图像具有不同的大小时。
site-logo-150x150.png site-logo-35x35.png shop-checkout-button-40x40.png shop-remove-item-20x20.png 等等
遵循的一个好规则是：如果新开发人员来到这些文件，他们会花费数小时挠头，还是他们可能了解事情的运作方式，只需要一点时间进行研究（这是不可避免的）？

然而，像这样的任何事情，遵循的最重要的规则之一就是一致性！
确保您在所有命名约定中都遵循相同的逻辑和模式！
从简单的css文件名到PHP库文件再到数据库表和列名。

为消除图像尺寸的歧义，我正在考虑使用site-logo-150w-150h.png、site-logo-w150x150h.png或site-logo-150w150h.png，你有什么想法？ - Daniel Sokolowski
4
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接