ansaurus

Question

Answer 1

A:

You could have a colours.css file with just the colours/images for each tag in. Then you can change the colours just by replacing the file, or having a dynamically generated CSS file, or having different CSS files available and selecting based upon website URL/subfolder/property/etc.

Or you can have colour tags as you write, but then your HTML turns into:

CSS should have a feature where you can define values for things like colours that you wish to be consistent through a style but are defined in one place only. Still, there's search and replace.

JeeBee 2008-09-19 15:24:13

Downvoted... putting color names into classes is a bad practice because next week "grey" will need to be "blue" and you're stuck with a poor naming convention.

y0mbo 2008-09-19 15:35:51

Answer 2

A:

So you're saying you don't want to go back into your CSS to change color values if you find another color 'theme' that might work better?

Unfortunately, I don't see a way around this. CSS defines styles, and with color being one of them, the only way to change it is to go into the css and change it.

Of course, you could build yourself a little program that will allow you to change the css file by picking a color wheel on a webpage or something, which will then write that value into the css file using the filesystemobject or something, but that's a lot more work than required for sure.

Kolten 2008-09-19 15:24:13

Answer 3

A:

Generally it's better to just find and replace the colours you are changing.

Anything more powerful than that will be more complex with few benefits.

Allain Lalonde 2008-09-19 15:24:27

Answer 4

+3 A:

One thing I've done here is break out my palette declarations from other style/layout markup, grouping commonly-colored items in lists, e.g.

h1 { 
 padding...
 margin...
 font-family...
}

p {
 ...
}

code {
 ...
}

/* time passes */

/* these elements are semantically grouped by color in the design */
h1, p, code { 
 color: #ff0000;
}

On preview, JeeBee's suggestion is a logical extension of this: if it makes sense to handle your color declarations (and, of course, this can apply to other style issues, though color has the unique properties of not changing layout), you might consider pushing it out to a separate css file, yeah. This makes it easier to hot-swap color-only thematic variations, too, by just targeting one or another colorxxx.css profile as your include.

Josh Millard 2008-09-19 15:25:12

Answer 5

+2 A:

That's exactly what you should do.

The more centralized you can make your css, the easier it will be to make changes in the future. And let's be serious, you will want to change colors in the future.

You should almost never hard-code any css into your html, it should all be in the css.

Also, something I have started doing more often is to layer your css classes on eachother to make it even easier to change colors once... represent everywhere.

Sample (random color) css:

.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}

Then some markup, notice how I am using the colors layer with otehr classes, that way I can just change ONE css class:

<body class='main_text'>
  <div class='main_color secondary_text'>
    <span class='secondary color main_text'>bla bla bla</span>
  </div>
  <div class='main_color secondary_text>
    You get the idea...
  </div>
</body>

Remember... inline css = bad (most of the time)

naspinski 2008-09-19 15:26:51

Answer 6

A:

CSS is not your answer. You want to look into an abstraction on top of CSS like SASS. This will allow you to define constants and generally clean up your css.

Here is a list of CSS Frameworks.

aaronjensen 2008-09-19 15:27:17

Answer 7

A:

I keep a list of all the colors I've used at the top of the file.

Terhorst 2008-09-19 15:27:44

Answer 8

A:

When the CSS is served by a server-side script, eg. PHP, usually coders make the CSS as a template file and substitute the colors at run-time. This might be used to let users choose a color model, too.

Another way, to avoid parsing this file each time (although cache should take care of that), or just if you have a static site, is to make such template and parse it with some script/static template engine before uploading to the server.

Search/replace can work, except when two initially distinct colors end up being the same: hard to separate them again after that! :-)

If I am not mistaken, CSS3 should allow such parametrization. But I won't hold my breath until this feature will be available in 90% of browsers surfing the Net!

PhiLho 2008-09-19 15:30:17

Answer 9

+1 A:

See: Create a variable in .CSS file for use within that .CSS file

To summarize, you have three basic option:

Use a macro pre-processor to replace constant color names in your stylesheets.
Use client-side scripting to configure styles.
Use a single rule for every color, listing all selectors for which it should apply (my fav...)

Shog9 2008-09-19 15:31:04

Answer 10

+1 A:

Maybe pull all the color information into one part of your stylesheet. For example change this:

p .frog tr.mango {
    color: blue;
    margin: 1px 3em 2.5em 4px;
    position: static;
}
#eta .beta span.pi {
    background: green;
    color: red;
    font-size: small;
    float: left;
}
// ...

to this:

p .frog tr.mango {
    color: blue;
}
#eta .beta span.pi {
    background: green;
    color: red;
}
//...
p .frog tr.mango {
    margin: 1px 3em 2.5em 4px;
    position: static;
}
#eta .beta span.pi {
    font-size: small;
    float: left;
}
// ...

rampion 2008-09-19 15:33:02

Answer 11

+1 A:

I sometimes use PHP, and make the file something like style.css.php. Then you can do this:

<?php 
    header("Content-Type: text/css");
    $colour1 = '#ff9'; 
?>
.username {color: <?=$colour1;?>; }

Now you can use that colour wherever you want, and only have to change it in one place. This also works for values other then colours of course.

mrinject 2008-09-19 17:27:32

this can be a great strategy, and makes it easy to gzip and compress your css too (output buffer and regex out spaces, commments etc)

Buzz 2008-09-19 19:24:14

Answer 12

A:

I like the idea of separating the colour information into a separate file, no matter how I do it. I would accept multiple answers here if I could, because I like Josh Millard's as well. I like the idea of having separate colour rules though because a particular tag might have different colours depending on where it occurs. Maybe a combination of both of these techniques would be good:

h1, p, code {
    color: #ff0000;
}

and then also have

.color1 {
    color: #ff0000;
}

for when you need to restyle.

dbrien 2008-09-19 18:15:00

ansaurus

tags:

views:

answers:

css organization and colours

related questions