stacked stylesheets by import?

[pdenchfield]

We have two product-specific stylesheets (CSSs). It's been a nightmare to maintain changes across both. We're considering a different approach in which we add a third stylesheet that "stacks" our original two stylesheets, by importing Product A's CSS and then importing Product B's CSS. The last import would overwrite the first. This way I could strip down Product B's CSS to just the unique or differently formatted styles. This approach may be better than a monolithic CSS, providing flexibility (and single entry of info) for situations like the one we are currently in and other situations not currently foreseen.

Does anyone hear have this kind of stylesheet setup where you "stack by import"? If so can you tell me how it works?

Or have you found a manageable way to use multiple stylesheets in a project?

Thanks!
Pamela

[Nita Beck]

I do what you're asking about, and it's worked very nicely.

I have a global project in which a "global" stylesheet resides. In my product-specific child projects, there are product-specific style sheets that are linked to the global stylesheet. All the product-specific stylesheets have in them are those style properties that uniquely "brand" each product's Help. For instance, the color background for h1, h2, etc. will be unique for each product, but the other properties of those styles -- font, size, margins, padding -- are not set there, but rather flow from the global stylesheet. The target in each product-specific project points to the product-specific stylesheet, which is in turn linked to the global stylesheet.

So, here are the steps (very generally):
-- Create a global project to hold the global stylesheet.
-- In each child project, create an import file to import that global stylesheet. In the Project Import Editor, import the stylesheet (maybe the command is "Reimport") to import the global stylesheet for the first time. (You can select the "Auto-reimport before "Generate Output" check box so that the global stylesheet will be imported anew whenever you build your target.)
-- In each child project, open the child's stylesheet in the Stylesheet Editor. From that editor's Options drop-down list, select Stylesheet Links and select the *imported* global stylesheet.

If you view a child stylesheet in the Internal Text Editor, you'll see something like this:

Code: Select all

@import url('../../GlobalResources/Stylesheets/GlobalHelpStyles.css');

where the path points to the location of the imported stylesheet. That's the link from the child stylesheet to the global stylesheet.


All you really then need in a child stylesheet are the variations of those global styles.
Hope this help.

[pdenchfield]

Thanks, Nita! To confirm, does the child stylesheet override any conflicting style definitions imported from the global stylesheet?

Also am curious about importing more than one stylesheet (if we ever find a reason to do it). Thanks again!

[NorthEast]

Thanks, Nita! To confirm, does the child stylesheet override any conflicting style definitions imported from the global stylesheet?

Also am curious about importing more than one stylesheet (if we ever find a reason to do it). Thanks again!

No, it's the other way round.
The imported (linked) stylesheet file is run first, then the definitions in your current stylesheet follow those - so they will take precedence over the imported styles. (If you imagine it's like copying and pasting the imported CSS at the top of your stylesheet.)

I have found a way to load a second stylesheet by adding a second stylesheet link in a master page (i.e. so styles in the second stylesheet loaded take priority); although as Flare doesn't let you put in two links, it is a bit of a hack (and also means you can't use a master stylesheet).

[KevinDAmery]

Thanks, Nita! To confirm, does the child stylesheet override any conflicting style definitions imported from the global stylesheet?

No, it's the other way round.
The imported (linked) stylesheet file is run first, then the definitions in your current stylesheet follow those - so they will take precedence over the imported styles. (If you imagine it's like copying and pasting the imported CSS at the top of your stylesheet.)

If I'm reading this correctly, you're both actually saying the same thing, just using different terminology. In Nita's description, the Child stylesheet is the one that imports the Global stylesheet. So in this case

Global = imported (or linked, if you prefer)
Child = current

So it should work. Any style code in the current stylesheet will supersede what's in the imported stylesheet.

[pdenchfield]

Yep, it works great in my testing! Thanks.

[Nita Beck]

Glad to hear it!

I have to say that I LOVE global projects, and not just for the stylesheet issues. Right now, I have two product-specific projects that pull in my global project's content, and it's working great so far. I've got global snippets, images, topics, page layouts, master pages, and variable sets, and I add more to the global project frequently. Hopefully in 2010, I'll have migrated three more product-specific projects into Flare that will also pull stuff from the same global project. It'll be great to have just one master (global) stylesheet to maintain for most of my style definitions, instead of five stylesheets that would otherwise essentially be duplicates of each other.

[pdenchfield]

I wonder how all of our workarounds will fit with DITA support by Flare, whenever that comes about?

[LTinker68]

There's some DITA support in Flare in v5. It's not full support, I don't think, but there is some.