4

I'm working on two different WordPress sites that are in many ways similar but are skinned differently.

For example, let's say I'm working on two 'magazine' sites, which share the same CSS layout e.g. grid system, margin's etc., but different CSS decorational properties e.g. gradients, colours, shadows.

What is the best way to get them to share the same base CSS layout, but different decorational CSS?

Initially I thought something like ...

<link rel="stylesheet" type="text/css" media="all" href="LINK-TO-BASE-CSS-ON-PRIMARY-DOMAIN.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/style.css" /> <!-- This would be the 'top-up' CSS -->

This doesn't seem particularly clean to me though. I admit though, there is also a very similar question here.

Is this still considered the best way? Are there any disadvantages to linking to another domain? I've read that this may even be an advantage because of cross-domain loading.

Community
  • 1
  • 1
SparrwHawk
  • 13,581
  • 22
  • 61
  • 91
  • the only disadvantage of loading a cross-domain style sheet is that if the domain goes down then the style sheet won't be loaded, the main advantage is that it will be cached so it will only need to be loaded once for all the sites that use it – Pete Mar 11 '13 at 14:04
  • another advantage is that browser only allow a limited number of simultaneous connections per domain, so putting resources on another domain will allow you to load more resources simultaneously and therefore make your site faster. See also this question: http://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser – Michiel May 27 '13 at 08:52

3 Answers3

7

What you suggested is fine. I'm not sure that there is an advantage called "cross-domain loading", but hosting your style sheets in another server is a very common practice. This other server is known as a CDN, or Content Delivery Network. Here's some information about CDNs and their advantages:

http://www.sitepoint.com/7-reasons-to-use-a-cdn/

Also, pro-tip: do some DNS prefetching if you're going to use a separate domain to host your files. It's as easy as:

<link rel="dns-prefetch" href="//myexternalcdn.com" />
Ayman Safadi
  • 11,502
  • 1
  • 27
  • 41
1

try to separate layout structure and templates and call everything from the same domain

<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/firsttamplatename.css" />

OR

<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/secondtamplatename.css" />

Benefit of this solution is that you can adtionaly offer switching templates :D

tkeram
  • 214
  • 1
  • 5
  • Thanks for the answer, but is there any advantage in calling everything from the same domain? e.g. speed? FYI, there is no way they will ever need to have their theme switched to the other's because they are separate magazines – SparrwHawk Mar 11 '13 at 14:00
  • There is several benefits: speed - browsers cache the files from the same domain, separation and performance - this domain could point to separate file server, if you use file server for js,css and images you can save data-transfer on webserver. – tkeram Mar 11 '13 at 20:45
0

You can use this filter, to filter out styles with any condition or alternate output href string, example:

add_filter( 'style_loader_src', function($href){
if(strpos($href, "name-of-allowed.css") !== false) {
return $href;
}
return false;
});
PayteR
  • 1,727
  • 1
  • 19
  • 35