Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Matt Campbell
9,767 PointsLinking CSS for each template in that template's file
Suppose this is relevant for anyone using php headers and templates.
In the interest of minimising load times, I was wandering if, linking each templates CSS file in the template is bad practice?
If I have a template called holidays, is it ok to put the link to the CSS file at the top of the holidays template rather then link it in the header or, my preferred method, importing to the main stylesheet?
Am I having a dense moment and forgotten of an implication by not having it run through the main stylesheet and is it actually going to decrease page size and load time?
2 Answers
Kevin Korte
28,149 PointsI believe it would work, if you put it in the body, but I am also almost certain it is bad practice, will not validate, and could have unpredictable side effects.
The @import rule in CSS also too, isn't good for performance, as it is yet another server request, and will slow down your site. You would be better off having one big CSS file over importing multiple CSS files into the main.
If you're using a language like Sass or Less, than the import feature is just fine since the import happens and preproccessing, and not at the browser load, so it doesn't' slow the page down, or add another server request.
I would do one of two thing. I'd either just have the code (especially if it's not much ) as one big CSS main file, or follow the practice of what Randy did in the PHP lessons to echo the "ON" class in the menu.
In your header, you might have something like this in the head.
<head>
<?php
switch ($template) {
case "holidays"
echo "<link href='path/to/holidays/css/file.css' type='text/css' rel='stylesheet'>"
break;
case "travel"
echo "<link href='path/to/travel/css/file.css' type='text/css' rel='stylesheet'>"
break;
case "specialOccasions"
echo "<link href='path/to/specialoccasionscss/file.css' type='text/css' rel='stylesheet'>"
break;
}
?>
</head>
And than at the very top of your template, say your holidays template, set the variable of
$template
to
$template = 'holidays';
and when the PHP executes it should echo out the correct link to the correct style sheet, in the head of the page, everyone is happy. For other templates and other stylesheets, just change what the $template variable is equal to match whatever term you give it in the switch statement. You could also use a PHP if/else statement as well.
Kevin Korte
28,149 PointsYeah that becomes a CSS monster that is for sure.
This must be a wordpress site?
Matt Campbell
9,767 PointsYeah it is, why I put it in the WordPress section. ;p
The site with 2,000 lines of CSS is performing just fine, started a new project and got to thinking about more efficient ways of linking CSS. Think I'll stick with import.
Kevin Korte
28,149 PointsThat brings up a good point that in the forums, it's not particularly clear what section a question is when looking at the full list of posts. Mmm.
Have you looked at the is_page or is_post function built in to wordpress? There are a ton of is_" " functions you can use to dynamically load something when a condition is met.
So for your holdays example, you could have a
<?php if(is_page( 'holiday' )) {
wp_enqueue_style( 'holiday', get_template_directory_uri() . 'css/holiday.css');
} ?>
That might be a solid solution for you, lots of options for arguments you can pass the function, and lots of different types of functions to check for all sorts of things.
The biggest thing to just keep in mind when using the @import rule is that it can prevent the stylesheets from downloading at the same time. The styles in the @import may not start to download until the first stylesheet has completed finished loading, where as loading them in the header through the functions.php like I did above, so they come in a <link> elements will allow the stylesheets to all load concurrently. Just keep an eye on your load times.
Kevin Korte
28,149 PointsI meant to link this too: http://codex.wordpress.org/Function_Reference/is_page
Matt Campbell
9,767 PointsThat's a great shout Kevin. I had forgotten about that. Can so something with it.
Kevin Korte
28,149 PointsI think that might be your best bet! I think persuing this idea of only loading extra things on pages that need them is a great start to faster loading sites, and that "is_" function might just be the ticket! Good luck.
Paul Graham
1,396 PointsKevin is right, I use these WP functions in production to load JS files on pages where they are relevant.
I'm not sure though that loading separate CSS files is really going to speed anything up. Unless we're talking about 60kb files or something, the time it takes to make extra requests will slow down your app far more than compressing and concatenating all your CSS.
Paul Graham
1,396 PointsAlso, just to clarify you don't need to load them in the template. You should leave all your CSS enqueues in functions.php where it belongs as you can do the same logic checks for the page in functions.php
I question the fact that you have a 3k line CSS file to begin with. That sounds like it needs a massive refactor and a healthy dose of CSS preprocessor.
Kevin Korte
28,149 PointsI got into Sass a few weeks ago, and already wonder how I wrote CSS without it, and I know I'm baring scratching the surface with what it can do, as my mixins are still basic and I haven't even touched the functions yet.
So I can agree here, if there was a time to get into a preprocessor, now would be the time.
Matt Campbell
9,767 PointsJust to tune Woocommerce pages to look how you want is nearly a thousand lines of CSS. Site is as quick as it's possibly going to get, and it is super snappy, so not too worried.
Paul Graham
1,396 PointsIt's not about speed, it's about maintainability. Speed is almost never a factor when dealing with CSS. But also, if your site is fast and you're not seeing problems, you maybe shouldn't worry too much about a few extra kilobytes of code. It all depends on audience though, if you're writing a site aimed at mobile users, you'd be more concerned about the raw amount of data you're sending. In general though, you're better optimizing for fewer requests for current gen web server technology. Soon this won't be a problem either as servers will be able to send multiple files with a single request but for now it is.
You can also turn Woocommerce into a style-free mode that only loads the HTML if you want. I usually do this as I've already defined styles for forms for sites so I'm already halfway to getting Woocommerce themed.
Matt Campbell
9,767 PointsMatt Campbell
9,767 PointsHi Kevin Korte - an idea although I could also go with enqueueing styles. Not sure. import isn't slowing much down.
There's no way I can have it all in one stylesheet. I've got 2,000 lines of CSS to deal with and that's probably only 25% - 30% of total CSS.
I had an inkling it would be considered bad practice but, it also seemed like a nice way to load each templates stylesheet without loading others. Enqueueing still seems to load all the stylesheets, just a way of controlling which one loads when.
I like what you've done above there, wander if I can put it in functions.php.