Splitting up a project stylesheet?

[sdcinvan]

Hello all!

My stylesheet is becoming a bit too large and I am wondering if it makes sense to split it into smaller chucks... for example, split it by media (medium) types? I have default, @media print, @media printPDF, @media non-print, and now @media mobidoc. @media mobidoc is going to be fairly large because of the huge number of changes required in order to successfully output mobi and ePub.

What I am wondering is if there are any caveats that I should be aware of when using @import url('stylesheet2.css');? Specifically...
a) If I am going to edit stylesheet parameters within Flare's own stylesheet editor, will it recognize the different stylesheets for each medium? I'm guessing NOT. Confirmed, Flare does not!
b) Besides really old browsers not supporting @import url, are there any concerns over the newer (more relevant) browsers?

Has anyone successfully used @import url('stylesheet2.css');?

Thank you

[pdenchfield]

I have been using @import url ('stylesheet2.css'); for a while and it's working great.

a) I have not tried medium-specific stylesheets yet.
b) I have not had to consider very many web browsers because the Help I create is on-board the device only (IE 7 on Windows).

[sdcinvan]

I have been using @import url ('stylesheet2.css'); for a while and it's working great.

a) I have not tried medium-specific stylesheets yet.
b) I have not had to consider very many web browsers because the Help I create is on-board the device only (IE 7 on Windows).

Thank you Pamela for giving me the encouragement to move forward on this plan.

[doc_guy]

What I am wondering is if there are any caveats that I should be aware of when using @import url('stylesheet2.css');? Specifically...
a) If I am going to edit style sheet parameters within Flare's own style sheet editor, will it recognize the different style sheets for each medium? I'm guessing NOT. Confirmed, Flare does not!
b) Besides really old browsers not supporting @import url, are there any concerns over the newer (more relevant) browsers?

Has anyone successfully used @import url('stylesheet2.css');?

Yes. I've successfully imported style sheets without issue. Actually, I use some type of the @import command on almost every project I work on.

You'll hear people say that @import is bad for performance if you use it the wrong way. My @imports are pretty small, for the most part, and I don't use a ton of them in a row. But you should be aware, that this CAN impact performance. If you care about that sort of thing, then you'll want to dig into this issue further.

When you are working in Flare, you do need to remember to open the correct style sheet in the style sheet editor. If you open just the main style sheet with all the @imports, Flare will make the changes IN THAT STYLE SHEET. It won't go into the imported style sheets to make the change. After all, you aren't in the imported style sheet. You are in the main style sheet. Flare is just doing what you told it to do.

I understand that the @import command won't work unless it is at the top of your style sheet before you declare any styles. I haven't verified this to be true, but I've always put the @import command at the top, just to be sure.

Despite my recent posting questioning why somebody would want to break up the style sheet into separate CSS files for each media type, I will admit that I did this at one point. The reason being, I wanted my headings to stick out to the left of the main body of text; in effect, all paragraphs were indented, but the headings were hanging. I did this in PDF by setting the body frame of the page layout to be a specific narrower width, allowing paragraphs to take the whole available width, and adding negative left margin to the headings. This worked great in PDF, but it had the unintended side effect of making it so if somebody printed my HTML output, the headings were cut off the left side of the page. So I created separate CSS files for PDF output.

With really large style sheets, I can see the allure of keeping them separate and then modifying them individually with a common css file that imports all the disparate files into a single location for all your outputs, and I think that generally, you should be just fine using it if you are aware of the potential issues, like you seem to be.

[NorthEast]

There's a similar discussion in this thread, if you're thinking of this approach:
http://forums.madcapsoftware.com/viewto ... 41#p101420

I find the main benefits of having a 'modular' approach to CSS are ease of maintenance, and the ability to pick which CSS components are used in a target/project (I use the same CSS in many projects, so this is important).

[sdcinvan]

There's a similar discussion in this thread, if you're thinking of this approach:
http://forums.madcapsoftware.com/viewto ... 41#p101420

I find the main benefits of having a 'modular' approach to CSS are ease of maintenance, and the ability to pick which CSS components are used in a target/project (I use the same CSS in many projects, so this is important).

Thank you Paul and Dave.

I have successfully split up my stylesheet into multiple parts that are now more manageable and portable.

[sdcinvan]

WHOA THERE!

This linking idea doesn't seem to work! What the fudge?

I just published the web based version of my user guide and it came out a BIG FAT MESS because none of the stylesheet web modifications from @import url('../../Resources/Stylesheets/webdoc.css'); were read.

That is odd, considering that the mclog states that this stylesheet was processed:
Processing CSS: Resources\Stylesheets\webdoc.css...

To test that I didn't muck up something elsewhere, I copied the content from webdoc.css back into the main css, published to web again... everything was fine again. If this works for others, what did I do wrong?

I am assuming that the web TARGET, General/Master Stylesheet can remain selected on the Master stylesheet (because the master has an instruction to include the webdoc.css)?

Thank you,
Shawn

[NorthEast]

I just published the web based version of my user guide and it came out a BIG FAT MESS because none of the stylesheet web modifications from @import url('../../Resources/Stylesheets/webdoc.css'); were read.

I would hazard a guess that your import URL is wrong - this is relative to the current stylesheet, so that's likely to be just 'webdoc.css'.

[sdcinvan]

I just published the web based version of my user guide and it came out a BIG FAT MESS because none of the stylesheet web modifications from @import url('../../Resources/Stylesheets/webdoc.css'); were read.

I would hazard a guess that your import URL is wrong - this is relative to the current stylesheet, so that's likely to be just 'webdoc.css'.

That is a good thought, I'll try this again sans path (even if the path was relative and should have been valid).

If that is the reason, why didn't the log indicate that it could not find the stylesheet?

[sdcinvan]

Thank you Dave!

Unfortunately
@import url("webdoc.css"); - double or single quotes... did not work.

[doc_guy]

Is the @import command at the top of the style sheet? I believe I've read that web browsers won't use it properly if there are style declarations before it.

Here is a sample top of a stylesheet that works properly for me:

[sdcinvan]

Is the @import command at the top of the style sheet? I believe I've read that web browsers won't use it properly if there are style declarations before it.

Here is a sample top of a stylesheet that works properly for me:

I'm afraid so... my imports also occur at the top level.
...but they are now commented out b/c I stopped trying to use them

Code: Select all

/*<meta />*/

/* Load addition dependent stylesheets for other supported medium types */
/* @import url('mobidoc.css');
@import url('printdoc.css');
@import url('webdoc.css'); */

body
{
	font-size: .83em;
	font-family: 'Proxima Nova Rg', Calibri, sans-serif;
	font-variant: normal;
	font-style: normal;
	font-weight: 100;
	/* letter-spacing: 0.12%; */
	color: #404040;
	line-height: 1.2em;
	max-width: 55em;
}

[doc_guy]

When you generate output, are all four stylesheets in the output stylesheets folder?

Are you building HTML5 output?

[sdcinvan]

When you generate output, are all four stylesheets in the output stylesheets folder?

Are you building HTML5 output?

Greetings Paul,

I am building both HTML and PDF docs.

But it is the HTML that was the problem (I had not tested the other mediums). It was very clear that "@import url('webdoc.css');" wasn't loading (even though the log seemed to indicate so).

[NorthEast]

It's probably one of these:

- The import statement is correct, but the imported CSS file is invalid. Check your imported stylesheets individually to see if they're valid; i.e. link them to a topic and check the styles display as expected. Something like a missing } around a medium will cause the entire stylesheet to be invalid.

- The import URL isn't correct; I'm assuming the stylesheet with the import statements is in the same folder as stylesheets it's importing, if not you need the relative path.

- The medium isn't selected in the target.