Max*_*Max 76 naming-conventions
我仍在努力为我的网络项目中使用的图像,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等.
那么,您的想法是什么？您的命名惯例是什么？
rob*_*muh 45
我注意到有很多的前端开发者远离移动css和js赞成的styles,并scripts因为通常存在有其他的东西,比如.less,.styl和.sass以及为一些.coffee.事实上,即使每个人都这样做,在您选择的文件夹组织中使用特定技术选择也是一个坏主意.我将继续使用我从这些备受尊敬的开发人员那里看到的标准:
src/htmlsrc/imagessrc/stylessrc/styles/fontssrc/scripts和他们的目标构建等价物,有时前缀dest取决于他们正在建设:
./images stylesstyles/fontsscripts这允许那些想要将所有文件放在一起(而不是打破一个src目录)的人保持这一点并保持与那些确实爆发的东西明确相关的东西.
我实际上更进一步并添加
scripts/beforescripts/after其中获得smooshed成两个main-before.min.js和main-after.min.js脚本,一个用于头(带的基本要素normalize,并modernizr有早期运行,例如),并after自认为JavaScript可以等待在体内最后一件事.这些不是用于阅读,就像Google的主页一样.
如果有脚本和样式表有意义缩小并单独保留链接,因为构建规则中会考虑特定的缓存管理方法.
如今,如果您没有使用某种类型的构建过程,例如gulp或grunt,您可能无法实现您应该考虑的大多数以移动为中心的性能目标.
小智 25
我将CSS文件放在一个文件夹css,Javascript in js,images in images... 中,根据需要添加子文件夹.不需要在单个文件级别上使用任何命名约定.
Chr*_*s S 13
/Assets/
/Css
/Images
/Javascript (or Script)
/Minified
/Source
是我见过的最好的结构,也是我喜欢的结构.使用文件夹,您不需要在CSS等前面加上描述性名称.
Bri*_*ton 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
首先,我分成文件夹: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个,并且很容易混合在一起并且容易混淆.
我倾向于避免任何泛型,例如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/.我认为不需要进一步分离,但这又取决于项目.
然后每个图像将根据它的名称进行相应命名,并且我认为不需要定义文件是文件名中的图像.尺寸可能很有用,特别是对于图像尺寸不同的尺寸.
site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-20x20.png
等
一个好的规则是:如果一个新的开发人员来到这些文件中,他们会不顾一切地唠叨几个小时,或者他们是否可能理解做了什么,只需要花一点时间研究(这是不可避免的)？
然而,正如这样,最重要的规则之一就是坚持不懈!
确保在所有命名约定中遵循相同的逻辑和模式!
从简单的css文件名,到PHP库文件,再到数据库表和列名.
小智 6
你可以这样命名:
/ assets/css/ - 对于CSS文件
/ assets/font/ - 对于字体文件.(大多数情况下你可以去google字体搜索可用的字体.)
/ assets/images/ - 用于图像文件.
/ assets/scripts /或/ assets/js/ - 对于JavaScript文件.
/ assets/media/ - 用于视频和misc.文件.
您还可以将"assets"替换为"resource"或"files"文件夹名称,并保留其子文件夹的名称.拥有这样的订单文件夹结构并不是非常重要,唯一重要的是你必须按照它的格式排列文件.比如为CSS文件创建文件夹"/ css /"或为图像文件创建"/ images /".
小智 5
这是一个老问题，但仍然有效。
我目前的建议是使用以下内容：
我用粗体标出了平常的内容，其他的不是平常的内容。
主要划分的原因是，出于安全原因，将来您可以决定从 CDN 为 Web 资产提供服务器或限制客户端对服务器资产的访问。
例如，在我用来描述库的 lib 目录中
这样您就可以用新的库替换库，而不会破坏代码，还允许未来的代码维护者（包括您自己）找到库并更新它或获得支持。
另外，可以根据使用情况随意组织里面的内容，因此图像/徽标和图像/图标在某些项目中是预期的目录。
作为旁注，资产名称是有意义的，不仅意味着我们在那里有资源，而且意味着那里的资源必须对项目有价值，而不是无意义的。