CSS 文件命名规则

所属分类: 网页制作 / CSS 阅读数: 1263
收藏 0 赞 0 分享

遇到一个很实际的问题:由于不想增加目录的深度,减少磁盘寻址的时间,需要减少一些目录层级。

 

大家都知道建立文件夹是为了让文件管理更加的方便,现在需要减少文件夹,如何保持文件管理的方便就成为必需解决的。很容易我们想到通过命名来解决这个问题,那是不是随便一个命名都能起来方便管理的作用呢?样式的命名规则是否适用?对于样式的命名,在《 [更新] 样式命名规则 》已经有讨论,可是样式的命名规则并不能被应用到文件的命名中,毕竟使用的环境不太一样,要解决的问题也不太一样。样式命名要解决的是名称语义化,通过名称能知道这个定义的作用范围;而文件的命名要解决的是更方便的找到对应的文件,当然如果名称有意义,也会有帮助,更重要是要解决同一文件夹下如何更快找到文件。

怎样才能更快找到需要的文件呢?操作系统通过路径能正确找到对应的文件,因为在每一层目录里,所有的标记(目录名、文件名)都是唯一的。而我们找一个文件,一般会需要下面的信息:

  • 文件名(叫什么,一般这个信息会有缺失)
  • 文件类型(图片?样式?页面?还是什么?)
  • 所在域名、栏目的位置(在哪个地方?)
  • 什么时间修改过
  • 路径(就算知道了,一般也不是直接就能使用的,需要层层点击)

对于电脑来说,它并不需要目录名或文件名多容易看懂,只要符合命名规则、同一层级下唯一就可以。但对于我们来说,更希望能通过命名知道更多的信息,因此需要命名有一定的意义。回到一开始的问题,如果当前就在最后的一层目录里,面对那么多的文件,如何更方便找到需要的文件?没错,通过排序可以将文件进行分类,最常用的排序有三种:

  • 文件名(以每个字母从A-Z的顺序排序)
  • 按修改日期(以文件的修改日期为排序条件)
  • 按文件类型(先将文件以类型分类,同类文件再以文件名排序)

为了更好的让排序发挥作用,文件的命名就需要有一些规则。文件名的组成大家应该清楚吧?一般格式为“名称.扩展名”。扩展名也是文件名的一部分,但这部分比较固定,没有什么可发挥的。前面“名称”的部分是我们讨论的重点。发散下思维,我们可以想到添加一些相对固定的词来起到分类的作用,我们称之为“缀”,从位置上可分为“前缀”和“后缀”。

常用的缀:预设目录名、文件类型、域名、日期、版本号

例如名称为“demo”,加上前缀或后缀的形式如下:
预设目录名:css_demo |demo_css
文件类型:png_demo | demo_png
域名:blog_demo | demo_blog
日期:20090904_demo | demo_20090904
版本号:v1_demo | demo_v1

前缀的作用:区分同一类型的文件名,由于操作系统的排序规则(同一类型的文件以文件名排序),因此前缀能很好的起到区分的作用。比较符合阅读的习惯。缺点是如果使用键盘导航(直接使用键盘可以跳到对应字母的文件位置),由于前缀相同,会有一定的影响。

后缀的作用:后缀一般用于版本的控制,像存档、多版本、备份等等。缺点是如果名称过长,不太直观。

 

我们来看看两种方式的差别在哪:

 

 

 

上面几个图是将添加了前缀和后缀的文件放到同一目录下,分别使用三种排序的结果。由于模块化的制作方式,文件一般会以模块为单位分布,使用前缀的时候往往会因为文件类型不一样使同一模块的文件被分散到不同的位置,而使用后缀反而可以很好的将同一模块的文件归到一起。从上面的图可以看出这点。因此在这种情况下,使用后缀会更方便于文件的查找。

更多精彩内容其他人还在看

利用纯CSS3实现动态的自行车特效源码

这篇文章主要介绍了如何利用纯CSS3实现动态的自行车的方法,文中给出了完整的实例代码,实现后的效果非常不错,大家可以直接运行看看效果,需要的朋友下面来一起学习学习吧。
收藏 0 赞 0 分享

web前端开发规范文档(2014年版本)

这篇文章主要为大家介绍了前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性,需要的朋友可以参考下
收藏 0 赞 0 分享

前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范

这篇文章主要介绍了前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下
收藏 0 赞 0 分享

手把手教你用CSS实现带箭头的流程进度条

这篇文章主要给大家介绍了利用CSS实现带箭头的流程进度条大方法,文中给出了详细的示例代码,对大家具有一定的参考价值,有需要的朋友们一起来看看吧。
收藏 0 赞 0 分享

CSS实现三栏布局的四种方法示例

可能有人不理解三栏布局是什么,其实三栏布局页面分为左中右三部分,然后对中间一部分做自适应的一种布局方式,下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

利用css实现浮雕效果示例代码

这篇文章主要给大家介绍了利用css如何实现浮雕的效果,文中给出了详细的示例代码和解释,相信对大家有一定的参考价值,感兴趣的朋友们下面来一起看看吧。
收藏 0 赞 0 分享

浏览器默认样式(User Agent Stylesheet)的介绍与最佳处理方法

这篇文章主要给大家介绍了浏览器默认样式(User Agent Stylesheet)的相关资料,并给出了相对应的最佳解决方法。有需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

css中px、em和rem的区别总结

相信每位前端工程师们都有这么一个体会,国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

CSS3实现点击放大的动画实例代码

这篇文章主要给大家介绍了关于利用CSS3实现点击放大的动画效果,文中给出了完整的实例代码,相信对大家具有一定的参考价值,需要的朋友们可以一起来看看吧。
收藏 0 赞 0 分享

利用css代码实现纸飞机效果实例源码

这篇文章主要给大家介绍了如何利用css代码实现纸飞机的效果,实现后效果非常不错,文中给出了详细的实例代码,大家可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享
查看更多