Question

表示大型项目的CSS文件的最佳方式是什么

我正在使用 CodeIgniter 并且会有100个视图，而且几乎有不同的结构，所以我在这里有很多选项，但我不知道什么是最好的，所以请帮忙

为CSS制作单个文件，为JS制作单个文件
为每个视图创建一个CSS文件，为每个视图创建JS
创建一个简单的数据库表来保存相关文件每种方法

例如

id ----- method_name ---- files (I will normalize it )
1        /test/first      first.css,first.js
and so on

或使PHP函数从PHP

例如

<?php
function get_assoc($view)
{
      switch($view):
          case '/test/first':
             echo "<script>alert(); </script><style>p{font-weight:bold;}</style>"; 
          break; 
      endswitch; 
}
?>

还有什么缓存？性能是一个重要因素。感谢。

Answer 1

我喜欢分开每个部分重置/打字/表格/表格，这样我就不会迷路。不要害怕根据需要使用尽可能多的不同文件（用于开发目的）。

准备好进入生产/实时模式后，从“html5boilerplate”中获取“构建工具”并将所有css压缩为一个文件，js相同。这也将缩小您的代码并缓存您的文件。只需保留未压缩的文件，就可以进行重大编辑

<!-- CSS -->
<link rel=stylesheet href="assets/css/reset.css" >
<link rel=stylesheet href="assets/css/typography.css" >
<link rel=stylesheet href="assets/css/tools.css" >
<link rel=stylesheet href="assets/css/tables.css" >
<link rel=stylesheet href="assets/css/forms.css" >
<link rel=stylesheet href="assets/css/plugins.css" >


<!-- Script -->
<script src="assets/js/modernizr2.0.js"></script>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/tools.js"></script>
<script src="assets/js/tables.js"></script>
<script src="assets/js/forms.js"></script>
<script src="assets/js/functions.js"></script>

然后我想将每个（js）文件包装为一个对象，这又有助于提高可读性。

示例：

(function($){ var ToolsObj = { init : function(){ this.tooltip(); this.tabs(); this.pagination(); this.alerts(); this.dropdowns(); this.lightbox(); }, tooltip : function(){ //tooltip code }, tabs : function(){ //tabs code }, pagination : function(){ }, alerts : function(){ //alert messages code }, dropdowns : function(){ //dropdown-menu code }, lightbox : function(){ //lightbox code } } $(function(){ ToolsObj.init(); }); })(jQuery.noConflict());

希望这能让您深入了解我的工作流程。您可能还想在运行对象之前检查文档中是否存在每个元素。

Answer 2

数据库=否

不要使用数据库。显示视图所需的CSS / JS文件与源代码直接相关，因此请在源代码中保留该信息（特别是如果您使用的是SCM，如Git或SVN）。

CSS / JS =演示文稿

由于这些文件与演示文稿/用户界面相关，我建议委派将其加载到视图本身的“责任”。控制器＆amp;模型不应该“知道”显示视图所需的CSS / JS。

模块化

将文件整理为独立的模块化单元。没有为每个视图单独的CSS / JS文件，除非您在每个视图上真正具有完全独立的功能。您在视图中共享这些文件的次数越多，您就越好。

利用缓存，而不是与之抗争

我知道每次修改文件时重命名文件都很麻烦，但这确实是一个很好的方法。使用缓存失效方法（如URL？time = ...）只会给服务器和客户端带来额外的压力，这是没有充分理由的。只需两秒钟就可以将“styles.css”文件重命名为“styles_v2.css”。你以后会感谢你自己。（请记住，您不必为每一次开发更改重命名 - 只有当它足够稳定以进行QA /生产时）。

过早优化=万恶之源

最后 - 最重要的是 - 绝对不能优化！我见过很多人一直在缩小和压缩他们的资产文件，只是为了让他们在几天后进行大修。要么创建一个真正的构建过程，要么等到事情稳定下来，过分担心微调。

Answer 3

您是否已进行页面数据库调用以确定应使用哪些视图等？可能希望有一个主要的js和css用于所有页面，然后是通过DB链接的，仅由某些视图专门使用的。

至于缓存......这些文件将由浏览器缓存，只要它们具有相同的请求名称即可。我通常使用类似于：

的视图方法对这些进行自动版本化

function autoversion($filename) {
    $time = filemtime($filename);
    return $filename . '?v=' . $time;
}

如果你有一个可以为你编译这些文件的构建系统，你将获得很小的性能提升。

表示CSS＆amp;的最佳方式一个大项目的JS文件

3 个答案: