php - 表示大型元素的 CSS 和 JS 文件的最佳方式

Question

表示大型元素的 CSS 文件的最佳方式是什么

我正在使用 CodeIgniter，会有 100 多个 View ，其中几乎有不同的结构，所以我在这里有很多选择，但我不知道什么是最好的，所以请帮忙

1. 为 CSS 制作一个文件，为 JS 制作一个文件
2. 为每个 View 制作一个CSS文件，为每个 View 制作一个JS文件
3. 制作一个简单的数据库表来保存相关文件每种方法

例如

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());

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