WordPress CSS editor plugin
<p>I'm building a plugin for having a CSS editor in my admin. At the moment I have these features:</p>

<ul>
<li>Code editor in admin using Ace</li>
<li>Link to stylesheet in frontend</li>
<li>Rewrite rules to generate frontend linked CSS dynamically without having to save the CSS to a file</li>
</ul>

<p>The backend has an editor where you can create multiple "Code Tabs" which is like virtual CSS-files. These tabs can be set to only be shown in particular pages or all pages. </p>

<p>I use this code to enqueue the script.</p>

<pre class="lang-php prettyprint-override"><code>add_action( 'wp_enqueue_scripts', 'enqueue_scripts', 10, 1 );

function enqueue_scripts() {
    wp_enqueue_script(
        'code-editor', 
        site_url(
            sprintf(
                'code-editor/css/application.min.css?pid=%s',
                $post_id
            )
        ),
        false,
        false
    );
}
</code></pre>

<p>Then I have this rewrite rule for displaying the CSS dynamically via PHP.</p>

<pre class="lang-php prettyprint-override"><code>add_action( 'init', 'add_rewrite_rules', 10, 1 );

function add_rewrite_rules() {
    add_rewrite_rule(
        '^code-editor/css/application.min.css/?',
        'index.php?code_editor_css=1',
        'top'
    );
}

add_filter( 'query_vars', 'add_query_vars', 10, 1 );

function add_query_vars( $vars ) {
    $vars[] = "code_editor_css";

    return $vars;
}
</code></pre>

<p>This code is ran when a user loads the <a href="http://example.com/code-editor/css/application.min.css" rel="nofollow">http://example.com/code-editor/css/application.min.css</a> </p>

<pre class="lang-php prettyprint-override"><code>add_action( 'wp', 'handle_code_pages', 10, 1 );

function handle_code_page() {
    global $wp_query;

    if( isset( $wp_query-&gt;query_vars['code_editor_css'] ) ) {
        global $wpdb;

        header( "Content-Type: text/css" );

        $current_post_id = isset( $_GET["pid"] ) ? intval( $_GET["pid"] ) : "";

        $css_tabs = $wpdb-&gt;get_results(
            $wpdb-&gt;prepare(
                "SELECT * FROM {$wpdb-&gt;prefix}code_editor_tabs
                WHERE type = 'css'
                AND document_type = 'external'
                AND active = 1
                AND FIND_IN_SET(%d, page_ids)
                ORDER BY sort_order ASC",
                $current_post_id
            )
        );

        foreach( $css_tabs as $css_tab ) {
            echo $css_tab-&gt;compressed_data;
        }

        exit;
    }
}
</code></pre>

<p>The problem here is that when <code>handle_code_page()</code> is ran, WordPress gets loaded which increases server response time a lot. I want to cache this and improve the response time. My idea was that when <code>handle_code_pages()</code> is ran, I can save the CSS-code in <code>/www-root/code-editor/css/application.min.css</code> and then enqueue that file instead of my rewrite rule link. Since I can set that CSS should only apply to some pages there needs to be one CSS-file per page. So if I go to the page with the ID <code>16</code> I would create a CSS-file at <code>/www-root/code-editor/css/application-16.min.css</code> and enqueue it.</p>

<p>My question is: Is it bad practice to generating and saving CSS-files in a custom folder in WordPress root and then linking them?</p>