Stylesheets - CSS specific for modular code- theory question

Author

CSS specific for modular code- theory question

bbcrock@gmail.com

2005-11-14, 7:10 pm

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

2005-11-14, 7:10 pm

bbcrock@XXXXXXXXXX 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

2005-11-14, 10:32 pm

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="bbcrockcode_wrapper">
<h1 class="bbcrockcode_heading">Foo</h1>
</div>

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

<?php
$prefix = "bbcrockcode_";
$idprefix = "bbcrockcode_ident_";

function printflibble ()
{
global $prefix, $idprefix; // globals are evil
print "<div id=\"{$idprefix}flibble\" "
. "class=\"{$prefix}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

2005-11-15, 7:21 pm

"Toby Inkster" <usenet200511@tobyinkster.co.uk> wrote in message
news:huln43-qlb.ln1@ophelia.g5n.co.uk...
> bbcrock wrote:
>
> For bonus points, give all your classes and IDs a common prefix. e.g.
>
> <div id="bbcrockcode_ident_flibble" class="bbcrockcode_wrapper">
> <h1 class="bbcrockcode_heading">Foo</h1>
> </div>
>
> and make sure that this common prefix can easily be changed. e.g.
>
> <?php
> $prefix = "bbcrockcode_";
> $idprefix = "bbcrockcode_ident_";
>
> function printflibble ()
> {
> global $prefix, $idprefix; // globals are evil
> print "<div id=\"{$idprefix}flibble\" "
> . "class=\"{$prefix}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', "bbcrockcode_" );
define( 'IDPREFIX', "bbcrockcode_ident_" );
>
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

2005-11-15, 7:21 pm

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