Sep
30
30
CSS abstraction made simple with PHP
CSS abstraction is a big deal with some frameworks, notably with Ruby on Rails. Basically, it enables you to define variables in your CSS. This is something that should be built-in anyway. I recently read a really nice article about why CSS abstraction matters, you can have a look here.
Now doing CSS abstraction with PHP is in fact simple. Change your stylesheet link to ’style.php’ and in your stylesheet add your php header: header(“Content-type: text/css”);
A typical example would look like this:
-
<?php
-
header("Content-type: text/css");
-
$siteBg= '#fff';
-
$textColor= '#333';
-
?>
-
body {
-
background:<?=$siteBg?>;
-
color:<?=$textColor?>;
-
}
-
h1, h2, h3, h4 {
-
color:<?=$textColor?>;
-
}
-
blockquote {
-
color:<?=$textColor?>;
-
}
I am currently working on a little bit more complex abstraction that would include, for example, the CSS3 rounded corner. Calling a php object would create all your cross browsers’ CSS.
Author: Cedric Dugas
Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.
Share this article:
6 Comments to “CSS abstraction made simple with PHP”
Leave a comment
Articles
Some Tweets
- looked at bell and videotron for a tv network solution, full of hidden rules, went with shaw direct @ShawDirect_News , honest service
- interesting post about Cross-domain localStorage http://bit.ly/9dfW8F
- back to work after 2 week of renovation on my house, glad to be back at doing javascript..
- traded my computer for this http://bit.ly/cCKVbr for 2 week, want my computer back..
- kind of old, bit I like it http://www.thereisnopagefold.com/
- I really have a love/hate relationship with the E texteditor, so good but so bad at the same time
Someone asked on my blog why not just use ERB (the ruby equivalent of passing css thru php) instead of Sass to achieve the same result. Why introduce a whole new language? My reply applies here as well:
http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/#comment-17898982
Additionally, I didn’t demonstrate the full power of mixins in my original post, but you simply cannot achieve the same results using this kind of templating approach as you can with mixins, because mixins know the selector context they are being mixed into, this allows you to embed nested selectors into the calling context.
I completely understand your point, you are talking of taking CSS to a new level and this is really great but,
Still I think abstraction trough php can have its place, it will certainly not be as powerful as mixins, because it do not understand the context of the whole selector. But it is a possible middle ground.
Of course the bigger benefit is that this solution is ready to go, no installation needed on the server.
So simple and so useful!
I know compass is already doing this, but its no easy to get started and understand by common designers.
I really think that your approach will fit better on actual web design agencies workflow. Lets wait Sass and Compass evolve a little more until they are really user friendly.
@ehecatl What is not user friendly about sass and compass?
@cedric There are performance reasons why serving php templated css that never changes per user is a bad thing to encourage (or not even warn people about).
If you’re looking for a more familiar syntax, you should check out http://lesscss.org/
It’s true that you can achieve many of the abstraction benefits that my article points out with php, but dedicated css syntaxes like sass and less (and for php users: csscaffold) really up the level of expressiveness and maintainability of the stylesheets in lots of small ways that add up.
@Chris serving CSS as php is not an issue if you are using a caching system for php files, which most server use.
All imported css file should be converted in 1 one file anyway, lots of framework have an option for this, so this is a not really an issue, for me anyway
As for sass and compass, I do not use ruby, most company I know do not use it (and by this I mean it is not really a popular framework in my city). Less css is another good option, still need to install software on the server. I still think there is a place for php in this, if well executed.
But I agree that a full featured PHP abstraction would need a word of warning about how it is parsed on the server.
@cedric
Point taken about caching. You really should check out CSScaffold. It is written in PHP and is very full featured. http://github.com/anthonyshort/csscaffold
lesscss and sass are both written in ruby, neither requires you to have ruby on your production systems, just your dev and build systems and none require you to know how to write ruby code. Your machines probably have it installed already, and if they don’t, it’s easy to install.