Re: shorter code with loops(?)

On Wed, Dec 23, 2009 at 2:44 AM, Asaf Chertkoff <asaf@freeallweb.org> wrote:
> Hi everybody,
> I thought of somthing - a lot of times i found my self writing the exect
> css attributes for several elements, with the different of only the name
> of the element background image, like this:

Typically, the way to resolve this is by using a class or somehow
otherwise targetting all of the similar elements together, and
applying the common styling through that.  That is, do something like
this:

.major-title {
  margin: 20px 10px 0 0;
  float: right;
  color: red;
}

#ff-title {
  background: url("images/ff-title.png") 0 0 no-repeat;
}

#clouds-title {
  background: url("images/clouds-title.png") 0 0 no-repeat;
}

#buildings-title {
  background: url("images/buildings-title.png") 0 0 no-repeat;
}

> anyhow, what i want to ask is if there is a simple way of doing this:
>
> #$value=[ff-title,building-title,...,cloud-title] {
> margin:20px 10x 0 0;
> float: right;
> color: red;
> background:url("images/'$value'.png") 0 0 no-repeat;
> }

If you do need to do something like this - apply nearly exactly
similar styling to a large group of things that differ only by name -
typically using a server-side programming language is the way to go.
For example, if you used PHP the file would look something like this:

<?php
header("Content-Type: text/css");
$titles = array("ff-title","building-title","cloud-title");
foreach($titles as $title) {
  echo "#$title { background: url('images/$title.png'); }\n";
}
?>

Problem solved, and since you have a full programming language at your
disposal, you can do much more complex things as well.  Writing CSS
programmatically has served me well in the past.

~TJ

Received on Wednesday, 23 December 2009 23:10:09 UTC