Understanding Writing Better HTML & CSS

[XaviJr]

I saw this article https://css-tricks.com/14492-writing-better-html-css-slides-from-fowa-london/ and I’m trying to understand it and implement the same css structure to my projects but there are some concepts hard to realize.

First of all, the smarty function slide. That code is html, php..? The slide says that it can be any server language, so I guess that example is php. So I should put that code nested in tags or just the {autoVersion} and {/autoVersion} parts?

In the next slide it says to add a line to .htaccess file. What’s the point doing this? I’m completely noob regarding that file. I saw this http://httpd.apache.org/docs/1.3/mod/mod_mime.html#addhandler page but it didn’t help me understand it.

Finally that php code we see in the next 2 slides. I can’t understand where this code is located.

But most important, it really seems magic to me how the website knows what css file must load in each page. I don’t see where the choice is made.

[XaviJr]

Yes, I already made a comment on the article. I know he appears here once in a while so I made this article expecting him to see (or anyone who knows about this technique).

[Chris Coyier]

AutoVersion is essentially a PHP function that takes the file path of that CSS file as a parameter. It does the four things listed on one of those following slides.

So instead of Smarty, it could be…

Or any other server side language.

The .htaccess ensures that CSS files that are loaded *directly* are parsed by PHP (they wouldn’t be normally) so the AutoVersioning works on them as well.

[XaviJr]

Ok, so I just need to find a way to integrate that function with WordPress.

By the way, one of your slides shows a lot of css files (table.css, gallery, etc). Isn’t a bad thing to load multiple small files instead of just a big one?

[Chris Coyier]

That’s the primary purpose of the autoversion function. It concatenates those smaller files together because yes, it is a bad thing to load a bunch of small files instead of one slightly larger one.

[XaviJr]

That explanation was a Wow moment for me, thank you Chris.

[Author]

Posts