我仍在努力为我的网络项目中使用的图像，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 />元素插入的标题图像）示例名称为：icon-help.gif，img-logo.gif，sprite-main_headlines.jpg，bg-gradient.gif等。
那么，您的想法是什么？您的命名惯例是什么？？
答案 0 :(得分：42)
我注意到很多前端开发人员正在离开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的基本元素必须提前运行）和after因为javascript可以等待身体的最后一件事。这些不是用于阅读，就像谷歌的主页一样。
如果有脚本和样式表有意义缩小并单独保留链接，因为构建规则中会考虑特定的缓存管理方法。
现在，如果您没有使用某种类型的构建过程，例如gulp或grunt，您可能无法达到应该考虑的大多数以移动为中心的性能目标。
答案 1 :(得分：23)
我将CSS文件放在css文件夹，js中的Javascript，images中的图片，...根据需要添加子文件夹。不需要在单个文件级别上使用任何命名约定。
答案 2 :(得分：12)
/Assets/
/Css
/Images
/Javascript (or Script)
/Minified
/Source
我见过的最好的结构和我喜欢的结构。使用文件夹，您不需要在CSS等前面添加描述性名称。
答案 3 :(得分：10)
对于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
答案 4 :(得分：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种图像，并且很容易混合在一起并且容易混淆。
答案 5 :(得分：6)
我倾向于避免任何通用的东西，例如smdrager建议的东西。 “mysite.main.css”并不意味着什么。
什么是“谜”？我正在研究这个？如果是这样，那么显而易见，但它已经让我思考它可能是什么，如果这是显而易见的！
什么是“主要”？ “主要”一词在编码员知道该css文件内的内容之外没有定义。
虽然在某些情况下还可以，但请避免使用“top”或“left”等名称：“top-nav.css”或“top-main-logo.png”。
您最终可能希望在其他地方使用相同的内容，将图像放在页脚或主页内容中称为“top-banner.png”非常令人困惑！
我没有看到任何问题，有很多样式表允许一个体面的命名约定来描述给定文件中的css。
有多少完全取决于网站的大小及其功能，以及网站上有多少个不同的块。
我认为您根本不需要在css文件名中声明“CSS”或“STYLE”，因为它位于“css”或“styles”文件夹中，并且扩展名为.css和主要是因为这些文件只在<head>区域被调用过，我清楚地知道它们是什么。
那就是说，我用库，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库文件，再到数据库表和列名。
答案 6 :(得分：6)
您可以这样命名：
/ assets / css / - 对于CSS文件
/ assets / font / - 对于字体文件。 （大多数情况下，你可以去google字体搜索可用的字体。）
/ assets / images / - 对于图像文件。
/ assets / scripts /或/ assets / js / - 对于JavaScript文件。
/ assets / media / - 用于视频和misc。文件。
您还可以将“assets”替换为“resource”或“files”文件夹名称，并保留其子文件夹的名称。拥有这样的订单文件夹结构并不是非常重要，唯一重要的是你必须按照它的格式排列文件。比如为CSS文件创建文件夹“/ css /”或为图像文件创建“/ images /”。
答案 7 :(得分：4)
英国广播公司有很多关于网站开发的标准。
CSS文件的标准相当简单：
http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml
您可以在其主要网站上找到有用的内容：
答案 8 :(得分：3)
这是一个古老的问题，但仍然有效。
我当前的建议是在此行中添加一些内容：
我用粗体标出了平常的内容，其他不是平常的内容。
进行主要划分的原因是，出于安全原因，将来您可以决定从CDN服务器提供Web资产或限制客户端对服务器资产的访问。
例如，我在lib目录中用于描述库
因此您可以在不破坏代码的情况下用新的库替换该库，还可以让包括您自己在内的将来的代码维护者找到该库并对其进行更新或获得支持。
此外，请随时根据其用途来组织内容，因此在某些项目中，图像/徽标和图像/图标是预期的目录。
作为旁注，资产名称是有意义的，不仅意味着我们在那里拥有资源，而且意味着那里的资源必须对项目具有价值，而不是无谓的负担。