{"id":183,"date":"2011-04-19T16:17:42","date_gmt":"2011-04-19T16:17:42","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=183"},"modified":"2011-04-19T16:17:42","modified_gmt":"2011-04-19T16:17:42","slug":"page-specific-css","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/page-specific-css\/","title":{"rendered":"Page specific CSS"},"content":{"rendered":"

One major decision when it comes to performance optimizing your site is how to merge your CSS files, if at all.<\/p>\n

Let's say that you have a few pages within your site that require additional CSS styling, beyond your standard template. There are two options:<\/p>\n

    \n
  1. Create a separate CSS file, and import it in your <head>.<\/li>\n
  2. Add an id<\/em> or class<\/em> attribute to the individual page body and prefix your page-specific styles with that id.<\/li>\n<\/ol>\n

    The first option is fairly simple, and makes sense if you have a large number of CSS styles for the given page, and there is no need for them to be loaded on all pages.<\/p>\n

    However, if you need only modify or add a small number of page-specific styles, it is far more optimal, performance-wise, to keep them in your "main" css file. The primary reason is that creating another http connection to load the separate file would take far more time than loading a few more bytes from a file that already has an open connection.<\/p>\n

    A nice trick to help provide page-specific styling without affecting other pages is to reference the page path and filename in the body tag class attribute. For example:<\/p>\n

    <body class="page-products-staplers">
    \n\t<\/code><\/p>\n

    In ColdFusion, you might do the following:<\/p>\n

    <body class="<cfoutput>page-#ListFirst(ListChangeDelims(CGI.SCRIPT_NAME, "-", "\/"),".")#<\/cfoutput>"><\/p>\n

    \t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

    One major decision when it comes to performance optimizing your site is how to merge your CSS files, if at all. Let's say that you…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[34,12,41],"tags":[84],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/183"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=183"}],"version-history":[{"count":1,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/183\/revisions"}],"predecessor-version":[{"id":184,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/183\/revisions\/184"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}