CSS specific for modular code- theory question

[bbcrock]

I have some modular code that is written for display purposes. It
contains inline CSS code. I originally thought about moving all the
inline code to a css file for use throughout the site- one css file
with all the site's code. However this would hurt the code's
portability throughout multiple sites. Does anyone know of a good
article (or does anyone have strong opinions) about how to organize
styles in modular code. The code in question is a ColdFusion component
(like ASP.NET), but I think this CSS topic can relate to any language.

So do I move the code to a central CSS file with documentation on the
styles or do I leave it be? Can I default to a css file first? I
think inline css always takes precedence.

thanks,

Don

[Jim Moe]

bb*****@gmail.c om wrote:

So do I move the code to a central CSS file with documentation on the
styles or do I leave it be? Can I default to a css file first? I
think inline css always takes precedence.

By all means document your styles. Place the primary stylesheet that
defines the overall style for the site in a standard location. Add
specific stylesheets for specific situations.
The last applicable style encountered wins.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Toby Inkster]

bbcrock wrote:

I have some modular code that is written for display purposes. It
contains inline CSS code.

Take out the inline styles. Add lots and lots of classes and IDs -- more
than you could possibly want. Distribute your module with a sample
stylesheet that uses these classes and IDs.

For bonus points, give all your classes and IDs a common prefix. e.g.

<div id="bbcrockcode _ident_flibble" class="bbcrockc ode_wrapper">
<h1 class="bbcrockc ode_heading">Fo o</h1>
</div>

and make sure that this common prefix can easily be changed. e.g.

<?php
$prefix = "bbcrockcod e_";
$idprefix = "bbcrockcode_id ent_";

function printflibble ()
{
global $prefix, $idprefix; // globals are evil
print "<div id=\"{$idprefix }flibble\" "
. "class=\"{$pref ix}wrapper\">\n "
. " <h1 class="{$prefix }heading">Foo</h1>\n"
. "</div>\n";
}
?>

This will prevent clashes of class names, IDs etc when integrating your
module into some other site.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Dana Cartwright]

"Toby Inkster" <us**********@t obyinkster.co.u k> wrote in message
news:hu******** ****@ophelia.g5 n.co.uk...

bbcrock wrote:

For bonus points, give all your classes and IDs a common prefix. e.g.

<div id="bbcrockcode _ident_flibble" class="bbcrockc ode_wrapper">
<h1 class="bbcrockc ode_heading">Fo o</h1>
</div>

and make sure that this common prefix can easily be changed. e.g.

<?php
$prefix = "bbcrockcod e_";
$idprefix = "bbcrockcode_id ent_";

function printflibble ()
{
global $prefix, $idprefix; // globals are evil
print "<div id=\"{$idprefix }flibble\" "
. "class=\"{$pref ix}wrapper\">\n "
. " <h1 class="{$prefix }heading">Foo</h1>\n"
. "</div>\n";
}
?>
This is OT I know, but since I too smear PHP/HTML/CSS together, I will just
say I'd prefer to see:

<?php
define( 'PREFIX', "bbcrockcod e_" );
define( 'IDPREFIX', "bbcrockcode_id ent_" );

function printflibble ()
{
......
}
?>

which gets rid of the global statement and reduces the possibility of one's
globals getting accidently changed. The question of capitalizing the names
of globals is strictly a personal preference thing.

[Toby Inkster]

Toby Inkster wrote:

Take out the inline styles. Add lots and lots of classes and IDs -- more
than you could possibly want.

Oh... and then add some more.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact