What is the difference between a PHP snippet with CSS and an actual CSS snippet?

  • Resolved thesinglegourmet

    (@thesinglegourmet)


    10 months ago

    There are two ways a user can use Code Snippets (Pro) to implement CSS:

    1. Create a PHP snippet with CSS (available in free version):
      add_action( ‘wp_head’, function () { ?>
      <style>
      /* write your CSS code here */
      </style>
    2. Create a CSS snippet (available only in Pro version) that simply begins with <style> and ends with </style>

    What is the difference between using one or the other?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Shea Bunge

    (@bungeshea)

    Great question! The presence of the <style> tags when adding a Pro CSS Styles snippet is a little misleading – they’re just there to indicate what sort of code the editor is expecting.

    What actually happens behind-the-scenes is all of the code from CSS snippets is bundled together into a single stylesheet, which is then minified and served through a <link> element over HTTP. This means that the browser only needs to download this snippets stylesheet once for each visitor, instead of including the CSS code on every single page.

    The extra step of minification also means you can be assured it’ll be delivered in the most optimised format possible, meaning you can be free to add whitespace, comments etc into the snippet code when you’re editing it.

    TL;DR: the CSS Styles snippets are bundled together for optimum efficiency and page load times. The caveat is they need to be purely CSS code – you can’t embed PHP variables or function calls like you can in a regular Functions snippet.

    Thread Starter thesinglegourmet

    (@thesinglegourmet)

    Hi Shea, thanks for your answer!

    OK, so if I have the Pro version, it is more efficient and pages load faster if I use CSS Snippets (as opposed to a PHP snippet with CSS inside of it).

    If there are say, 100 lines of CSS, can you estimate what the performance hit/improvement is of one method versus the other?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘What is the difference between a PHP snippet with CSS and an actual CSS snippet?’ is closed to new replies.

Tags