controlling css through php

Question

im about to start work on a new LAMP project.

in general, all the css classes that i make, specially for layout are like this:

.pageBoundaries{
   width:999px;
   margin:auto;
}

.onethird{
   width:333px;
   float:left;
   display:block;
}

.twothird{
   width:666px;
   float:left;
   display:block;
}

.half{
   width:499px;
   float:left;
   display:block;
}

now , i was thinking that i make a php file to control such things as width (may be color, borders,etc.). just like:

$pageWidth=999;


.pageBoundaries{
       width:<?php $pageWidth ?>px;
       margin:auto;
    }

    .onethird{
       width:<?php $pageWidth/3 ?>px;
       float:left;
       display:block;
    }

    .twothird{
       width:<?php ($pageWidth*2)/3 ?>px;
       float:left;
       display:block;
    }

    .half{
       width:<?php $pageWidth/2 ?>px;
       float:left;
       display:block;
    }

and then i can set headers from this php file so that browser interprets it as a css file. any ideas about this scheme? its pros and cons?

by doing this, i think making multi-colored themes would also be pretty easy.

you're css script would get to the client slower , static files are sent to the browser faster . — Poelinca Dorin
– Poelinca Dorin, Commented Dec 30, 2010 at 9:25
@poelinca Server-side caching strategies can make that an easier pill to swallow. — ceejayoz
– ceejayoz, Commented Dec 30, 2010 at 20:37

Jan Hančič · Accepted Answer · 2010-12-30 09:24:40Z

2

Seems OK, just make sure to send all the proper HTTP headers for caching, so that browsers won't download your CSS files on every request.

Also take a look at SASS and LESS. They are two different technologies that solve the same problem (so decide for one of them). What they do is, give you more tools for writing CSS. Stuff like variables, nesting (so you don't have to repeat your selectors all over the place), extending, mixins, functions, etc. Look at the home page of SASS, it gives you a good overview of what it does.

answered Dec 30, 2010 at 9:24

Jan Hančič

54k17 gold badges99 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Fleming Over a year ago

It isn't always good to cache CSS files. One problem with it in this case is if the client browser is resized. It won't catch the event and won't update because the CSS file is cached.

Jan Hančič Over a year ago

See my comment to your answer.

Pekka · Accepted Answer · 2010-12-30 09:25:00Z

1

This approach is usually^* fine.

Just don't forget to send the right caching headers as well so the resource isn't requested every time.

If you have CSS settings that may change on every page, consider separating those and putting them into the actual HTML document, so the whole style sheet doesn't have to be loaded every time.

_{* On very high-traffic sites the fact that the style sheet gets parsed by the PHP interpreter on every request is an issue, because it takes up RAM. In that case, you're better off having a PHP script generate static files.}

answered Dec 30, 2010 at 9:25

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Comments

Andy Fleming · Accepted Answer · 2010-12-30 23:39:03Z

1

Thoughts

It is an interesting idea, but probably not the best approach. Dynamic CSS through PHP does have some cool advantages, but I wouldn't use it for page width.

Specific Con's:

• Loads slower. You can set cache headers so it only loads the CSS once, but still not the best way. You would have to constantly empty/invalidate the cache, rename the file or add a parameter.

• Also, PHP only would set the page width values on the page load. What happens if the page resizes? (Hence why people usually use javascript instead of PHP for a purpose like you've described)

Good uses of dynamic CSS through PHP:

• If you want to set specific CSS attributes for certain users or based on certain variables set in PHP. (ex. color preferences stored for a user in a database)

When not to use CSS through PHP:

• When you need the CSS to change after the page has loaded. (ex. resize/move an element when the browser window is resized -- not using percentages)

Alternative

A javascript-based approach might be better. A framework like jQuery has some good tools for manipulating CSS as well as accessing the width of elements such as the document or window.

Other CSS Tools:

SASS/SCSS and LESS are also useful. They provide tools for setting variables, etc with CSS.

edited Dec 30, 2010 at 23:39

answered Dec 30, 2010 at 10:10

Andy Fleming

7,9136 gold badges37 silver badges55 bronze badges

4 Comments

Jan Hančič Over a year ago

You can easily invalidate a cached CSS file by appending some random query parameter to it (?v=1, ?v=2, ... and during development you make it so that it changes automatically on every request). I think you are a little bit misguided on the whole "width" issue. If you have a fixed-width layout then resizing the window has no affect on the layout (besides, that width is not set based on the browser size). If you have a fluid layout, then you don't have fixed width's defined in your CSS file. Besides even if this was an issue, you'd still have the same "problem" with SASS or LESS.

Ahmad Over a year ago

actually controlling the expiry headers(cache) is not an issue and in another project im already doing something like ?v=1 ,?v=2.. width is also not the major issue. the problem with css files is that they get extremely big and difficult to maintain with redundant parameters going to many classes e.g., float:left, color:#XXXXXX, margin-left:10px, etc. etc..

Ahmad Over a year ago

so, i was thinking about having a custom framework to solve these issues. making generic classes and controlling them programaticaly through php. SCSS/LESS looks good but i think it will create problems if u do all the development on windows machines and deploy in linux environments

Andy Fleming Over a year ago

@Ahmad - Building a simple framework help generate CSS might be a good way to go. The same principles apply. Executing PHP will take longer than a static file. Also, once the page loads, you would have to use javascript to make any changes to the CSS. (you might not need to make any changes after the page load though)

iPhoneMac · Accepted Answer · 2010-12-30 09:27:33Z

0

You must embed your css and php code on same file. One more thing, remember, php is rendered first, as its server scripting, following by client script like html, js or css

answered Dec 30, 2010 at 9:27

iPhoneMac

233 bronze badges

Comments

Nextneed · Accepted Answer · 2010-12-30 09:28:27Z

0

The idea is fine,but i think you can do the same thing in a cleaner way using LESS

answered Dec 30, 2010 at 9:28

Nextneed

1,0698 silver badges6 bronze badges

Comments

evilReiko · Accepted Answer · 2010-12-30 09:33:19Z

0

Pros: You can have your own dynamic theme with this approach

Cons: You have to stop client browser from caching to get the dynamic content, but if you do so, CSS file will be downloaded upon each request, it will take more time to load each page for the client

answered Dec 30, 2010 at 9:33

evilReiko

20.6k24 gold badges93 silver badges109 bronze badges

Collectives™ on Stack Overflow

controlling css through php

6 Answers 6

2 Comments

Comments

Thoughts

Alternative

Other CSS Tools:

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Thoughts

Alternative

Other CSS Tools:

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related